@import "media.less";

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

html {
    width: 100%;
    height: 100%;
    display: block;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

header {
    position: relative;
    padding: 0 50px 0 50px;
}

body {
    height: 100%;
    position: relative;
    background-color: #f7f7f7;
    background-repeat: repeat;
    background-size: cover;
    padding: 0;
    margin: 0;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;

    /* Firefox */
    &::-webkit-scrollbar {
        display: none;
    }

    &.stop-scrolling {
        height: 100%;
        overflow: hidden;
        position: fixed;
    }

    &.sheet-open {
        overflow: hidden;
    }
}

img {
    height: auto;
    max-width: 100%;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

a {
    font-size: 14px;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.dv {
    width: 100%;
    height: 100%;
    // overflow: hidden;
}

.wrap {
    height: 100%;
}

.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 90px;

    .media-sm( {
            padding-top: 85px;
        }

    );

    .media-xs( {
            padding-top: 80px;
        }

    );

    .media-xxs( {
            padding-top: 70px;
        }

    );
}

#dv-parent {
    height: 100%;
    width: 100%;
}

/* FONTS */
.lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lato-medium {
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.lato-semibold {
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.lato-extrabold {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.font-title1 {
    .lato-bold;
}

.font-title2 {
    .lato-extrabold;
}

.font-title3 {
    .lato-semibold;
}

.font-body1 {
    .lato-regular;
}

.font-body2 {
    .lato-light;
}

.font-body3 {
    .lato-medium;
}

/* COLORS */
@dark : #174344;
@ldark: #53aeb0;
@ddark: #113536;

@button: #be9b5f;
@brown : #8c6126;
@dbrown: #5d3907;
@lbrown: #755323;

@float : #ffffff;
@white : #ffffff;
@lwhite: #f7f7f7;
@dwhite: #dae1e3;
@white2: #f5f5f5;

@gray : #efefef;
@dgray: #b4b4b4;
@lgray: #d9d9d9;

@red : #db2727;
@green: #1db954;

.grayscale-on {
    -webkit-filter: grayscale(100%) brightness(0.8);
    /* Safari 6.0 - 9.0 */
    -moz-filter: grayscale(100%) brightness(0.8);
    -ms-filter: grayscale(100%) brightness(0.8);
    -o-filter: grayscale(100%) brightness(0.8);
    filter: grayscale(100%) brightness(0.8);
}

.grayscale-off {
    -webkit-filter: grayscale(0%) brightness(1);
    /* Safari 6.0 - 9.0 */
    -moz-filter: grayscale(0%) brightness(1);
    -ms-filter: grayscale(0%) brightness(1);
    -o-filter: grayscale(0%) brightness(1);
    filter: grayscale(0%) brightness(1);
}

.dark-on {
    -webkit-filter: grayscale(100%) brightness(0);
    /* Safari 6.0 - 9.0 */
    -moz-filter: grayscale(100%) brightness(0);
    -ms-filter: grayscale(100%) brightness(0);
    -o-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}

.white-on {
    -webkit-filter: grayscale(100%) brightness(3);
    /* Safari 6.0 - 9.0 */
    -moz-filter: grayscale(100%) brightness(3);
    -ms-filter: grayscale(100%) brightness(3);
    -o-filter: grayscale(100%) brightness(3);
    filter: grayscale(100%) brightness(3);
}

.white-off {
    -webkit-filter: grayscale(0%) brightness(1);
    /* Safari 6.0 - 9.0 */
    -moz-filter: grayscale(0%) brightness(1);
    -ms-filter: grayscale(0%) brightness(1);
    -o-filter: grayscale(0%) brightness(1);
    filter: grayscale(0%) brightness(1);
}

/* SPACINGS */
.dv-pt-25px {
    padding-top: 25px;
}

.dv-pt-50px {
    padding-top: 50px;
}

.dv-pt-75px {
    padding-top: 75px;

    .media-xs( {
            padding-top: 50px;
        }

    );
}

.dv-pb-25px {
    padding-bottom: 25px;
}

.dv-pb-50px {
    padding-bottom: 50px;
}

.dv-pb-75px {
    padding-bottom: 75px;

    .media-xs( {
            padding-bottom: 50px;
        }

    );
}

.dv-ptpb-25px {
    padding-top: 25px;
    padding-bottom: 25px;
}

.dv-ptpb-50px {
    padding-top: 50px;
    padding-bottom: 50px;
}

.dv-ptpb-75px {
    padding-top: 75px;
    padding-bottom: 75px;

    .media-xs( {
            padding-top : 50px;
            padding-bottom: 50px;
        }

    );
}

.dv-pl-2vw {
    padding-left: 2%;
}

.dv-pl-5vw {
    padding-left: 5%;
}

.dv-pl-10vw {
    padding-left: 10%;

    .media-xs( {
            padding-left: 5%;
        }

    );
}

.dv-pr-2vw {
    padding-right: 2%;
}

.dv-pr-5vw {
    padding-right: 5%;
}

.dv-pr-10vw {
    padding-right: 10%;

    .media-xs( {
            padding-right: 5%;
        }

    );
}

.dv-plpr-2vw {
    padding-left: 2%;
    padding-right: 2%;
}

.dv-plpr-5vw {
    padding-left: 5%;
    padding-right: 5%;
}

.dv-plpr-10vw {
    padding-left: 10%;
    padding-right: 10%;

    .media-xs( {
            padding-left : 5%;
            padding-right: 5%;
        }

    );
}

/* RESPONSIVE UTILITIES */
.visible-xs {
    display: none;

    .media-xs( {
            display: initial !important;
        }

    );
}

.hidden-xs {
    display: initial;

    .media-xs( {
            display: none !important;
        }

    );
}

.hidden-sm {
    display: initial;

    .media-sm( {
            display: none !important;
        }

    );
}

.visible-sm {
    display: none;

    .media-sm( {
            display: initial !important;
        }

    );
}

.visible-xxs {
    display: none;

    .media-xxs( {
            display: initial !important;
        }

    );
}

.hidden-xxs {
    display: initial;

    .media-xxs( {
            display: none !important;
        }

    );
}

/* ANIMATION */
.wow {
    visibility: hidden;
}

.dv-oh {
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
}

&.dv-oh {
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
}

.dv-image {
    // backface-visibility: hidden;
    // transform-style: preserve-3d;
    // position: relative;
    // &.dv-animation {
    -webkit-animation-name: dv-animation-photo;
    -moz-animation-name: dv-animation-photo;
    -o-animation-name: dv-animation-photo;
    animation-name: dv-animation-photo;
    animation-duration: 4s;
    transform-origin: center;
    // }
}

.dv-animation {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;

    &-text {
        -webkit-animation-name: dv-animation-text;
        -moz-animation-name: dv-animation-text;
        -o-animation-name: dv-animation-text;
        animation-name: dv-animation-text;
        animation-duration: 1.2s;
    }
}

@-webkit-keyframes dv-animation-photo {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@-moz-keyframes dv-animation-photo {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@-o-keyframes dv-animation-photo {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes dv-animation-photo {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes dv-animation-text {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0%, 0px);
    }
}

@-moz-keyframes dv-animation-text {
    0% {
        opacity: 0;
        -moz-transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        -moz-transform: translate3d(0px, 0%, 0px);
    }
}

@-o-keyframes dv-animation-text {
    0% {
        opacity: 0;
        -o-transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        -o-transform: translate3d(0px, 0%, 0px);
    }
}

@keyframes dv-animation-text {
    0% {
        opacity: 0;
        transform: translate3d(0px, 100%, 0px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0%, 0px);
    }
}

/* SLICK SETTING */
/* .slick-slider {
    margin-bottom: 0;
}
.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
} */

/* CONTENT */
.dv-navbar {
    position: fixed;
    // top: 0;
    // left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background-color: @white;
    background-repeat: repeat;
    overflow: visible;

    .media-xs( {
            padding: 20px 20px;
        }

    );

    .logo {
        img {
            width: 250px;
            height: auto;

            .media-xxs( {
                    width: 150px;
                }

            );
        }
    }

    .navbar {
        display: flex;
        align-items: center;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        gap: 32px;
        position: static;

        .media-sm( {
                position : absolute;
                top : 0;
                right : 0;
                width : 50%;
                background-color: @white;
                flex-direction : column;
                gap : 16px;
                padding : 24px;

                opacity : 0;
                pointer-events: none;
                transform : translateY(-10px);
                transition : all 0.5s ease-in-out;

                &.open {
                    display : flex;
                    align-items : flex-start;
                    z-index : 4;
                    padding : 25px 30px 25px 30px;
                    gap : 30px;
                    background-color: @dark;
                    opacity : 1;
                    pointer-events : auto;
                    transform : translateY(0);
                }
            }

        );

        .media-xs( {
                position : absolute;
                top : 0;
                right : 0;
                width : 100%;
                background-color: @white;
                flex-direction : column;
                gap : 16px;
                padding : 24px;

                opacity : 0;
                pointer-events: none;
                transform : translateY(-10px);
                transition : all 0.5s ease-in-out;

                &.open {
                    display : flex;
                    align-items : flex-start;
                    z-index : 4;
                    padding : 25px 30px 25px 30px;
                    gap : 30px;
                    background-color: @dark;
                    opacity : 1;
                    pointer-events : auto;
                    transform : translateY(0);
                }
            }

        );

        &-logo {
            margin-left: 0;
            margin-bottom: 50px;

            img {
                display: none;

                .media-sm( {
                        z-index: 4;
                        display: block;
                        width : 55px;
                        height : auto;
                    }

                );

                .media-xs( {
                        z-index: 4;
                        display: block;
                        width : 50px;
                        height : auto;
                    }

                );
            }
        }

        &-list {
            .font-body2;
            color: @dark;
            font-size: 14px;
            letter-spacing: 0.07em;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;

            &.is-active {
                .font-title1;

                .media-sm( {
                        color: @button;
                    }

                );

                .media-xs( {
                        color: @button;
                    }

                );
            }

            &:hover {
                .font-title1;
            }

            .media-sm( {
                    width : 100%;
                    text-align: left;
                    .font-title1;
                    color : @white;
                    text-transform: none;
                    font-size : 24px;
                    letter-spacing: 0.03em;
                }

            );

            .media-xs( {
                    width : 100%;
                    text-align: left;
                    .font-title1;
                    color : @white;
                    text-transform: none;
                    font-size : 18px;
                    letter-spacing: 0.03em;
                }

            );

            &.js-dropdown {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                user-select: none;

                .dropdown-icon {
                    width: 14px;
                    height: auto;
                    transition: transform 0.3s ease;
                }

                .media-sm( {
                        .dropdown-icon {
                            content: url("../../images/dropdown-02.svg");
                        }
                    }

                );

                .media-xs( {
                        .dropdown-icon {
                            content: url("../../images/dropdown-02.svg");
                        }
                    }

                );

                &.active {
                    .dropdown-icon {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        .btn-member {
            .font-title1;
            background: @button;
            color: @white;
            font-size: 16px;
            letter-spacing: 0.02em;
            text-align: center;
            padding: 20px;
            border-radius: 6px;
            text-decoration: none;

            .media-sm( {
                    display: none;
                }

            );

            .media-xs( {
                    display: none;
                }

            );
        }

        &-contact {
            display: none;
            margin-left: 0;
            margin-top: 100px;

            img {
                width: 30px;
                height: auto;
            }

            .media-sm( {
                    display : flex;
                    flex-direction : row;
                    align-items : center;
                    justify-content: center;
                    gap : 20px;
                }

            );

            .media-xs( {
                    display : flex;
                    flex-direction : row;
                    align-items : center;
                    justify-content: center;
                    gap : 20px;
                }

            );
        }
    }

    .nav-actions {
        display: none;

        .media-sm( {
                display : block;
                display : flex;
                flex-direction: row;
                align-items : center;
                gap : 25px;
            }

        );

        .media-xs( {
                display : block;
                display : flex;
                flex-direction: row;
                align-items : center;
                gap : 30px;
            }

        );

        .media-xxs( {
                display : block;
                display : flex;
                flex-direction: row;
                align-items : center;
                gap : 20px;
            }

        );

        .icon-profile {
            display: none;

            img {
                width: 30px;
                height: auto;

                .media-xs( {
                        width: 25px;
                    }

                );

                .media-xxs( {
                        width: 20px;
                    }

                );
            }

            .media-sm( {
                    display: block;
                }

            );

            .media-xs( {
                    display: block;
                }

            );
        }

        .burger {
            display: none;

            img {
                width: 35px;
                height: auto;

                .media-xs( {
                        width: 30px;
                    }

                );

                .media-xxs( {
                        width: 25px;
                    }

                );
            }

            .media-sm( {
                    display: block; z-index: 5;
                }

            );

            .media-xs( {
                    display: block; z-index: 5;
                }

            );
        }
    }

    .burger,
    .icon-profile {
        display: none;
    }

    .icon-profile {
        img {
            width: 35px;
            height: auto;
        }

        .media-sm( {
                display: block;
            }

        );

        .media-xs( {
                display: block;
            }

        );
    }

    .burger {
        .cross {
            display: none;
        }

        img {
            width: 40px;
            height: auto;
        }

        .media-sm( {
                display: block;
                cursor : pointer;
            }

        );

        .media-xs( {
                display: block;
                cursor : pointer;
            }

        );
    }
}

.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    // top: calc(100% - 20px);
    left: 0;
    margin-top: 0;
    min-width: 220px;
    background: @white;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.25);
    display: none;
    z-index: 99;

    max-height: calc(3 * 47px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;

    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background: @dgray;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    a {
        position: relative;
        display: block;
        .font-body2;
        color: @dark;
        text-decoration: none;
        padding: 15px;
        font-size: 14px;
        letter-spacing: 0.07em;
        text-transform: uppercase;

        &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 15px;
            width: 85%;
            height: 1px;
            background: @dgray;
        }

        &:nth-last-child(1) {
            &:after {
                display: none;
            }
        }

        &:hover {
            .font-title1;
            color: @white;
            background-color: @dark;
        }

        &.is-active {
            .font-title1;
            color: @white;
            background-color: @dark;
        }
    }

    &.open {
        display: block;
        z-index: 999;
    }

    .media-sm( {
            display: none !important;
        }

    );

    .media-xs( {
            display: none !important;
        }

    );
}

.mobile-submenu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    padding-left: 16px;

    a {
        .font-body2;
        color: @white;
        text-decoration: none;
        font-size: 13px;
        letter-spacing: 0.03em;
    }

    .is-active {
        color: @button;
    }

    &.open {
        display: flex;
    }

    // DESKTOP HIDE
    // .media-md({
    //     display: none !important;
    // });
}

.dv-footer-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .footer {
        &-area {
            width: 100%;

            &-top {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 5;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 25px 15px;
                background-color: @button;
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;

                .media-xs( {
                        border-bottom-left-radius : 16px;
                        border-bottom-right-radius: 16px;
                    }

                );

                &-title {
                    margin-right: 30px;

                    .media-xs( {
                            margin-right: 15px;
                        }

                    );

                    p {
                        .font-title1;
                        color: @white;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: center;

                        .media-xs( {
                                font-size: 12px;
                            }

                        );
                    }
                }

                &-content {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 25px;

                    .media-xs( {
                            gap: 15px;
                        }

                    );

                    &-wrap {
                        width: 30px;

                        .media-xs( {
                                width: 20px;
                            }

                        );
                    }
                }
            }

            &-bottom {
                width: 100%;
                height: 100%;
                padding: 150px 5% 75px 5%;
                background-image: url("../../images/background-texture.jpg?v=3");
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;

                .media-xs( {
                        padding: 100px 5% 50px 5%;
                    }

                );

                &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                    background-color: fade(@dark, 50%);
                }

                &-content {
                    position: relative;
                    z-index: 5;
                    width: 100%;
                    display: flex;
                    align-items: stretch;
                    justify-content: space-between;
                    gap: 25px;

                    .media-sm( {
                            flex-direction: column;
                            gap : 30px;
                        }

                    );

                    .media-xs( {
                            flex-direction: column;
                            gap : 30px;
                        }

                    );

                    &-wrap {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: space-between;
                        width: 50%;

                        &.left {

                            /* width: 60%; */
                            .media-sm( {
                                    width: 100%;
                                }

                            );

                            .media-xs( {
                                    width: 100%;
                                }

                            );
                        }

                        &.right {
                            /* width: 40%; */
                            align-items: flex-end;

                            .media-sm( {
                                    width : 100%;
                                    align-items: flex-start;
                                }

                            );

                            .media-xs( {
                                    width : 100%;
                                    align-items: flex-start;
                                }

                            );
                        }

                        .logo {
                            width: 100%;

                            .media-sm( {
                                    margin-bottom: 20px;
                                }

                            );

                            .media-xs( {
                                    margin-bottom: 20px;
                                }

                            );

                            img {
                                display: block;

                                /* .media-sm( {
                                        display: none;
                                    }

                                );

                                .media-xs( {
                                        display: none;
                                    }

                                ); */
                            }

                            .visible-mobile {
                                display: none;

                                .media-sm( {
                                        display: block;

                                        .font-title1;
                                        color : @white;
                                        font-size : 24px;
                                        letter-spacing: 0.03em;
                                        text-transform: uppercase;
                                    }

                                );

                                .media-xs( {
                                        display: block;

                                        .font-title1;
                                        color : @white;
                                        font-size : 20px;
                                        letter-spacing: 0.03em;
                                        text-transform: uppercase;
                                    }

                                );
                            }
                        }

                        .info {
                            &-loc {
                                margin-bottom: 10px;

                                p {
                                    .font-body3;
                                    color: @white;
                                    font-size: 22px;
                                    letter-spacing: 0.03em;

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );
                                }
                            }

                            &-contact {
                                &-wrap {
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-start;
                                    gap: 15px;
                                    margin-bottom: 10px;

                                    &.custom {
                                        gap: 35px;

                                        .media-sm( {
                                                gap: 25px;
                                            }

                                        );

                                        .media-xs( {
                                                gap: 25px;
                                            }

                                        );
                                    }

                                    .media-sm( {
                                            gap: 10px;
                                        }

                                    );

                                    .media-xs( {
                                            gap: 10px;
                                        }

                                    );

                                    &-name {
                                        p {
                                            .font-body2;
                                            color: @white;
                                            font-size: 18px;
                                            letter-spacing: 0.04em;

                                            .media-xs( {
                                                    font-size: 14px;
                                                }

                                            );
                                        }
                                    }

                                    &-detail {
                                        p {
                                            .font-body1;
                                            color: @white;
                                            font-size: 18px;
                                            letter-spacing: 0.04em;

                                            .media-xs( {
                                                    font-size: 14px;
                                                }

                                            );
                                        }
                                    }
                                }
                            }
                        }

                        .footer-menu {
                            width: 100%;
                            display: flex;
                            justify-content: flex-end;
                            gap: 9%;

                            .media-sm( {
                                    width : 100%;
                                    flex-direction: column;
                                    gap : 40px;
                                }

                            );

                            .media-xs( {
                                    width : 100%;
                                    flex-direction: column;
                                    gap : 40px;
                                }

                            );

                            &-col {
                                position: relative;
                                display: flex;
                                flex-direction: column;

                                .media-sm( {
                                        &:after {
                                            content : "";
                                            position : absolute;
                                            bottom : -20px;
                                            left : 0;
                                            width : 100%;
                                            height : 1px;
                                            background-color: fade(@white, 60%);
                                        }
                                    }

                                );

                                .media-xs( {
                                        &:after {
                                            content : "";
                                            position : absolute;
                                            bottom : -20px;
                                            left : 0;
                                            width : 100%;
                                            height : 1px;
                                            background-color: fade(@white, 60%);
                                        }
                                    }

                                );

                                &.is-sitemap {
                                    .footer-menu-col-list {
                                        margin: 0;

                                        a {
                                            li {
                                                list-style: none;

                                                p {
                                                    .font-body3;
                                                    color: @float;
                                                    font-size: 21px;
                                                    letter-spacing: 0.05em;

                                                    .media-xs( {
                                                            .font-body2;
                                                            font-size : 14px;
                                                            letter-spacing: 0.04em;
                                                        }

                                                    );
                                                }
                                            }
                                        }
                                    }

                                    .footer-menu-col-head {
                                        display: none;

                                        .media-sm( {
                                                display: flex;
                                            }

                                        );

                                        .media-xs( {
                                                display: flex;
                                            }

                                        );
                                    }
                                }

                                &-head {
                                    position: relative;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    /* cursor      : pointer; */

                                    .mobile-only {
                                        display: none;

                                        .media-sm( {
                                                display: block;
                                            }

                                        );

                                        .media-xs( {
                                                display: block;
                                            }

                                        );
                                    }

                                    p {
                                        .font-body3;
                                        font-size: 21px;
                                        letter-spacing: 0.05em;
                                        color: @white;

                                        .media-xs( {
                                                font-size: 16px;
                                            }

                                        );
                                    }

                                    .dropdown-icon {
                                        display: none;
                                        width: 14px;
                                        transition: transform 0.3s ease;

                                        .media-sm( {
                                                display: block;
                                            }

                                        );

                                        .media-xs( {
                                                display: block;
                                            }

                                        );
                                    }
                                }

                                &-list {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 25px;
                                    margin: 15px 0 0 0;
                                    padding: 0;

                                    .media-sm( {
                                            padding-left: 15px;
                                        }

                                    );

                                    .media-xs( {
                                            padding-left: 15px;
                                        }

                                    );

                                    a {
                                        li {
                                            list-style: none;

                                            p {
                                                .font-body2;
                                                color: @float;
                                                font-size: 16px;
                                                letter-spacing: 0.05em;

                                                .media-xs( {
                                                        .font-body2;
                                                        font-size : 14px;
                                                        letter-spacing: 0.04em;
                                                    }

                                                );

                                                &:hover {
                                                    opacity: 0.7;
                                                }
                                            }
                                        }
                                    }

                                    /* li {
                                        list-style: none;

                                        a {
                                            .font-body2;
                                            font-size: 16px;
                                            color: @white;
                                            letter-spacing: 0.04em;
                                            text-decoration: none;
                                            .media-xs({
                                                font-size: 14px;
                                            });

                                            &:hover {
                                                opacity: 0.6;
                                            }
                                        }
                                    } */

                                    .media-sm( {
                                            max-height: 0;
                                            overflow : hidden;
                                            margin-top: 0;
                                            transition: max-height 0.35s ease;
                                        }

                                    );

                                    .media-xs( {
                                            max-height: 0;
                                            overflow : hidden;
                                            margin-top: 0;
                                            transition: max-height 0.35s ease;
                                        }

                                    );
                                }

                                &.active {
                                    .footer-menu-col-list {
                                        .media-sm( {
                                                max-height: 300px;
                                                margin-top: 15px;
                                            }

                                        );

                                        .media-xs( {
                                                max-height: 300px;
                                                margin-top: 15px;
                                            }

                                        );
                                    }

                                    .dropdown-icon {
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                        }
                    }
                }

                &-medsos {
                    position: relative;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    z-index: 5;
                    margin-top: 30px;

                    .media-sm( {
                            justify-content: flex-start;
                            margin-top : 45px;
                        }

                    );

                    .media-xs( {
                            justify-content: flex-start;
                            margin-top : 45px;
                        }

                    );

                    &-content {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 25px;

                        .media-sm( {
                                gap: 15px;
                            }

                        );

                        .media-xs( {
                                gap: 15px;
                            }

                        );

                        &-wrap {
                            width: 30px;

                            .media-xs( {
                                    width: 20px;
                                }

                            );
                        }
                    }
                }

                &-copyright {
                    position: relative;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    z-index: 5;
                    margin-top: 30px;

                    .media-sm( {
                            align-items : flex-start;
                            flex-direction: column;
                            gap : 5px;
                        }

                    );

                    .media-xs( {
                            align-items : flex-start;
                            flex-direction: column;
                            gap : 5px;
                        }

                    );

                    &-wrap {
                        &.left {
                            width: 60%;
                        }

                        &.right {
                            width: 40%;
                        }

                        p {
                            .font-body2;
                            color: @white;
                            font-size: 16px;
                            line-height: 1;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 12px;
                                }

                            );
                        }
                    }
                }
            }
        }
    }
}

/* MAIN PAGE */
.dv-opening-L1-V0 {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 2;

    /* .media-xs({
        height: 65vh;
    });
    .media-xxs({
        height: 50vh;
    }); */
    .opening {
        position: relative;
        z-index: 3;
        width: 100%;
        height: 100%;

        &-nav {
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            /* supaya hanya tombol yg bisa diklik */

            .nav-prev,
            .nav-next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: all;
                background: transparent;
                border: none;
                cursor: pointer;

                img {
                    width: 40px;
                    height: 40px;

                    .media-xs( {
                            width : 25px;
                            height: 25px;
                        }

                    );
                }
            }

            .nav-prev {
                left: 20px;

                .media-xs( {
                        left: 5px;
                    }

                );
            }

            .nav-next {
                right: 20px;

                .media-xs( {
                        right: 5px;
                    }

                );
            }
        }

        &-slider {
            position: relative;
            width: 100%;
            height: 100%;
            cursor: default;

            .is-prev-zone,
            .is-next-zone {
                cursor: pointer;
            }

            .slick-dots li {
                margin: 6px 0;
            }

            .slick-dots button:before {
                font-size: 10px;
                color: @dark;
                opacity: 0.4;
            }

            .slick-dots .slick-active button:before {
                opacity: 1;
            }

            .slick-list {
                height: 100% !important;
            }

            .slick-track {
                display: flex;
                align-items: center;
                height: 100%;
            }

            .slick-dots {
                bottom: 0;
            }

            .slick-slide {
                height: 100%;
                float: left !important;
                width: 100%;
            }

            &-slide {
                position: relative;
                width: 100%;
                height: 100%;
                background-image: var(--bg-landscape);
                background-size: cover;
                background-position: center;
                display: flex;
                justify-content: center;
                align-items: center;
                // padding: 0 80px;
                padding: 90px 80px 25px 80px;

                .media-xs( {
                        background-image: var(--bg-portrait);
                    }

                );

                /* &:before {
                    content: "";
                    position: absolute;
                    z-index: 2;
                    top: 0;
                    right: 0;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(
                        to left,
                        white -20%,
                        rgba(255, 255, 255, 0) 100%
                    );
                    .media-xxs({
                        background: linear-gradient(
                            to left,
                            white -35%,
                            rgba(255, 255, 255, 0) 100%
                        );
                    });
                } */
                .media-xs( {
                        padding: 85px 80px 25px 80px;
                    }

                );

                .media-xxs( {
                        padding: 70px 25px 25px 25px;
                    }

                );

                /* .content {
                    position: relative;
                    z-index: 5;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 10px;
                    &.align-left {
                        align-items: flex-start;
                        text-align: left;
                    }

                    &.align-center {
                        align-items: center;
                        text-align: center;
                    }

                    &.align-right {
                        align-items: flex-end;
                        text-align: right;
                    }

                    &-title {
                        width: 50%;
                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 48px;
                            letter-spacing: 0.04em;
                            text-transform: uppercase;
                            .media-xs({
                                font-size: 20px;
                            });
                        }
                    }
                    &-subtitle {
                        width: 70%;
                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 20px;
                            letter-spacing: 0.02em;
                            text-transform: none;
                            .media-xs({
                                font-size: 12px;
                            });
                        }
                    }
                } */
            }
        }

        &-content {
            position: absolute;
            inset: 0;
            z-index: 5;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
            cursor: pointer;

            &.show {
                opacity: 1;
            }

            .content {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0 5%;

                .media-xs( {
                        padding: 0 5%;
                    }

                );

                &.align-left {
                    align-items: flex-start;
                    text-align: left;

                    .media-xs( {
                            text-align: center;
                        }

                    );
                }

                &.align-center {
                    align-items: center;
                    text-align: center;
                }

                &.align-right {
                    align-items: flex-end;
                    text-align: right;

                    .media-xs( {
                            text-align: center;
                        }

                    );
                }

                &-title {
                    width: 100%;

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 48px;
                        letter-spacing: 0.04em;
                        text-transform: uppercase;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );
                    }
                }

                &-subtitle {
                    width: 100%;

                    p {
                        .font-body1;
                        color: @dark;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-transform: none;

                        .media-xs( {
                                font-size: 12px;
                            }

                        );
                    }
                }
            }
        }
    }
}

.dv-layanan-L1-V0 {
    .layanan {
        display: block;
        position: relative;
        z-index: 2;

        .imgWrapper {
            max-height: initial !important;
            box-shadow: none !important;
        }

        &-title {
            margin-bottom: 30px;

            .media-xs( {
                    margin-bottom: 15px;
                }

            );

            p {
                .font-title2;
                color: @dark;
                font-size: 32px;
                letter-spacing: 0.04em;
                text-align: center;

                .media-xs( {
                        font-size: 24px;
                    }

                );

                .media-xxs( {
                        font-size: 20px;
                    }

                );
            }
        }

        &-area {
            position: relative;
            width: 100%;
            height: 100%;

            &-wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 30px;

                .media-xs( {
                        flex-direction: column;
                    }

                );

                a {
                    width: 50%;

                    .media-xs( {
                            width: 100%;
                        }

                    );

                    .card {
                        width: 100%;
                        height: 40vh;
                        padding: 45px 55px;
                        position: relative;
                        display: flex;
                        align-items: flex-end;
                        justify-content: flex-start;
                        cursor: pointer;
                        overflow: hidden;
                        border-radius: 12px;

                        .media-sm( {
                                height : 25vh;
                                padding: 35px 45px;
                            }

                        );

                        .media-xs( {
                                width : 100%;
                                height : 30vh;
                                border-radius : 7px;
                                align-items : center;
                                justify-content: center;
                                padding : 20px;
                            }

                        );

                        .media-xxs( {
                                height: 25vh;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            z-index: 1;

                            background-image: inherit;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50% 50%;

                            transform: scale(1);
                            transition: transform 0.6s ease;
                        }

                        &:hover::before {
                            transform: scale(1.1);
                        }

                        &:after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            // background: linear-gradient(
                            //     60deg,
                            //     #8c6126 0%,
                            //     rgba(140, 97, 38, 0) 45%,
                            //     rgba(140, 97, 38, 0) 100%
                            // );
                            background: linear-gradient(45deg,
                                    rgba(140, 97, 38, 0.85) 0%,
                                    rgba(140, 97, 38, 0.6) 15%,
                                    rgba(140, 97, 38, 0) 50%);
                            mix-blend-mode: multiply;
                            z-index: 1;
                            pointer-events: none;
                        }

                        .layanan-caption {
                            position: relative;
                            z-index: 2;

                            p {
                                .font-title1;
                                color: @white;
                                font-size: 40px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-sm( {
                                        font-size: 32px;
                                    }

                                );

                                .media-xs( {
                                        font-size: 28px;
                                    }

                                );

                                .media-xxs( {
                                        font-size: 18px;
                                    }

                                );
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-countdown-L1-V0 {
    position: relative;
    width: 100%;
    background-color: @brown;
    z-index: 2;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        background-image: url("../../images/texture-01.png?v=3");
        background-position: center center;
        background-size: cover;
        mix-blend-mode: color-burn;
    }

    .countdown {
        &-area {
            width: 100%;
            z-index: 4;
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            // gap: 40px;

            .media-xs( {
                    flex-direction: column;
                    gap : 30px;
                }

            );

            &-info {
                position: relative;
                width: 50%;
                margin-top: -10%;

                .media-xs( {
                        width : 100%;
                        margin-bottom: 0;
                        margin-top : 0;
                    }

                );

                &-title {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    p {
                        .font-title2;
                        color: @white;
                        font-size: 50px;
                        letter-spacing: 0.04em;
                        text-align: center;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 32px;
                            }

                        );

                        .media-xxs( {
                                font-size: 28px;
                            }

                        );
                    }
                }

                &-subtitle {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    p {
                        .font-body1;
                        color: @white;
                        font-size: 28px;
                        letter-spacing: 0.04em;
                        text-align: center;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );

                        .media-xxs( {
                                font-size: 14px;
                            }

                        );
                    }
                }
            }

            &-image {
                position: relative;
                width: 50%;

                // order: 3;
                .media-d( {
                        margin-top: 10%;
                    }

                );

                .media-sm( {
                        margin-top: 10%;
                    }

                );

                .media-xs( {
                        width : 100%;
                        text-align: center;
                    }

                );

                img {
                    height: 100%;
                    object-fit: cover;

                    .media-xs( {
                            width : 500px;
                            height: auto;
                        }

                    );
                }
            }

            &-cd {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 50%;
                margin-top: -20%;

                .media-d( {
                        margin-top: -15%;
                    }

                );

                .media-xs( {
                        width : 100%;
                        margin-top: 0;
                    }

                );

                &-time {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 30px;
                    margin-bottom: 30px;
                    gap: 90px;

                    .media-sm( {
                            gap: 45px;
                        }

                    );

                    .media-xs( {
                            gap : 60px;
                            margin-top: 0;
                            margin-bottom: 15px;
                        }

                    );

                    .media-xxs( {
                            gap: 35px;
                        }

                    );

                    &-item {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        &:not(:last-child):after {
                            content: ":";
                            position: absolute;
                            right: calc(-1 * (90px / 2));
                            top: 35%;
                            transform: translate(50%, -50%);
                            font-size: 20px;
                            color: @white;
                            .font-title1;

                            .media-sm( {
                                    right: calc(-1 * (45px / 2));
                                }

                            );

                            .media-xs( {
                                    right: calc(-1 * (60px / 2));
                                }

                            );

                            .media-xxs( {
                                    right: calc(-1 * (35px / 2));
                                }

                            );
                        }

                        &:nth-last-child(1) {
                            margin-right: 0;
                        }

                        &-number {
                            .font-title1;
                            font-size: 50px;
                            color: @white;
                            margin-right: 2px;

                            .media-xs( {
                                    font-size: 32px;
                                }

                            );

                            .media-xxs( {
                                    font-size: 28px;
                                }

                            );
                        }

                        &-label {
                            p {
                                .font-body2;
                                font-size: 20px;
                                color: @white;

                                .media-xs( {
                                        font-size: 18px;
                                    }

                                );

                                .media-xxs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }
                    }
                }

                &-claim {
                    padding: 20px 10px;
                    background-color: @button;
                    cursor: pointer;
                    width: 300px;
                    border-radius: 7px;

                    .media-xs( {
                            width : 200px;
                            border-radius: 4px;
                            padding : 15px 10px;
                        }

                    );

                    p {
                        .font-title1;
                        color: @white;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: center;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 15px;
                            }

                        );
                    }
                }
            }
        }
    }
}

.dv-calculator-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;

    .media-sm( {
            height:100%;
        }

    );

    .media-xs( {
            height: 100%;
        }

    );

    .media-xxs( {}

    );

    &.custom {
        .calculator-area .panel.left {
            .media-xs( {
                    padding: 50px 5% !important;
                }

            );
        }
    }

    .calculator {
        position: relative;
        width: 100%;
        height: 100%;

        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: stretch;

            display: flex;

            .media-sm( {
                    flex-direction: column;
                }

            );

            .media-xs( {
                    flex-direction: column;
                }

            );

            .panel {
                position: relative;
                padding: 75px 5%;

                .media-xs( {
                        padding: 50px 5%;
                    }

                );

                &.left {
                    width: 50%;
                    display: block;

                    .media-sm( {
                            /* padding: 30px 0 !important; */
                        }

                    );

                    .media-xs( {
                            /* padding: 30px 0 !important; */
                        }

                    );

                    &.closeLeft {
                        display: none !important;
                    }

                    .media-sm( {
                            width: 100%;
                        }

                    );

                    .media-xs( {
                            width: 100%;
                        }

                    );
                }

                &.main {
                    position: relative;
                    // top: 0;
                    // right: 0;
                    width: 50%;
                    padding: 75px 5%;
                    // transition: transform 0.4s ease;
                    transition: transform 0.5s ease-in-out;
                    z-index: 5;
                    box-sizing: border-box;
                    background-image: url("../../images/background-texture.jpg?v=3");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;

                    &.locked {

                        .gold-to-idr-form,
                        .idr-to-gold-form,
                        .counting-choices {
                            pointer-events: none;
                            opacity: 0.6;
                            filter: grayscale(30%);
                        }

                        .custom-select-trigger {
                            cursor: not-allowed;
                        }
                    }

                    .media-sm( {
                            // top : 50%;
                            width : 100%;
                        }

                    );

                    .media-xs( {
                            // top : 55%;
                            width : 100%;
                        }

                    );

                    &:before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                        background-color: fade(@dark, 50%);
                        pointer-events: none;
                    }

                    &.open {
                        // transform: translateX(0%);

                        // .media-sm( {
                        //         transform: translateX(0);
                        //         transform: translateY(-100%);
                        //     }

                        // );

                        // .media-xs( {
                        //         transform: translateX(0);
                        //         transform: translateY(-93%);
                        //     }

                        // );

                        // .media-xxs( {
                        //         transform: translateY(-97%);
                        //     }

                        // );

                        &::after {
                            left: 100%;
                            border-right: none;
                            border-left: 14px solid #0c5d5a;

                            .media-sm( {
                                    top : 100%;
                                    left : 50%;
                                    transform: translateX(-50%);

                                    border-left : none;
                                    border-right : none;
                                    border-bottom: none;

                                    border-left : 14px solid transparent;
                                    border-right: 14px solid transparent;
                                    border-top : 14px solid #0c4c4b;

                                }

                            );

                            .media-xs( {
                                    top : 100%;
                                    left : 50%;
                                    transform: translateX(-50%);

                                    border-left : none;
                                    border-right : none;
                                    border-bottom: none;

                                    border-left : 14px solid transparent;
                                    border-right: 14px solid transparent;
                                    border-top : 14px solid #0c4c4b;

                                }

                            );
                        }
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: -13px;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                        border-top: 14px solid transparent;
                        border-bottom: 14px solid transparent;
                        border-right: 14px solid @ddark;

                        .media-sm( {
                                top : -13px;
                                left : 50%;
                                transform: translateX(-50%);

                                border-right: none;
                                border-left : none;
                                border-top : none;

                                border-left : 14px solid transparent;
                                border-right : 14px solid transparent;
                                border-bottom: 14px solid #0c4f4c;
                            }

                        );

                        .media-xs( {
                                top : -13px;
                                left : 50%;
                                transform: translateX(-50%);

                                border-right: none;
                                border-left : none;
                                border-top : none;

                                border-left : 14px solid transparent;
                                border-right : 14px solid transparent;
                                border-bottom: 14px solid #0c4f4c;
                            }

                        );
                    }
                }

                &.back {
                    position: relative;
                    top: 0;
                    right: 0;
                    width: 50%;
                    z-index: 1;
                    display: none;

                    &.openBack {
                        display: block !important;
                    }

                    .media-sm( {
                            position: relative;
                            width : 100%;
                        }

                    );

                    .media-xs( {
                            position: relative;
                            width : 100%;
                        }

                    );
                }

                &-title {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    &.white {
                        p {
                            .font-body1;
                            color: @white;
                            font-size: 28px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size : 20px;
                                    letter-spacing: 0.04em;
                                }

                            );
                        }
                    }

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 28px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size : 20px;
                                letter-spacing: 0.04em;
                            }

                        );
                    }
                }

                &-subtitle {
                    padding-top: 10px;

                    p {
                        .font-body2;
                        color: @dark;
                        font-size: 13px;
                        letter-spacing: 0.02em;
                        text-align: justify;

                        .media-xs( {
                                font-size: 11px;
                            }

                        );
                    }
                }

                .graphic {
                    &-choices {
                        width: 100%;
                        display: flex;
                        flex-flow: row wrap;
                        align-items: center;
                        justify-content: flex-start;
                        gap: 20px;
                        margin-bottom: 30px;

                        .media-xs( {
                                gap : 15px;
                                margin-bottom: 15px;
                            }

                        );

                        &-button {
                            padding: 15px 30px;
                            border: 1px solid @button;
                            border-radius: 7px;
                            cursor: pointer;

                            .media-xs( {
                                    padding : 10px 15px;
                                    border-radius: 4px;
                                }

                            );

                            p {
                                .font-body2;
                                color: @button;
                                font-size: 18px;
                                letter-spacing: 0.02em;
                                text-align: center;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }

                            &:hover,
                            &.active {
                                background-color: @button;

                                p {
                                    color: @white;
                                }
                            }
                        }
                    }

                    &-nominal {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        .media-xs( {
                                flex-direction: column;
                                align-items : flex-start;
                            }

                        );

                        &-wrap {
                            width: 50%;

                            .media-xs( {
                                    width : 100%;
                                    margin-bottom: 15px;

                                    &:nth-last-child(1) {
                                        margin-bottom: 0;
                                    }
                                }

                            );

                            &-title {
                                margin-bottom: 5px;

                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 18px;
                                    letter-spacing: 0.02em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 15px;
                                        }

                                    );
                                }
                            }

                            &-amount {
                                margin-bottom: 5px;

                                p {
                                    .font-title2;
                                    color: @dark;
                                    /* font-size  : 32px; */
                                    font-size: 2vw;
                                    letter-spacing: 0.02em;

                                    .media-sm( {
                                            font-size: 32px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 27px;
                                        }

                                    );
                                }

                                sub {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 18px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 15px;
                                        }

                                    );
                                }
                            }

                            &-info {
                                p {
                                    .font-body2;
                                    color: @dark;
                                    font-size: 16px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 13px;
                                        }

                                    );
                                }

                                .arrow {
                                    width: 14px;
                                    height: 14px;
                                    display: inline-block;
                                    background-size: contain;
                                    background-repeat: no-repeat;

                                    .media-xs( {
                                            width : 11px;
                                            height: 11px;
                                        }

                                    );
                                }

                                .label {
                                    color: @dark;
                                }

                                &.is-up {
                                    p {
                                        color: @green;
                                    }

                                    .arrow {
                                        background-image: url("../../images/arrow-up.svg");
                                    }
                                }

                                &.is-down {
                                    p {
                                        color: @red;
                                    }

                                    .arrow {
                                        background-image: url("../../images/arrow-down.svg");
                                    }
                                }
                            }
                        }
                    }

                    .graphic-chart {
                        position: relative;
                        z-index: 3 !important;
                        margin-top: 40px;
                        width: 100%;
                        height: 300px;
                        overflow: visible !important;

                        .media-xs( {
                                margin-top: 0;
                                height : 240px;
                            }

                        );

                        canvas {
                            position: relative;
                            z-index: 4 !important;
                            width: 100% !important;
                            height: 100% !important;
                        }
                    }
                }

                .counting {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;

                    &-choices {
                        width: 100%;
                        display: flex;
                        background-color: @ddark;
                        border-radius: 7px;
                        overflow: hidden;
                        margin-bottom: 35px;

                        .media-xs( {
                                border-radius: 5px;
                            }

                        );

                        &-wrap {
                            width: 50%;
                            padding: 15px 0;
                            transition: background-color 0.25s ease;
                            cursor: pointer;
                            background-color: transparent;

                            .media-xs( {
                                    padding: 20px 0 25px 0;
                                }

                            );

                            p {
                                .font-body2;
                                color: @white;
                                font-size: 18px;
                                letter-spacing: 0.02em;
                                text-align: center;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }

                            &:hover,
                            &.active {
                                background-color: @button;
                                border-radius: 7px;

                                .media-xs( {
                                        border-radius: 5px;
                                    }

                                );

                                p {
                                    color: @white;
                                    .font-title1;
                                }
                            }
                        }
                    }

                    &-form {
                        width: 100%;
                        margin-bottom: 35px;
                        overflow: hidden;

                        &.mode-idr-to-gold {
                            .form-slider {
                                transform: translateX(-100%);
                            }
                        }

                        .form-slider {
                            display: flex;
                            width: 100%;
                            transition: transform 0.4s ease;

                            &-slide {
                                width: 100%;
                                flex-shrink: 0;
                            }

                            form {
                                .form-wrap {
                                    position: relative;
                                    width: 100%;
                                    margin-bottom: 20px;

                                    &-content {
                                        position: relative;
                                        width: 100%;
                                        margin-bottom: 15px;

                                        &.row {
                                            display: flex;
                                            gap: 15px;
                                        }

                                        &.btm {
                                            margin-bottom: 0;
                                        }

                                        .custom-select {
                                            position: relative;
                                            width: 100%;

                                            &.open {
                                                .custom-select-trigger.dropdown::after {
                                                    transform: translateY(-50%) rotate(180deg);
                                                }

                                                .custom-options {
                                                    display: block;
                                                }
                                            }

                                            &--disabled {
                                                pointer-events: none;
                                                opacity: 0.45;

                                                .custom-select-trigger {
                                                    cursor: not-allowed;
                                                }
                                            }

                                            &-trigger {
                                                .font-body2;
                                                color: @white;
                                                text-transform: capitalize;
                                                border: 1px solid @white;
                                                border-radius: 7px;
                                                font-size: 16px;
                                                padding: 20px;
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                background: transparent;
                                                cursor: pointer;

                                                .media-xs( {
                                                        font-size : 12px;
                                                        border-radius: 5px;
                                                    }

                                                );

                                                &.dropdown {
                                                    &::after {
                                                        content: "";
                                                        position: absolute;
                                                        right: 20px;
                                                        top: 50%;
                                                        transform: translateY(-50%);
                                                        width: 20px;
                                                        height: 20px;

                                                        background: url("../../images/dropdown-02.svg?v=3");
                                                        background-repeat: no-repeat;
                                                        background-position: center;
                                                        background-size: contain;

                                                        pointer-events: none; // biar klik tetap ke trigger
                                                        transition: transform 0.25s ease;

                                                        .media-xs( {
                                                                width : 15px;
                                                                height: 15px;
                                                            }

                                                        );
                                                    }
                                                }

                                                img {
                                                    width: 20px;
                                                    height: auto;

                                                    .media-xs( {
                                                            width: 16px;
                                                        }

                                                    );
                                                }

                                                span {
                                                    &.suffix {
                                                        .font-title3;
                                                        font-size: 16px;
                                                        color: @white;
                                                        text-transform: lowercase;

                                                        .media-xs( {
                                                                font-size: 12px;
                                                            }

                                                        );
                                                    }
                                                }
                                            }

                                            .custom-options {
                                                position: absolute;
                                                width: 100%;
                                                top: 100%;
                                                background: rgba(23,
                                                        67,
                                                        68,
                                                        0.75);
                                                backdrop-filter: blur(12px);
                                                -webkit-backdrop-filter: blur(12px);
                                                border: 1px solid rgba(23, 67, 68, 0.2);
                                                border-radius: 10px;
                                                display: none;
                                                z-index: 10;

                                                .custom-option {
                                                    padding: 12px;
                                                    .font-body2;
                                                    color: @white;
                                                    font-size: 16px;
                                                    cursor: pointer;

                                                    .media-xs( {
                                                            font-size: 12px;
                                                        }

                                                    );

                                                    &:hover {
                                                        background: @brown;
                                                        border-radius: 10px;
                                                    }
                                                }
                                            }
                                        }

                                        &-input {
                                            position: relative;
                                            width: 100%;

                                            &-desc {
                                                position: absolute;
                                                z-index: 2;
                                                right: 15px;
                                                top: 50%;
                                                transform: translateY(-50%);

                                                p {
                                                    .font-body3;
                                                    font-size: 16px;
                                                    color: @white;
                                                    text-transform: lowercase;

                                                    .media-xs( {
                                                            font-size: 12px;
                                                        }

                                                    );
                                                }
                                            }

                                            input {
                                                width: 100%;
                                                border: 1px solid @white;
                                                border-radius: 10px;
                                                padding: 20px 60px 20px 20px;
                                                background-color: transparent !important;

                                                color: @white;
                                                .font-body2;
                                                font-size: 16px;
                                                letter-spacing: 0.02em;

                                                .media-xs( {
                                                        font-size: 12px;
                                                    }

                                                );

                                                &:focus {
                                                    outline: none;
                                                    border-color: @white;
                                                }

                                                &::placeholder {
                                                    color: @white;
                                                    .font-body2;
                                                    font-size: 16px;
                                                    letter-spacing: 0.02em;
                                                    transition: opacity 0.25s ease;
                                                    opacity: 1;

                                                    .media-xs( {
                                                            font-size: 12px;
                                                        }

                                                    );
                                                }

                                                &:focus::placeholder {
                                                    opacity: 0;
                                                }
                                            }
                                        }

                                        input {
                                            width: 100%;
                                            border: 1px solid @white;
                                            border-radius: 10px;
                                            padding: 20px 60px 20px 20px;
                                            background-color: transparent !important;

                                            color: @white;
                                            .font-body2;
                                            font-size: 16px;
                                            letter-spacing: 0.02em;

                                            .media-xs( {
                                                    font-size: 12px;
                                                }

                                            );

                                            &:focus {
                                                outline: none;
                                                border-color: @white;
                                            }

                                            &::placeholder {
                                                color: @white;
                                                .font-body2;
                                                font-size: 16px;
                                                letter-spacing: 0.02em;
                                                transition: opacity 0.25s ease;
                                                opacity: 1;

                                                .media-xs( {
                                                        font-size: 12px;
                                                    }

                                                );
                                            }

                                            &:focus::placeholder {
                                                opacity: 0;
                                            }
                                        }
                                    }

                                    &-desc {
                                        margin-top: 5px;

                                        p {
                                            .font-body2;
                                            color: @white;
                                            font-size: 13px;
                                            letter-spacing: 0.02em;
                                            text-align: justify;
                                            font-style: italic;

                                            .media-xs( {
                                                    font-size: 11px;
                                                }

                                            );
                                        }
                                    }
                                }
                            }

                            .output {
                                width: 100%;

                                &-title {
                                    margin-bottom: 10px;

                                    p {
                                        .font-body2;
                                        color: @white;
                                        font-size: 16px;
                                        letter-spacing: 0.02em;
                                        text-transform: capitalize;

                                        .media-xs( {
                                                font-size: 12px;
                                            }

                                        );
                                    }
                                }

                                &-content {
                                    width: 100%;
                                    padding: 20px 50px 20px 20px;
                                    background-color: @ddark;
                                    border-radius: 7px;

                                    .media-xs( {
                                            border-radius: 5px;
                                        }

                                    );

                                    p {
                                        .font-title1;
                                        color: @ldark;
                                        font-size: 20px;
                                        letter-spacing: 0.02em;

                                        .media-xs( {
                                                font-size: 18px;
                                            }

                                        );
                                    }
                                }
                            }
                        }
                    }

                    &-bottom {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 15px;

                        .media-xxs ( {
                                flex-direction: column;
                                align-items : flex-end;
                            }

                        );

                        .info {
                            /* width: 40%; */
                            display: flex;
                            align-items: center;

                            .media-xs( {
                                    // width: 100%;
                                }

                            );

                            p {
                                .font-body2;
                                color: @white;
                                font-size: 13px;
                                letter-spacing: 0.02em;
                                text-align: justify;

                                .media-xs( {
                                        font-size: 11px;
                                    }

                                );
                            }
                        }

                        .button {
                            // padding: 20px 10px;
                            // background-color: @button;
                            // cursor: pointer;
                            // border-radius: 7px;
                            min-width: 210px;

                            .media-xs( {
                                    border-radius: 5px;
                                }

                            );

                            p {
                                padding: 20px 10px;
                                background-color: @button;
                                cursor: pointer;
                                border-radius: 7px;
                                .font-title1;
                                color: @white;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-align: center;

                                .media-xs( {
                                        font-size: 15px;
                                    }

                                );
                            }
                        }
                    }
                }

                .result {
                    width: 100%;

                    &-info {
                        margin-bottom: 20px;

                        &-title {
                            p {
                                .font-body1;
                                color: @dark;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 15px;
                                    }

                                );
                            }
                        }

                        &-amount {
                            p {
                                .font-title2;
                                color: @dark;
                                font-size: 45px;
                                letter-spacing: 0.02em;

                                .media-xs( {
                                        font-size: 32px;
                                    }

                                );
                            }
                        }
                    }

                    &-details {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        border-top: 1px solid @dark;
                        border-bottom: 1px solid @dark;
                        margin-bottom: 50px;

                        &-wrap {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            border-bottom: 1px solid @dark;
                            padding: 15px 0;

                            &:nth-last-child(1) {
                                border-bottom: none;
                            }

                            &-desc {
                                width: 65%;

                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 15px;
                                        }

                                    );
                                }
                            }

                            &-amount {
                                width: 35%;
                                text-align: left;

                                p {
                                    .font-title3;
                                    color: @dark;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 15px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }

                .ratecalculation {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 15px;

                    &-wrap {
                        width: 50%;

                        &-title {
                            margin-bottom: 10px;

                            p {
                                .font-body1;
                                color: @dark;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }

                        &-desc {
                            padding: 35px 25px;
                            background-color: @gray;
                            border-radius: 7px;

                            .media-xs( {
                                    padding : 25px;
                                    border-radius: 5px;
                                }

                            );

                            p {
                                .font-title2;
                                color: @dark;
                                font-size: 32px;
                                letter-spacing: 0.02em;
                                text-align: center;

                                .media-xs( {
                                        font-size: 20px;
                                    }

                                );
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-imagebg-L1-V0 {
    .imagebg {
        &-area {
            position: relative;

            &-blur {
                /*padding: 50px 5%;*/
                position: relative;
                z-index: 2;

                >img {
                    position: absolute;
                    z-index: 3;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                    /*filter: blur(3px);
					clip: rect(50px, 95vw, calc(50vh ~'+' 50px), 5vw);*/
                    .media-sm( {}

                    );

                    .media-xs( {}

                    );

                    .media-xxs( {

                            /*clip: rect(50px, 95vw, calc(70vh ~'+' 50px), 5vw);*/
                        }

                    );
                }

                &-clip {
                    /*background-color: rgba(251,247,245,0.9);*/
                    padding: 20px;
                    width: 100%;
                    height: 50vh;
                    position: relative;
                    z-index: 4;
                    overflow: hidden;

                    // &:before {
                    //     content: "";
                    //     position: absolute;
                    //     top: 0;
                    //     left: 0;
                    //     width: 100%;
                    //     height: 100%;
                    //     background: rgba(0, 0, 0, 0.2);
                    //     .media-xs({
                    // 		background: rgba(0,0,0,0.2);
                    // 	});
                    // }
                    .media-sm( {}

                    );

                    .media-xs( {}

                    );

                    .media-xxs( {
                            height : 90vw;
                        }

                    );

                    &-content {
                        position: relative;
                        z-index: 3;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

            &-nonblur {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 1;

                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                background-attachment: fixed;

                @supports (-webkit-touch-callout: none) {
                    /* CSS specific to iOS devices */
                    background-attachment: initial !important;
                }

                .media-xs( {
                        background-attachment: initial;
                    }

                );
            }
        }
    }
}

.dv-card-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: @brown;
    z-index: 2;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        background-image: url("../../images/texture-02.png?v=3");
        background-position: center center;
        background-size: cover;
        mix-blend-mode: color-burn;
    }

    .card {
        position: relative;
        z-index: 4;

        &-title {
            margin-bottom: 30px;

            .media-xs( {
                    margin-bottom: 15px;
                }

            );

            p {
                .font-title2;
                color: @white;
                font-size: 32px;
                letter-spacing: 0.04em;
                text-transform: capitalize;

                .media-xs( {
                        font-size: 20px;
                    }

                );
            }
        }

        &-area {
            position: relative;
            display: flex;
            // justify-content: center;
            align-items: center;
            width: 100%;

            overflow: hidden;

            /* transition: transform 0.6s ease; */

            .card-nav {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 20;
                background: transparent;
                border: none;
                cursor: pointer;
                padding: 10px;

                img {
                    width: 32px;
                    height: 32px;
                    filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.4));
                }

                &.card-prev {
                    /* left: -50px; */
                    left: 0px;

                    &.disabled {
                        opacity: 0.3;
                        pointer-events: none;
                    }

                    .media-sm( {
                            display: none;
                        }

                    );

                    .media-xs( {
                            display: none;
                        }

                    );
                }

                &.card-next {
                    /* right: -50px; */
                    right: 0px;

                    &.disabled {
                        opacity: 0.3;
                        pointer-events: none;
                    }

                    .media-sm( {
                            display: none;
                        }

                    );

                    .media-xs( {
                            display: none;
                        }

                    );
                }
            }

            .media-sm( {
                    display : flex;
                    gap : 16px;
                    overflow-x : auto;
                    scroll-snap-type: x mandatory;
                    scroll-behavior : smooth;
                    padding-left : 7.5%;
                    padding-right : 7.5%;
                    scrollbar-width : thin;
                    scrollbar-color : @dark @white;

                    &:-webkit-scrollbar {
                        height: 4px;
                    }

                    &::-webkit-scrollbar-track {
                        background : @white;
                        border-radius: 10px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background : @dark;
                        border-radius: 10px;
                    }
                }

            );

            .media-xs( {
                    display : flex;
                    gap : 0px;
                    overflow-x : auto;
                    scroll-snap-type: x mandatory;
                    scroll-behavior : smooth;
                    padding-left : 7.5%;
                    padding-right : 7.5%;
                }

            );

            .card-track {
                position: relative;
                display: flex;
                transition: transform 0.6s ease;

                &.is-static {
                    transform: none !important;

                    .product-card {
                        margin-left: 10px;
                        margin-right: 10px;
                        transition: flex 0.4s ease;
                    }

                    &.total-3 {
                        .product-card {
                            flex: 0 0 25%;
                        }

                        .product-card.is-open {
                            flex: 0 0 45%;
                        }
                    }

                    &.total-2 {
                        .product-card {
                            flex: 0 0 40%;
                        }

                        .product-card.is-open {
                            flex: 0 0 55%;
                        }
                    }

                    &.total-1 {
                        .product-card {
                            flex: 0 0 100%;
                        }
                    }
                }

                .product-card {
                    position: relative;
                    overflow: hidden;
                    /* width          : 30%; */
                    /* height         : 65vh; */
                    /* height         : 73vh; */
                    /* transition     : width 0.5s ease; */
                    /* margin         : 20px; */
                    margin-right: 10px;
                    margin-left: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 20px;

                    flex: 0 0 25%;
                    /* transition: flex 0.4s ease; */

                    &:nth-last-child(1) {
                        margin-right: 0;
                    }

                    .media-sm( {
                            width : 80%;
                            /* height           : 65vh; */
                            /* flex             : 0 0 85%; */
                            flex : none !important;
                            /* width            : auto; */
                            scroll-snap-align : center;
                            scroll-snap-stop : always;
                            // transform: scale(0.92);
                            transition : transform 0.3s ease;
                            // transition: width 0.4s ease;
                        }

                    );

                    .media-xs( {
                            // margin: 10px;
                            width : 55%;
                            margin-right : 10px;
                            /* height           : 70vh; */
                            /* flex             : 0 0 85%; */
                            flex : none !important;
                            /* width            : auto; */
                            scroll-snap-align : center;
                            scroll-snap-stop : always;
                            // transform: scale(0.92);
                            transition : transform 0.3s ease;
                            // transition: width 0.4s ease;
                        }

                    );
                    // @media (hover: hover) {
                    //     &:hover {
                    //         width: 45%;

                    //         .product-overlay {
                    //             transform: translateX(-100%);
                    //             opacity: 0;
                    //         }

                    //         .card-inner {
                    //             opacity: 1;
                    //             transform: translateY(0);
                    //         }
                    //     }
                    // }
                    // @media (hover: hover) {
                    //     .product-card:hover {
                    //         width: 45%;

                    //         .product-overlay {
                    //             transform: translateX(-100%);
                    //             opacity: 0;
                    //             cursor: pointer;
                    //         }

                    //         .card-inner {
                    //             opacity: 1;
                    //             transform: translateY(0);
                    //         }
                    //     }
                    // }
                    @media (hover: none) {
                        .product-card:hover {
                            width: auto;
                        }
                    }

                    &.is-open {
                        /* width: 45%; */
                        flex: 0 0 45%;

                        // height: 65vh;
                        /* height: 75vh; */
                        .media-sm( {
                                width : 80%;
                                flex : none !important;
                                /* height   : 65vh; */
                                // transform: scale(1);
                            }

                        );

                        .media-xs( {
                                width : 55%;
                                flex : none !important;
                                /* height   : 70vh; */
                                // transform: scale(1);
                            }

                        );

                        .product-overlay {
                            transform: translateX(-100%);
                            opacity: 0;
                            pointer-events: none;
                        }

                        .card-inner {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }

                    .product-overlay {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        padding: 20px;
                        background-color: @button;
                        border-radius: 12px;
                        z-index: 5;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition:
                            transform 0.5s ease,
                            opacity 0.3s ease;

                        .media-xs( {
                                border-radius: 7px;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            z-index: -1;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 12px;
                            background-image: url("../../images/texture-03.png?v=3");
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            mix-blend-mode: color-burn;

                            .media-xs( {
                                    border-radius: 7px;
                                }

                            );
                        }

                        &-content {
                            // text-align: center;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: space-between;

                            &-title {
                                p {
                                    .font-title1;
                                    color: @white;
                                    font-size: 40px;
                                    line-height: 1.3;
                                    letter-spacing: 0.04em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 30px;
                                        }

                                    );
                                }
                            }

                            &-button {
                                padding: 20px;
                                background-color: @white;
                                border-radius: 7px;
                                width: 100%;
                                cursor: pointer;

                                .media-xs( {
                                        padding : 10px;
                                        border-radius: 5px;
                                    }

                                );

                                p {
                                    .font-title1;
                                    color: @dark;
                                    font-size: 16px;
                                    letter-spacing: 0.02em;
                                    text-align: center;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );
                                }
                            }
                        }
                    }

                    /* .media-sm( {
                            width: 50%;
                        }

                    ); */

                    /* .media-xs( {
                            width: 80%;
                        }

                    ); */

                    &:before {
                        content: "";
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 12px;
                        background-color: @brown;

                        .media-xs( {
                                border-radius: 7px;
                            }

                        );
                    }

                    .card-inner {
                        position: relative;
                        z-index: 3;
                        display: flex;
                        flex-direction: row;
                        align-items: stretch;
                        // transition: transform 0.4s ease;
                        opacity: 0;
                        transform: translateY(20px);
                        // transition: all 0.4s ease;
                        transition: all 1s ease;
                        gap: 15px;
                        height: 100%;

                        .media-xs( {
                                flex-direction: column;
                            }

                        );

                        &-content {
                            // padding: 20px;
                            color: #fff;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            width: 50%;

                            .media-sm( {
                                    width : 100%;
                                    height: 100%
                                }

                            );

                            .media-xs( {
                                    width : 100%;
                                    height: 100%
                                }

                            );

                            &-wrap {
                                position: relative;

                                &-title {
                                    margin-bottom: 30px;

                                    .media-xs( {
                                            margin-bottom: 15px;
                                        }

                                    );

                                    .media-sm( {
                                            order : 1;
                                            margin-bottom: 20px;
                                        }

                                    );

                                    .media-xs( {
                                            order : 1;
                                            margin-bottom: 20px;
                                        }

                                    );

                                    p {
                                        .font-title1;
                                        color: @white;
                                        font-size: 40px;
                                        line-height: 1.3;
                                        letter-spacing: 0.04em;
                                        text-transform: capitalize;

                                        .media-xs( {
                                                font-size: 30px;
                                            }

                                        );
                                    }
                                }

                                &-image {
                                    position: relative;
                                    display: none;

                                    .media-sm( {
                                            display : block;
                                            order : 2;
                                            width : 100%;
                                            height : 20vh;
                                            margin-bottom: 20px;
                                        }

                                    );

                                    .media-xs( {
                                            display : block;
                                            order : 2;
                                            width : 100%;
                                            height : 25vh;
                                            margin-bottom: 20px;
                                        }

                                    );

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 12px;
                                        object-fit: cover;
                                        display: block;
                                        object-position: 50% 35%;
                                    }
                                }

                                &-desc {
                                    margin-bottom: 75px;

                                    .media-sm( {
                                            order : 3;
                                            margin-bottom: 20px;
                                        }

                                    );

                                    .media-xs( {
                                            order : 3;
                                            margin-bottom: 20px;
                                        }

                                    );

                                    // .media-xxs({
                                    //     margin-bottom: 30px;
                                    // });
                                    p {
                                        .font-body2;
                                        color: @white;
                                        font-size: 14px;
                                        line-height: 1.6;
                                        text-align: justify;

                                        .media-xs( {
                                                font-size: 12px;
                                            }

                                        );
                                    }
                                }
                            }

                            &-button {
                                padding: 20px;
                                background-color: @button;
                                border-radius: 7px;
                                cursor: pointer;

                                .media-xs( {
                                        border-radius: 5px;
                                        padding : 10px;
                                    }

                                );

                                p {
                                    .font-title1;
                                    color: @white;
                                    font-size: 16px;
                                    letter-spacing: 0.02em;
                                    text-align: center;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );
                                }
                            }
                        }

                        &-image {
                            // padding: 20px 20px 20px 0;
                            width: 50%;
                            height: 100%;

                            .media-xs( {
                                    height: 400px;
                                }

                            );

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 10px;
                                object-fit: cover;
                                display: block;
                                object-position: 50% 50%;

                                .media-xs( {
                                        border-radius: 5px;
                                    }

                                );
                            }
                        }
                    }
                }
            }
        }
    }

    &.mobile-new {
        .media-sm( {
                .product-card {
                    flex: none !important;

                    .product-overlay {
                        display: none !important;
                    }

                    .card-inner {
                        opacity : 1 !important;
                        transform: none !important;

                        &-content {
                            &-button {
                                background-color: @white  !important;

                                p {
                                    color: @dark  !important;
                                }
                            }
                        }
                    }

                    &:before {
                        background-color: @button  !important;
                    }
                }
            }

        );

        .media-xs( {
                .product-card {
                    flex: none !important;

                    .product-overlay {
                        display: none !important;
                    }

                    .card-inner {
                        opacity : 1 !important;
                        transform: none !important;

                        &-content {
                            &-button {
                                background-color: @white  !important;

                                p {
                                    color: @dark  !important;
                                }
                            }
                        }
                    }

                    &:before {
                        background-color: @button  !important;
                    }
                }
            }

        );
    }
}

.dv-invest-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .invest {
        position: relative;
        width: 100%;

        &-area {
            position: relative;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;

            .panel {
                position: relative;
                padding: 75px 5%;

                .media-xs( {
                        padding: 50px 5%;
                    }

                );

                &.left {
                    width: 50%;
                    height: 100%;
                    background-image: url("../../images/background-texture.jpg?v=3");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    z-index: 3;

                    &:before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                        background-color: fade(@dark, 50%);
                    }

                    .media-sm( {
                            width: 100%;
                        }

                    );

                    .media-xs( {
                            width: 100%;
                        }

                    );
                }

                &.main {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 50%;
                    height: 100%;
                    padding: 75px 5%;
                    transition: transform 0.4s ease;
                    z-index: 2;
                    box-sizing: border-box;

                    .media-sm( {
                            top : 50%;
                            width : 100%;
                            height: 50%;
                        }

                    );

                    .media-xs( {
                            top : 50%;
                            width : 100%;
                            height: 54%;
                        }

                    );

                    &:before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                        background-image: url("../../images/invest.jpg?v=3");
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                    &.open {
                        transform: translateX(-100%);

                        .media-sm( {
                                transform: translateX(0);
                                transform: translateY(-100%);
                            }

                        );

                        .media-xs( {
                                transform: translateX(0);
                                transform: translateY(-93%);
                            }

                        );

                        .media-xxs( {
                                transform: translateY(-97%);
                            }

                        );

                        &::after {
                            left: 100%;
                            border-right: none;
                            border-left: 14px solid #0c5d5a;

                            .media-sm( {
                                    top : 100%;
                                    left : 50%;
                                    transform: translateX(-50%);

                                    border-left : none;
                                    border-right : none;
                                    border-bottom: none;

                                    border-left : 14px solid transparent;
                                    border-right: 14px solid transparent;
                                    border-top : 14px solid #0c4c4b;

                                }

                            );

                            .media-xs( {
                                    top : 100%;
                                    left : 50%;
                                    transform: translateX(-50%);

                                    border-left : none;
                                    border-right : none;
                                    border-bottom: none;

                                    border-left : 14px solid transparent;
                                    border-right: 14px solid transparent;
                                    border-top : 14px solid #0c4c4b;

                                }

                            );
                        }
                    }
                }

                &.back {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 50%;
                    height: 100%;
                    z-index: 1;

                    .media-sm( {
                            position: relative;
                            width : 100%;
                        }

                    );

                    .media-xs( {
                            position: relative;
                            width : 100%;
                        }

                    );
                }

                &-title {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    &.white {
                        p {
                            .font-title1;
                            color: @white;
                            font-size: 28px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size : 20px;
                                    letter-spacing: 0.04em;
                                }

                            );
                        }
                    }

                    p {
                        .font-title1;
                        color: @dark;
                        font-size: 28px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size : 20px;
                                letter-spacing: 0.04em;
                            }

                        );
                    }
                }

                .simulation {
                    &-area {
                        form {
                            .form-wrap {
                                position: relative;
                                width: 100%;
                                margin-bottom: 20px;

                                &-content {
                                    width: 100%;
                                    margin-bottom: 15px;

                                    &.row {
                                        display: flex;
                                        gap: 15px;
                                    }

                                    &.btm {
                                        margin-bottom: 0;
                                    }

                                    .custom-select {
                                        position: relative;
                                        width: 100%;

                                        &.open {
                                            .custom-select-trigger.dropdown::after {
                                                transform: translateY(-50%) rotate(180deg);
                                            }

                                            .custom-options {
                                                display: block;
                                            }
                                        }

                                        &--disabled {
                                            pointer-events: none;
                                            opacity: 0.45;

                                            .custom-select-trigger {
                                                cursor: not-allowed;
                                            }
                                        }

                                        &-trigger {
                                            .font-body2;
                                            color: @white;
                                            text-transform: capitalize;
                                            border: 1px solid @white;
                                            border-radius: 7px;
                                            font-size: 16px;
                                            padding: 20px;
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            background: transparent;
                                            cursor: pointer;

                                            .media-xs( {
                                                    font-size : 12px;
                                                    border-radius: 5px;
                                                }

                                            );

                                            &.dropdown {
                                                &::after {
                                                    content: "";
                                                    position: absolute;
                                                    right: 20px;
                                                    top: 50%;
                                                    transform: translateY(-50%);
                                                    width: 20px;
                                                    height: 20px;

                                                    background: url("../../images/dropdown-02.svg?v=3");
                                                    background-repeat: no-repeat;
                                                    background-position: center;
                                                    background-size: contain;

                                                    pointer-events: none; // biar klik tetap ke trigger
                                                    transition: transform 0.25s ease;

                                                    .media-xs( {
                                                            width : 15px;
                                                            height: 15px;
                                                        }

                                                    );
                                                }
                                            }

                                            img {
                                                width: 20px;
                                                height: auto;

                                                .media-xs( {
                                                        width: 16px;
                                                    }

                                                );
                                            }

                                            span {
                                                &.suffix {
                                                    .font-title3;
                                                    font-size: 16px;
                                                    color: @white;
                                                    text-transform: lowercase;

                                                    .media-xs( {
                                                            font-size: 12px;
                                                        }

                                                    );
                                                }
                                            }
                                        }

                                        .custom-options {
                                            position: absolute;
                                            width: 100%;
                                            top: 100%;
                                            background: rgba(23, 67, 68, 0.75);
                                            backdrop-filter: blur(12px);
                                            -webkit-backdrop-filter: blur(12px);
                                            border: 1px solid rgba(23, 67, 68, 0.2);
                                            border-radius: 10px;
                                            display: none;
                                            z-index: 10;
                                            max-height: 240px;
                                            overflow-y: auto;
                                            overflow-x: hidden;

                                            &::-webkit-scrollbar {
                                                width: 6px;
                                            }

                                            &::-webkit-scrollbar-thumb {
                                                background: rgba(255,
                                                        255,
                                                        255,
                                                        0.3);
                                                border-radius: 10px;
                                            }

                                            .custom-option {
                                                padding: 12px;
                                                .font-body2;
                                                color: @white;
                                                font-size: 16px;
                                                cursor: pointer;

                                                .media-xs( {
                                                        font-size: 12px;
                                                    }

                                                );

                                                &:hover {
                                                    background: @brown;
                                                    border-radius: 10px;
                                                }
                                            }
                                        }
                                    }

                                    input {
                                        width: 100%;
                                        border: 1px solid @white;
                                        border-radius: 10px;
                                        padding: 20px 50px 20px 20px;
                                        background-color: transparent !important;

                                        color: @white;
                                        .font-body2;
                                        font-size: 16px;
                                        letter-spacing: 0.02em;

                                        .media-xs( {
                                                font-size: 12px;
                                            }

                                        );

                                        &:focus {
                                            outline: none;
                                            border-color: @white;
                                        }

                                        &::placeholder {
                                            color: @white;
                                            .font-body2;
                                            font-size: 16px;
                                            letter-spacing: 0.02em;
                                            transition: opacity 0.25s ease;
                                            opacity: 1;

                                            .media-xs( {
                                                    font-size: 12px;
                                                }

                                            );
                                        }

                                        &:focus::placeholder {
                                            opacity: 0;
                                        }
                                    }

                                    .date-field {
                                        position: relative;

                                        span {
                                            position: absolute;
                                            // right: 30px;
                                            top: 50%;
                                            .font-body2;
                                            font-size: 16px;
                                            transform: translateY(-50%);
                                            color: @white;
                                            pointer-events: none;
                                            transition: 0.2s;

                                            .media-xs( {
                                                    font-size: 12px;
                                                }

                                            );
                                        }

                                        input {
                                            padding: 20px 20px;
                                        }

                                        // input:focus + span,
                                        // input:valid + span {
                                        //     opacity: 0;
                                        // }
                                        input[type="date"]::-webkit-calendar-picker-indicator {
                                            /* opacity: 0;
                                            cursor: pointer; */
                                            opacity: 0;
                                            position: absolute;
                                            right: 0;
                                            top: 0;
                                            width: 100%;
                                            height: 100%;
                                            cursor: pointer;
                                        }

                                        .calendar-icon {
                                            position: absolute;
                                            right: 12px;
                                            top: 50%;
                                            transform: translateY(-50%);
                                            pointer-events: none;
                                            cursor: pointer;
                                        }
                                    }

                                    .field-label {
                                        margin-bottom: 12px;

                                        p {
                                            .font-body2;
                                            font-size: 16px;
                                            color: @white;
                                            letter-spacing: 0.02em;
                                            text-transform: capitalize;

                                            .media-xs( {
                                                    font-size: 12px;
                                                }

                                            );
                                        }
                                    }

                                    .year-options {
                                        display: flex;
                                        gap: 10px;
                                        flex-wrap: wrap;
                                        justify-content: flex-start;

                                        // .media-xxs({
                                        //     justify-content: flex-start;
                                        // });
                                        .year-btn {
                                            position: relative;
                                            // display: flex;
                                            // align-items: center;
                                            // gap: 8px;
                                            padding: 20px;
                                            border: 1px solid @white;
                                            border-radius: 7px;
                                            cursor: pointer;
                                            color: @white;
                                            transition: all 0.2s ease;
                                            user-select: none;
                                            margin-bottom: 10px;

                                            .media-xs( {
                                                    padding : 15px;
                                                    border-radius: 5px;
                                                }

                                            );

                                            .text {
                                                .font-body2;
                                                font-size: 16px;
                                                margin-left: 20px;

                                                .media-xs( {
                                                        font-size : 12px;
                                                        margin-left: 15px;
                                                    }

                                                );
                                            }

                                            /* titik */
                                            &::before {
                                                content: "●";
                                                position: absolute;
                                                left: 16px;
                                                top: 50%;
                                                transform: translateY(-50%);
                                                font-size: 14px;
                                                color: @white;
                                                transition: all 0.3s ease;

                                                .media-xs( {
                                                        font-size: 8px;
                                                    }

                                                );
                                            }

                                            &:hover {
                                                border: 2px solid @button;
                                                background-color: @dark;

                                                &::before {
                                                    content: "✓";
                                                    .font-title1;
                                                    font-size: 14px;
                                                    color: @white;

                                                    .media-xs( {
                                                            font-size: 8px;
                                                        }

                                                    );
                                                }

                                                .text {
                                                    .font-title1;
                                                }
                                            }

                                            &.is-active {
                                                border: 2px solid @button;
                                                background-color: @dark;

                                                &::before {
                                                    content: "✓";
                                                    .font-title1;
                                                    font-size: 14px;
                                                    color: @white;

                                                    .media-xs( {
                                                            font-size: 8px;
                                                        }

                                                    );
                                                }

                                                .text {
                                                    .font-title1;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &-bottom {
                            width: 100%;
                            display: flex;
                            justify-content: flex-end;

                            .button {
                                // padding: 20px 10px;
                                // background-color: @button;
                                // cursor: pointer;
                                // border-radius: 7px;
                                min-width: 210px;

                                .media-xs( {
                                        border-radius: 5px;
                                    }

                                );

                                p {
                                    padding: 20px 10px;
                                    background-color: @button;
                                    cursor: pointer;
                                    border-radius: 7px;
                                    .font-title1;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;
                                    text-align: center;

                                    .media-xs( {
                                            font-size: 15px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }

                &-content {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    &-subtitle {
                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 16px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 11px;
                                }

                            );
                        }
                    }

                    .result {
                        width: 100%;

                        &-info {
                            margin-bottom: 20px;

                            &-title {
                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 15px;
                                        }

                                    );
                                }
                            }

                            &-amount {
                                p {
                                    .font-title2;
                                    color: @dark;
                                    font-size: 45px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 32px;
                                        }

                                    );
                                }
                            }
                        }

                        &-details {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            // border-top: 1px solid @dark;
                            border-bottom: 1px solid @dark;
                            margin-bottom: 50px;

                            &-info {
                                border-bottom: 1px solid @dark;
                                padding-bottom: 15px;

                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 14px;
                                        }

                                    );
                                }
                            }

                            &-wrap {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                border-bottom: 1px solid @dark;
                                padding: 15px 0;
                                gap: 10px;

                                &:nth-last-child(1) {
                                    border-bottom: none;
                                }

                                &-date {
                                    width: 45%;

                                    p {
                                        .font-body1;
                                        color: @dark;
                                        font-size: 20px;
                                        letter-spacing: 0.02em;

                                        .media-xs( {
                                                font-size: 13px;
                                            }

                                        );
                                    }
                                }

                                &-desc {
                                    width: 25%;

                                    p {
                                        .font-body1;
                                        color: @dark;
                                        font-size: 20px;
                                        letter-spacing: 0.02em;

                                        .media-xs( {
                                                font-size: 13px;
                                            }

                                        );
                                    }
                                }

                                &-amount {
                                    width: 30%;
                                    text-align: left;

                                    p {
                                        .font-title3;
                                        color: @dark;
                                        font-size: 20px;
                                        letter-spacing: 0.02em;

                                        .media-xs( {
                                                font-size: 13px;
                                            }

                                        );
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-testimonial-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .testimonial {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .media-xs( {
                    padding: 0 5%;
                }

            );

            &-title {
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 15px;
                    }

                );

                p {
                    .font-title2;
                    color: @dark;
                    font-size: 32px;
                    letter-spacing: 0.04em;
                    text-align: center;

                    .media-xs( {
                            font-size: 20px;
                        }

                    );
                }
            }

            &-subtitle {
                width: 45%;
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 15px;
                    }

                );

                .media-xxs( {
                        width: 100%;
                    }

                );

                p {
                    .font-body2;
                    color: @dark;
                    font-size: 18px;
                    letter-spacing: 0.02em;
                    text-align: center;

                    .media-xs( {
                            font-size: 12px;
                        }

                    );
                }
            }

            &-content {
                width: 100%;
                height: 100%;
                position: relative;
                margin-bottom: 30px;

                .testimoni {
                    overflow: hidden;
                    width: 100%;
                    height: 45vh;
                    position: relative;
                    z-index: 3;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 380px;

                    .media-sm( {
                            height: 65vh;
                        }

                    );

                    .media-xs( {
                            height : auto;
                            flex-direction: column;
                            /* padding    : 50px 5% 50px 5%; */
                        }

                    );

                    &-wrap {
                        width: 60%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        position: relative;
                        padding: 70px 70px 70px 70px;
                        z-index: 5;
                        position: relative;
                        background-color: @white;
                        border-radius: 10px;
                        box-sizing: border-box;

                        .media-xs( {
                                width : 100%;
                                padding : 20px 20px 20px 20px;
                                border-radius: 7px;
                            }

                        );
                    }

                    &-photo {
                        width: 150px;
                        height: 200%;
                        overflow: hidden;
                        position: relative;
                        margin-right: 15px;

                        .media-xs( {
                                width : 200%;
                                height : 120px;
                                order : 2;
                                margin-right: 0;
                                margin-top : 20px;
                            }

                        );

                        .photo-track {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            gap: 10px;
                            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

                            .media-xs( {
                                    width : 100%;
                                    height : 100%;
                                    flex-direction: row;
                                    gap : 5px;
                                }

                            );

                            .photo-item {
                                width: 100%;
                                height: 33.333%;
                                border-radius: 7px;
                                background-size: cover;
                                background-position: center;
                                filter: grayscale(100%);
                                opacity: 0.4;
                                transition:
                                    filter 0.4s,
                                    opacity 0.4s;

                                .media-xs( {
                                        border-radius: 5px;
                                        width : 100%;
                                        height : 100%;
                                    }

                                );

                                &.active {
                                    border: 3px solid @brown;
                                    filter: none;
                                    opacity: 1;
                                }
                            }
                        }
                    }

                    &-area {
                        width: 100%;
                        position: relative;
                        z-index: 2;

                        &-wrapper {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    &-slide {
                        position: relative;
                        z-index: 5;

                        .media-xs( {
                                padding-left : 10px;
                                padding-right: 10px;
                            }

                        );

                        .slick-list {
                            height: 100% !important;

                            .testimoni-photo {
                                padding: 60px 0 !important;
                            }
                        }

                        .slick-track {
                            display: flex;
                            align-items: center;
                            padding: 30px 0;

                            .media-xs( {
                                    padding: 50px 0;
                                }

                            );
                        }

                        .slick-center {
                            .testimoni-photo img {
                                filter: grayscale(0%);
                                opacity: 1;
                                transform: scale(1.05);
                            }
                        }

                        .slick-active:not(.slick-center) {
                            .testimoni-photo img {
                                filter: grayscale(100%);
                                opacity: 0.4;
                            }
                        }

                        .slick-prev-custom {
                            position: absolute;
                            right: 70px;
                            width: 30px;
                            bottom: 50px;
                            border: none;
                            background: none;
                            outline: none;
                            padding: 0;
                            display: block;
                            z-index: 3;
                            cursor: pointer;

                            &.slick-disabled {
                                display: none !important;
                            }

                            .media-xs( {
                                    width : 25px;
                                    bottom: 10px;
                                }

                            );
                        }

                        .slick-next-custom {
                            position: absolute;
                            right: 20px;
                            width: 30px;
                            bottom: 50px;
                            border: none;
                            background: none;
                            outline: none;
                            display: block;
                            padding: 0;
                            z-index: 3;
                            cursor: pointer;

                            &.slick-disabled {
                                display: none !important;
                            }

                            .media-xs( {
                                    width : 25px;
                                    bottom: 10px;
                                }

                            );
                        }

                        &-list {
                            outline: none;
                            width: 300px;
                            outline: none;

                            position: relative;
                            display: flex;
                            align-items: center;
                            // align-items: flex-end;
                            gap: 40px;
                            height: auto;

                            .media-xs( {
                                    flex-direction: column-reverse;
                                    gap : 20px;
                                }

                            );

                            .slickwrapper {
                                width: 100%;
                                height: 100%;
                                display: block;
                                position: relative;
                                padding: 0 20px;

                                .media-xs( {
                                        padding: 0 0;
                                    }

                                );
                            }

                            p {
                                font-size: 18px;
                                color: @dark;
                                .font-body1;
                                text-align: justify;
                                width: 100%;
                                line-height: 1.6;

                                .media-xs( {
                                        font-size : 14px;
                                        line-height: 1.3;
                                    }

                                );

                                .media-xxs( {
                                        font-size: 12px;
                                    }

                                );
                            }

                            &-name {
                                text-align: center;
                                z-index: 2;
                                display: flex;
                                align-items: flex-end;
                                justify-content: center;
                                padding: 0;
                                margin-bottom: 10px;

                                p {
                                    font-size: 20px;
                                    color: @dark;
                                    .font-title1;
                                    text-align: left;
                                    width: 100%;
                                    line-height: 1;
                                    display: block;

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );
                                }
                            }

                            &-job {
                                text-align: center;
                                z-index: 2;
                                display: flex;
                                align-items: flex-end;
                                justify-content: center;
                                padding: 0;

                                // margin-bottom: 20px;
                                p {
                                    font-size: 16px;
                                    color: @dark;
                                    .font-body2;
                                    text-align: left;
                                    width: 100%;
                                    line-height: 1;
                                    display: block;

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );
                                }
                            }

                            &-wrap {
                                position: relative;
                                height: 100%;
                                display: flex;
                                align-items: center;
                                flex-flow: row wrap;
                                z-index: 2;
                                margin-bottom: 50px;
                            }
                        }
                    }
                }
            }

            &-google {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                // cursor        : pointer;

                .media-xs( {
                        margin-bottom: 30px;
                    }

                );

                &-title {
                    width: 100%;
                    /* border-bottom: 1px solid @dgray; */
                    margin-bottom: 20px;

                    p {
                        .font-title1;
                        color: @dark;
                        font-size: 24px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;
                        text-align: center;

                        .media-xs( {
                                font-size: 18px;
                            }

                        );
                    }
                }

                &-ddloc {
                    position: relative;
                    width: 320px;
                    margin-bottom: 30px;

                    .media-xs( {
                            width: 100%;
                        }

                    );

                    .custom-select-branch {
                        position: relative;
                        width: 100%;

                        .custom-select-branch-dropdown:hover {
                            .custom-option-branch.active:not(:hover) {
                                background: transparent;
                                color: @button;
                            }
                        }

                        &-trigger {
                            .font-body1;
                            width: 100%;
                            padding: 12px 45px 12px 16px;
                            border-bottom: 1px solid @button;
                            background-color: transparent;
                            color: @button;
                            font-size: 16px;
                            cursor: pointer;
                            position: relative;

                            .media-xs( {
                                    font-size: 14px;
                                }

                            );

                            &::after {
                                content: "";
                                position: absolute;
                                top: 50%;
                                right: 16px;
                                width: 10px;
                                height: 10px;
                                border-right: 2px solid @button;
                                border-bottom: 2px solid @button;
                                transform: translateY(-60%) rotate(45deg);
                                transition: 0.3s ease;
                            }
                        }

                        &.open {
                            .custom-select-branch-trigger {
                                &::after {
                                    transform: translateY(-30%) rotate(-135deg);
                                }
                            }

                            .custom-select-branch-dropdown {
                                opacity: 1;
                                visibility: visible;
                                pointer-events: auto;
                                transform: translateY(0);
                            }
                        }

                        &-dropdown {
                            position: absolute;
                            top: calc(100% ~"+"10px);
                            left: 0;
                            width: 100%;
                            background: @white;
                            border: 1px solid @button;
                            border-radius: 7px;
                            overflow-y: auto;
                            max-height: 220px;
                            z-index: 10;
                            opacity: 0;
                            visibility: hidden;
                            pointer-events: none;
                            transform: translateY(10px);
                            transition: 0.25s ease;
                            padding-right: 8px;

                            /* custom scrollbar */
                            &::-webkit-scrollbar {
                                width: 8px;
                            }

                            &::-webkit-scrollbar-thumb {
                                background: @button;
                                border-radius: 20px;
                                border: 2px solid @white;
                            }

                            &::-webkit-scrollbar-thumb:hover {
                                background: darken(@button, 10%);
                            }

                            &::-webkit-scrollbar-track {
                                background: fade(@button, 12%);
                                border-radius: 20px;
                                margin: 6px 0;
                            }
                        }

                        .custom-option-branch {
                            .font-body1;
                            padding: 12px 16px;
                            color: @button;
                            font-size: 15px;
                            cursor: pointer;
                            transition: 0.2s ease;

                            &:hover,
                            &.active {
                                background: @button;
                                color: @white2;
                            }

                            .media-xs( {
                                    font-size: 14px;
                                }

                            );
                        }
                    }
                }

                &-content {
                    width: 75%;
                    display: flex;
                    gap: 30px;
                    cursor: pointer;

                    .media-sm( {
                            width: 82%;
                        }

                    );

                    .media-xs( {
                            width : 100%;
                            flex-direction: column;
                            align-items : center
                        }

                    );

                    .review-summary {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        background: @gray;
                        padding: 20px;
                        border-radius: 10px;
                        text-align: center;
                        width: 60%;

                        .media-sm( {
                                width: 65%;
                            }

                        );

                        .media-xs( {
                                width: 55%;
                            }

                        );

                        .media-xxs( {
                                width: 100%;
                            }

                        );

                        &-title {
                            margin-bottom: 10px;

                            p {
                                .font-title3;
                                color: @dark;
                                font-size: 28px;
                                line-height: 1;
                                text-align: center;

                                .media-xs( {
                                        font-size: 24px;
                                    }

                                );
                            }
                        }

                        &-subtitle {
                            p {
                                .font-body1;
                                color: @dark;
                                font-size: 16px;
                                line-height: 1;
                                text-align: center;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }

                        .stars {
                            position: relative;
                            margin-bottom: 10px;
                            width: 120px;
                            height: 24px;

                            background: @dgray;

                            -webkit-mask: url("../../images/star.svg") repeat-x;
                            -webkit-mask-size: 24px;

                            mask: url("../../images/star.svg") repeat-x;
                            mask-size: 24px;

                            .stars-fill {
                                height: 100%;
                                width: 0%;
                                background: @brown;
                            }
                        }
                    }

                    .review-breakdown {
                        position: relative;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;

                        .review-row {
                            display: flex;
                            align-items: center;
                            gap: 10px;

                            span {
                                .font-body1;
                                color: @dark;
                                font-size: 14px;
                                line-height: 1.3;
                            }

                            .bar {
                                flex: 1;
                                height: 6px;
                                background: @dwhite;
                                border-radius: 10px;
                                overflow: hidden;
                            }

                            .fill {
                                height: 100%;
                                background: @brown;
                                border-radius: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-membership-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .membership {
        &-area {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: stretch;
            justify-content: center;

            &-pic {
                width: 60%;
                // height: 100%;
                // min-height: 375px;
                background-image: url("../../images/membership-bg.jpg?v=3");
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;

                .media-xs( {
                        width: 40%;
                    }

                );

                .media-xxs( {
                        width: 30%;
                    }

                );
            }

            &-content {
                width: 40%;
                height: 100%;
                background-color: @dark;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                z-index: 3;
                padding: 70px 50px 50px 50px;
                position: relative;

                .media-xs( {
                        padding: 35px 30px 30px 30px;
                        width : 60%;
                    }

                );

                .media-xxs( {
                        padding: 25px 20px 20px 20px;
                        width : 70%;
                    }

                );

                &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    background-image: url("../../images/background-texture.jpg?v=3");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;
                }

                &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    background-color: fade(@dark, 50%);
                }

                &-goldpic {
                    position: absolute;
                    z-index: 2;
                    top: 50%;
                    transform: translateY(-50%);
                    right: -65px;
                    width: 70%;
                    height: auto;
                }

                &-title {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    p {
                        .font-title2;
                        color: @white;
                        font-size: 30px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 16px;
                            }

                        );
                    }
                }

                &-subtitle {
                    margin-bottom: 100px;
                    width: 55%;

                    .media-xs( {
                            margin-bottom: 50px;
                        }

                    );

                    .media-xxs( {
                            margin-bottom: 20px;
                            width : 70%;
                        }

                    );

                    p {
                        .font-body2;
                        color: @white;
                        font-size: 16px;
                        letter-spacing: 0.02em;

                        .media-xs( {
                                font-size: 11px;
                            }

                        );
                    }
                }

                &-button {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;

                    .button {
                        background-color: @button;
                        padding: 20px 30px;
                        border-radius: 7px;
                        cursor: pointer;

                        .media-xs( {
                                border-radius: 5px;
                                padding : 15px 20px;
                            }

                        );

                        p {
                            .font-title1;
                            color: @white;
                            font-size: 20px;
                            letter-spacing: 0.02em;
                            text-align: center;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 11px;
                                }

                            );
                        }
                    }
                }
            }
        }
    }
}

.dv-location-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;
    padding-top: 75px;
    padding-bottom: 75px;

    .media-xs( {
            padding-top : 75px;
            padding-bottom: 85px;
        }

    );

    .location {
        &-area {
            width: 100%;
            height: 100%;

            &-title {
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 15px;
                    }

                );

                p {
                    .font-title2;
                    color: @dark;
                    font-size: 32px;
                    letter-spacing: 0.04em;

                    .media-xs( {
                            font-size: 20px;
                        }

                    );
                }
            }

            &-content {
                width: 100%;
                display: flex;
                /* align-items : center; */
                align-items: flex-start;
                justify-content: center;
                --map-height: 500px;

                &-info {
                    position: relative;
                    width: 40%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    gap: 15px;
                    margin-right: 20px;

                    max-height: var(--map-height);
                    overflow-y: auto;
                    scrollbar-width: thin;

                    &::-webkit-scrollbar {
                        width: 6px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #ccc;
                        border-radius: 10px;
                    }

                    &::after {
                        content: '';
                        position: sticky;
                        bottom: 0;
                        display: block;

                        width: 100%;
                        min-height: 60px;
                        margin-top: -60px;

                        pointer-events: none;
                        z-index: 5;

                        background: linear-gradient(to bottom,
                                rgba(255, 255, 255, 0),
                                rgba(255, 255, 255, 1));

                        transition: opacity 0.3s ease;
                    }

                    &.scrolled-end::after {
                        opacity: 0;
                    }

                    .media-xs( {
                            max-height : none;
                            overflow-y : hidden;
                            width : 100%;
                            margin-right: 0;

                            &::after {
                                display: none;
                            }
                        }

                    );

                    &-wrap {
                        cursor: pointer;
                        padding: 20px;
                        border-radius: 10px;
                        background: @lwhite;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        transition: all 0.3s ease;

                        .media-xs( {
                                border-radius: 7px
                            }

                        );

                        .loc {
                            &-title {
                                p {
                                    .font-title1;
                                    color: @dark;
                                    font-size: 22px;
                                    letter-spacing: 0.02em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 17px;
                                        }

                                    );
                                }
                            }

                            &-desc {
                                display: none;

                                p {
                                    .font-body3;
                                    color: @white;
                                    font-size: 18px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );
                                }
                            }
                        }

                        .icon {
                            width: 50px;

                            .media-xs( {
                                    width: 30px;
                                }

                            );

                            .wa-white {
                                display: none;
                            }
                        }

                        &.active {
                            background: @button;

                            .loc-title p,
                            .loc-desc p {
                                color: @white;
                            }

                            .loc-title {
                                margin-bottom: 15px;

                                .media-xs( {
                                        margin-bottom: 5px;
                                    }

                                );
                            }

                            .loc-desc {
                                display: block;
                                margin-top: 10px;
                                width: 90%;
                            }

                            .wa-color {
                                display: none;
                            }

                            .wa-white {
                                display: block;
                            }
                        }
                    }
                }

                .maps-mobile {
                    display: none;
                    margin: 15px 0;

                    iframe {
                        width: 100%;
                        height: 300px;
                        border-radius: 5px;
                    }

                    .media-xs( {
                            display: block;
                        }

                    );
                }

                &-maps {
                    position: relative;
                    width: 60%;
                    border-radius: 10px;
                    overflow: hidden;

                    iframe {
                        height: var(--map-height);
                    }

                    .media-xs( {
                            display: none;
                        }

                    );
                }
            }
        }
    }
}

/* PRODUCT PAGE */
.dv-opening-L2-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;
    padding: 75px 0 0 0;

    .media-xs( {
            padding: 50px 0 0 0;
        }

    );

    .opening {
        &-area {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            // align-items: center;
            justify-content: center;

            &-info {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-self: center;
                /* margin-bottom: 40px; */
                padding-left: 5%;
                padding-right: 5%;

                .media-xs( {
                        /* margin-bottom: 20px; */
                    }

                );

                &-title {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 38px;
                        letter-spacing: 0.04em;
                        text-transform: uppercase;
                        text-align: center;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );
                    }
                }

                &-subtitle {
                    width: 50%;
                    margin-bottom: 45px;

                    .media-xs( {
                            width : 100%;
                            margin-bottom: 30px;
                        }

                    );

                    p {
                        .font-body2;
                        color: @dark;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: center;

                        .media-xs( {
                                font-size: 11px;
                            }

                        );
                    }
                }
            }

            &-content {
                /* padding-top: 40px; */
                width: 100%;
                height: 100%;

                .media-xs( {
                        paddiong-top: 20px;
                    }

                );
            }
        }
    }
}

.dv-condition-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @lwhite;

    .condition {
        &-title {
            margin-bottom: 50px;
            text-align: center;

            .media-sm( {
                    order: 1;
                }

            );

            .media-xs( {
                    margin-bottom: 30px;
                    order : 1;
                }

            );

            p {
                .font-title2;
                color: @dark;
                font-size: 48px;
                letter-spacing: 0.04em;

                .media-sm( {
                        font-size: 38px;
                    }

                );

                .media-xs( {
                        font-size: 24px;
                    }

                );

                .media-xxs( {
                        font-size: 5vw;
                    }

                );
            }
        }

        &-area {
            width: 100%;
            height: 100%;
            display: flex;
            // align-items: center;
            /* align-items : flex-end; */
            align-items: flex-start;
            justify-content: center;
            gap: 50px;

            .media-sm( {
                    flex-direction: column;
                    gap : 40px;
                }

            );

            .media-xs( {
                    flex-direction: column;
                    gap : 35px;
                }

            );

            &-wrap {
                &.one {
                    width: 30%;
                    display: flex;
                    justify-content: flex-end;

                    .media-sm( {
                            width : 100%;
                            justify-content: center;
                        }

                    );

                    .media-xs( {
                            width : 100%;
                            justify-content: center;
                        }

                    );
                }

                &.two {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    gap: 25px;

                    .media-sm( {
                            width: 100%;
                        }

                    );

                    .media-xs( {
                            gap : 20px;
                            width: 100%;
                        }

                    );
                }

                &.three {
                    width: 20%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;
                    gap: 30px;

                    .media-sm( {
                            width : 100%;
                            justify-content: center;
                        }

                    );

                    .media-xs( {
                            gap : 15px;
                            width : 100%;
                            justify-content: center;
                        }

                    );
                }

                &-image {
                    border-radius: 12px;
                    overflow: hidden;
                    width: 100%;
                    height: 65vh;

                    .media-sm( {
                            width : 80%;
                            height: 45vh;
                        }

                    );

                    .media-xs( {
                            width : 80%;
                            height : 30vh;
                            border-radius: 7px;
                        }

                    );

                    .media-xxs( {
                            width : 100%;
                            height: 35vh;
                        }

                    );

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: 50% 50%;
                    }
                }

                &-title {
                    margin-bottom: 25px;

                    .media-sm( {
                            order: 1;
                        }

                    );

                    .media-xs( {
                            margin-bottom: 0;
                            order : 1;
                        }

                    );

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 32px;
                        letter-spacing: 0.04em;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );
                    }
                }

                &-characteristic {
                    width: 100%;
                    margin-bottom: 50px;

                    .media-sm( {
                            margin-bottom: 20px;
                            order : 3;
                        }

                    );

                    .media-xs( {
                            margin-bottom: 15px;
                            order : 3;
                        }

                    );

                    .characteristic-list {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        column-count: 2;
                        column-gap: 30px;

                        // gap: 12px 30px;
                        .media-xs( {
                                column-count: 1;
                                gap : 10px 0;
                            }

                        );

                        img {
                            width: 25px;

                            .media-xs( {
                                    width: 20px;
                                }

                            );
                        }

                        li {
                            break-inside: avoid;
                            display: flex;
                            align-items: center;
                            gap: 20px;
                            margin-bottom: 15px;

                            .font-title1;
                            color: @dark;
                            font-size: 20px;
                            letter-spacing: 0.02em;
                            text-transform: capitalize;

                            .media-xs( {
                                    margin-bottom: 10px;
                                    font-size : 17px;
                                }

                            );
                        }
                    }
                }

                &-subtitle {

                    // width: 85%;
                    .media-sm( {
                            order: 2;
                            width: 100%;
                        }

                    );

                    .media-xs( {
                            order: 2;
                            width: 100%;
                        }

                    );

                    p {
                        .font-body1;
                        color: @dark;
                        font-size: 18px;
                        letter-spacing: 0.02em;

                        .media-xs( {
                                font-size: 12px;
                            }

                        );
                    }
                }

                &-button {
                    width: 100%;
                    padding: 20px 10px;
                    border-radius: 7px;
                    background-color: @dark;
                    cursor: pointer;

                    .media-sm( {
                            width: 70%;
                        }

                    );

                    .media-xs( {
                            width : 70%;
                            padding : 15px 10px;
                            border-radius: 5px;
                        }

                    );

                    .media-xxs( {
                            width: 100%;
                        }

                    );

                    p {
                        .font-title1;
                        color: @white;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: center;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 15px;
                            }

                        );
                    }
                }

                &-image02 {
                    width: 100%;
                    /* height    : 35vh; */
                    height: 54vh;
                    overflow: hidden;
                    border-radius: 12px;

                    .media-sm( {
                            width : 70%;
                            height: 35vh;
                        }

                    );

                    .media-xs( {
                            width : 70%;
                            height : 30vh;
                            border-radius: 7px;
                        }

                    );

                    .media-xxs( {
                            width : 100%;
                            height: 25vh;
                        }

                    );

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: 50% 50%;
                    }
                }

                .contact {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}

.dv-series-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;

    .series {
        &-area {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 30px;

            .media-xs( {
                    gap: 15px;
                }

            );

            &-info {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                z-index: 3;

                .media-sm( {
                        flex-direction: column;
                        gap : 30px;
                    }

                );

                .media-xs( {
                        flex-direction: column;
                        gap : 20px;
                    }

                );

                &-desc {
                    position: relative;
                    width: 35%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;

                    .media-sm( {
                            width : 100%;
                            order : 2;
                            margin-bottom: 30px;
                        }

                    );

                    .media-xs( {
                            width : 100%;
                            order : 2;
                            margin-bottom: 20px;
                        }

                    );

                    &-title {
                        margin-bottom: 30px;
                        width: 50%;

                        .media-sm( {
                                width: 100%;
                            }

                        );

                        .media-xs( {
                                width : 100%;
                                margin-bottom: 15px;
                            }

                        );

                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 52px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 25px;
                                }

                            );
                            display: none;

                            &.active {
                                display: block;
                            }
                        }
                    }

                    &-subtitle {
                        width: 80%;

                        .media-sm( {
                                width: 100%;
                            }

                        );

                        .media-xs( {
                                width: 100%;
                            }

                        );

                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 18px;
                            letter-spacing: 0.02em;
                            text-align: justify;

                            .media-xs( {
                                    font-size: 12px;
                                }

                            );
                            display: none;

                            &.active {
                                display: block;
                            }
                        }
                    }
                }

                &-wrap {
                    position: relative;
                    width: 65%;
                    height: 100%;
                    display: flex;
                    align-self: center;
                    justify-content: center;
                    gap: 10px;

                    overflow: hidden;

                    .media-sm( {
                            width: 100%;
                            order: 1;
                        }

                    );

                    .media-xs( {
                            width: 100%;
                            order: 1;
                        }

                    );

                    .series-nav {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 20;
                        background: transparent;
                        border: none;
                        cursor: pointer;

                        img {
                            width: 32px;
                            height: 32px;
                        }

                        &.series-prev {
                            left: 0;
                        }

                        &.series-next {
                            right: 0;
                        }

                        &.disabled {
                            opacity: 0.3;
                            pointer-events: none;
                        }
                    }

                    .series-track {
                        display: flex;
                        transition: transform 0.6s ease;

                        &.is-static {
                            transform: none !important;
                            transition: none;
                        }
                    }

                    &-content {
                        /* width: 25%; */
                        flex: 0 0 25%;
                        margin-left: 5px;
                        margin-right: 5px;
                        transition: flex 0.4s ease;
                        height: 50vw;
                        position: relative;
                        overflow: hidden;
                        transition: all 0.4s ease;
                        cursor: pointer;
                        background-position: 50% 50%;
                        background-repeat: no-repeat;
                        background-size: cover;
                        border-radius: 10px;

                        .media-xs( {
                                border-radius: 5px;
                            }

                        );

                        &.open-content {
                            /* width: 50%; */
                            flex: 0 0 47%;
                            height: 30vw;
                            padding: 40px;
                            display: flex;
                            align-items: flex-end;
                            justify-content: flex-start;

                            .media-sm( {
                                    height: 50vw;
                                }

                            );

                            .media-xs( {
                                    padding: 15px 17px;
                                    height : 45vw;
                                }

                            );

                            &:after {
                                content: "";
                                position: absolute;
                                z-index: 2;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: linear-gradient(180deg,
                                        #8c6126 0%,
                                        rgba(140, 97, 38, 0) 100%);
                                transform: rotate(-180deg);
                                mix-blend-mode: multiply;
                            }

                            .series-area-info-wrap-content-desc {
                                p {
                                    .font-title1;
                                }
                            }
                        }

                        &.closed-content {
                            height: 30vw;
                            padding: 40px 25px;
                            display: flex;
                            align-items: flex-end;
                            justify-content: flex-start;

                            .media-sm( {
                                    height: 50vw;
                                }

                            );

                            .media-xs( {
                                    padding: 20px 10px;
                                    height : 45vw;
                                }

                            );

                            .series-area-info-wrap-content-desc {
                                width: 40%;
                            }

                            &:before {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-color: @button;
                            }

                            &:after {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-image: url(../../images/texture-03.png?v=3);
                                background-size: cover;
                                background-position: center center;
                                background-repeat: no-repeat;
                                mix-blend-mode: color-burn;
                            }
                        }

                        &-desc {
                            position: relative;
                            // left: 15px;
                            // bottom: 15px;
                            z-index: 3;

                            p {
                                .font-body1;
                                color: @white;
                                font-size: 32px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 15px;
                                    }

                                );
                            }
                        }
                    }
                }
            }

            &-content {
                &-title {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    p {
                        .font-title1;
                        color: @dark;
                        font-size: 26px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 17px;
                            }

                        );
                    }
                }

                &-wrap {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-auto-flow: row;
                    gap: 30px;

                    .media-xs( {
                            grid-template-columns: repeat(2, 1fr);
                            gap : 15px;
                        }

                    );

                    &-card {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-start;
                        cursor: pointer;

                        .media-sm( {
                                align-items: center;
                            }

                        );

                        .media-xs( {
                                align-items: center;
                            }

                        );

                        &.flash-sale {

                            /* BADGE */
                            .flash-sale-badge {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 50%;
                                background: @dark;
                                padding: 15px 15px 15px 30px;
                                border-radius: 0 25px 25px 0;
                                z-index: 2;

                                .media-sm( {
                                        width : 70%;
                                        padding: 15px;
                                    }

                                );

                                .media-xs( {
                                        padding: 10x 5px 10px 15px;
                                        width : 65%;
                                    }

                                );

                                p {
                                    .font-title1;
                                    margin: 0;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;

                                    .media-xs( {
                                            font-size: 12px;
                                        }

                                    );
                                }
                            }

                            /* COUNTDOWN */
                            .flash-sale-countdown {
                                position: absolute;
                                left: 0px;
                                right: 0px;
                                bottom: 65px;
                                background: @button;
                                border-radius: 10px;
                                padding: 20px 10px;
                                z-index: 2;

                                .media-sm( {
                                        bottom: 90px;
                                    }

                                );

                                .media-xs( {
                                        border-radius: 5px;
                                        padding : 10px;
                                        bottom : 50px;
                                    }

                                );

                                .countdown-area-cd-time {
                                    display: flex;
                                    justify-content: center;
                                    gap: 15px;

                                    .media-sm( {
                                            gap: 10px;
                                        }

                                    );

                                    .media-xs( {
                                            gap: 25px;
                                        }

                                    );

                                    .media-xxs( {
                                            gap: 20px;
                                        }

                                    );
                                }

                                .countdown-area-cd-time-item {
                                    position: relative;

                                    &:not(:last-child):after {
                                        content: ":";
                                        position: absolute;
                                        right: calc(-1 * (15px / 2));
                                        top: 35%;
                                        transform: translate(50%, -50%);
                                        font-size: 20px;
                                        color: @white;
                                        .font-title1;

                                        .media-sm( {
                                                font-size: 18px;
                                                right : calc(-1 * (10px / 2));
                                            }

                                        );

                                        .media-xs( {
                                                right : calc(-1 * (25px / 2));
                                                font-size: 16px;
                                            }

                                        );

                                        .media-xs( {
                                                right : calc(-1 * (20px / 2));
                                                font-size: 4vw;
                                            }

                                        );
                                    }
                                }

                                .countdown-area-cd-time-item-number {
                                    .font-title1;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;
                                    text-align: center;

                                    .media-sm( {
                                            font-size: 18px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );

                                    .media-xxs( {
                                            font-size: 4vw;
                                        }

                                    );
                                }

                                .countdown-area-cd-time-item-label p {
                                    .font-body2;
                                    color: @white;
                                    font-size: 14px;
                                    letter-spacing: 0.04em;
                                    text-align: center;
                                    margin: 0;

                                    .media-sm( {
                                            font-size: 12px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );

                                    .media-xxs( {
                                            font-size: 2vw;
                                        }

                                    );
                                }
                            }
                        }

                        &-image {
                            width: 100%;
                            height: 450px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            overflow: hidden;
                            margin-bottom: 15px;

                            .media-sm( {
                                    height: 250px;
                                }

                            );

                            .media-xs( {
                                    height : 275px;
                                    margin-bottom: 10px;
                                }

                            );

                            .media-xxs( {
                                    height: 200px;
                                }

                            );

                            img {
                                /* width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: 50% 50%; */
                                max-width: 100%;
                                max-height: 100%;
                                width: auto;
                                height: auto;
                                object-fit: contain;
                            }
                        }

                        &-title {
                            margin-bottom: 10px;

                            .media-xs( {
                                    margin-bottom: 5px;
                                }

                            );

                            p {
                                .font-title3;
                                color: @dark;
                                font-size: 20px;
                                letter-spacing: 0.04em;
                                text-transform: capitalize;

                                .media-sm( {
                                        text-align: center;
                                    }

                                );

                                .media-xs( {
                                        font-size : 14px;
                                        text-align: center;
                                    }

                                );
                            }
                        }

                        &-subtitle {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 10px;

                            &-desc {
                                p {
                                    .font-body2;
                                    color: @dark;
                                    font-size: 16px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 12px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* DETAILS PRODUCT */
.dv-details-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .details {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .media-xs( {
                    flex-direction : column;
                    align-items : flex-start;
                    justify-content: center;
                }

            );

            &:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 0;
                left: 0;
                width: 45%;
                background-color: @lwhite;

                .media-xs( {
                        display: none;
                    }

                );
            }

            &:after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 0;
                right: 0;
                width: 55%;
                background-color: @white;

                .media-xs( {
                        display: none;
                    }

                );
            }

            &-back {
                position: absolute;
                top: 0;
                right: 0;
                width: 55%;
                padding: 50px 5% 30px 5%;
                z-index: 4;

                .media-xs( {
                        position: relative;
                        width : 100%;
                        padding : 35px 5% 15px 5%;
                    }

                );

                p {
                    .font-body1;
                    color: @dark;
                    font-size: 18px;
                    letter-spacing: 0.02em;
                    text-decoration: underline;
                    cursor: pointer;

                    .media-xs( {
                            font-size: 12px;
                        }

                    );
                }
            }

            &-image {
                position: relative;
                padding: 100px 5% 75px 5%;
                width: 45%;
                height: 100%;

                .media-xs( {
                        padding: 0px 5% 50px 5%;
                        width : 100%;
                    }

                );
            }

            &-content {
                padding: 100px 5% 75px 5%;
                width: 55%;
                height: 100%;
                background-color: @white;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                z-index: 3;

                .media-xs( {
                        padding: 50px 5% 50px 5%;
                        width : 100%;
                    }

                );

                &-info {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    &-title {
                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 22px;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 18px;
                            letter-spacing: 0.02em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 15px;
                                }

                            );
                        }
                    }
                }

                &-details {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    // border-top: 1px solid @dark;
                    // border-bottom: 1px solid @dark;
                    margin-bottom: 100px;

                    .media-xs( {
                            margin-bottom: 50px;
                        }

                    );

                    &-wrap {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        border-bottom: 1px solid @dark;
                        padding: 15px 0;

                        // &:nth-last-child(1) {
                        //     border-bottom: none;
                        // }
                        &-name {
                            width: 35%;

                            p {
                                .font-body2;
                                color: @dark;
                                font-size: 16px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 13px;
                                    }

                                );
                            }
                        }

                        &-desc {
                            width: 65%;
                            text-align: left;

                            p {
                                .font-title3;
                                color: @dark;
                                font-size: 16px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 13px;
                                    }

                                );
                            }

                            select {
                                width: 100%;
                                appearance: none;
                                -webkit-appearance: none;
                                cursor: pointer;

                                // Typography (Mengambil style yang mirip dengan <p> diatas)
                                .font-title3;
                                font-size: 16px; // Mencegah zoom di iOS
                                color: @dark;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                // Box Model
                                background-color: transparent;
                                border: 1px solid fade(@dark, 30%); // Border halus turunan warna @dark
                                border-radius: 4px;
                                padding: 8px 12px;
                                padding-right: 35px; // Space untuk panah

                                // Custom Chevron (Panah)
                                // Menggunakan SVG minimalis warna hitam/gelap
                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                                background-repeat: no-repeat;
                                background-position: right 10px center;
                                background-size: 16px;

                                transition: border-color 0.3s ease;

                                &:focus {
                                    outline: none;
                                    border-color: @dark; // Border lebih tegas saat aktif
                                }

                                // Responsive
                                .media-xs( {
                                        font-size : 13px;
                                        padding : 6px 10px;
                                        padding-right : 30px;
                                        background-size: 14px;
                                    }

                                );
                            }
                        }
                    }
                }

                &-result {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    &-desc {
                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 18px;
                            letter-spacing: 0.02em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 13px;
                                }

                            );
                        }
                    }

                    &-amount {
                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-align: right;
                            text-transform: uppercase;

                            .media-xs( {
                                    font-size: 20px;
                                }

                            );
                        }
                    }
                }

                &-button {
                    // width: 40%;
                    width: 250px;
                    padding: 20px 25px;
                    background-color: @dark;
                    border-radius: 7px;
                    cursor: pointer;

                    .media-xs( {
                            border-radius: 5px;
                            width : 170px;
                        }

                    );

                    p {
                        .font-title1;
                        color: @white;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: center;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 14px;
                            }

                        );
                    }
                }
            }
        }
    }
}

.dv-details-L2-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .details {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .media-xs( {
                    flex-direction : column;
                    align-items : flex-start;
                    justify-content: center;
                }

            );

            &:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 0;
                left: 0;
                width: 45%;
                background-color: @lwhite;
                pointer-events: none;

                .media-xs( {
                        display: none;
                    }

                );
            }

            &:after {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 0;
                right: 0;
                width: 55%;
                background-color: @white;
                pointer-events: none;

                .media-xs( {
                        display: none;
                    }

                );
            }

            &-back {
                position: absolute;
                top: 0;
                right: 0;
                width: 55%;
                padding: 115px 5% 30px 5%;
                z-index: 6;

                .media-xs( {
                        position: relative;
                        width : 100%;
                        padding : 100px 5% 15px 5%;
                    }

                );

                p {
                    .font-body1;
                    color: @dark;
                    font-size: 18px;
                    letter-spacing: 0.02em;
                    text-decoration: underline;
                    cursor: pointer;

                    .media-xs( {
                            font-size: 12px;
                        }

                    );
                }
            }

            &-image {
                position: relative;
                padding: 100px 5% 75px 5%;
                width: 45%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                .media-xs( {
                        /* padding: 0px 5% 50px 5%; */
                        padding: 0;
                        width : 100%;
                    }

                );

                .product-preview {
                    /* position: relative; */
                    position: fixed;
                    top: 50%;
                    transform: translateY(-50%);
                    // width: 260px;
                    // height: 360px;
                    /* width : 100%; */
                    width: 35%;
                    height: 55vw;

                    .media-xs( {
                            position : relative;
                            top : auto;
                            transform: none;
                            height : 70vh;
                            width : 100%;

                        }

                    );

                    .layer {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background-size: cover;
                        background-position: center;
                        pointer-events: none;

                        &.layer-box {
                            z-index: 3;

                            &.box-none {
                                display: none;
                            }

                            &.box-show {
                                // width: 260px;
                                // height: 360px;
                                /* width: 100%;
                                height: 100%;
                                background-size: cover; */
                                width: 100%;
                                height: 65%;
                                background-size: contain;
                                background-repeat: no-repeat;
                                margin-top: 50px;

                                .media-xs( {
                                        margin-top: 0;
                                    }

                                );
                            }
                        }

                        &.layer-product {
                            z-index: 4;

                            &.acrylic-card {
                                // width: 200px;
                                // height: 320px;
                                /* width: 40%;
                                height: 40%; */
                                width: 30%;
                                height: 30%;
                                border-radius: 10px;
                                margin-top: 50px;

                                // background-image: url("../../images/design-01.jpeg?v=3");
                                .media-xs( {
                                        margin-top: 0;
                                    }

                                );
                            }

                            &.acrylic-magnet {
                                // width: 200px;
                                // height: 200px;
                                /* width: 40%;
                                height: 25%; */
                                /* width: 30%;
                                height: 18%; */
                                width: 20%;
                                height: 13%;
                                border-radius: 10px;
                                margin-top: 50px;

                                background: rgba(255, 255, 255, 0.35);
                                backdrop-filter: blur(10px);
                                -webkit-backdrop-filter: blur(10px);

                                border: 1px solid rgba(255, 255, 255, 0.6);

                                box-shadow:
                                    0 10px 30px rgba(0, 0, 0, 0.15),
                                    // shadow utama (angkat)
                                    inset 0 1px 1px rgba(255,
                                        255,
                                        255,
                                        0.6); // highlight kaca

                                .media-xs( {
                                        margin-top: 0;
                                    }

                                );
                            }

                            &.custom-acrylic-magnet {
                                // width: 200px;
                                // height: 200px;
                                /* width: 40%;
                                height: 25%; */
                                /* width: 30%;
                                height: 18%; */
                                width: 40%;
                                height: 25%;
                                border-radius: 10px;
                                margin-top: 50px;

                                // background-image: url("../../images/design-01.jpeg?v=3");
                                .media-xs( {
                                        width : 130px;
                                        height : 130px;
                                        margin-top: 0;
                                    }

                                );

                                .media-xxs( {}

                                );
                            }
                        }

                        &.layer-gold {
                            z-index: 5;
                            // background-color: gold;
                            // width: inherit;
                            // height: inherit;

                            position: absolute;
                            top: 40%;
                            left: 50%;
                            transform: translateX(-50%);
                            margin-top: 50px;

                            .media-xs( {
                                    margin-top: 0;
                                }

                            );
                            // &.gold-bulat {
                            //     border-radius: 100%;
                            // }

                            // &.gold-kotak {
                            //     border-radius: 10px;
                            // }
                            &.gold-0-05 {
                                // 0.05
                                width: 0.3%;
                                height: 0.2%;
                            }

                            &.gold-0-1 {
                                // 0.1
                                width: 0.6%;
                                height: 0.4%;
                            }

                            &.gold-0-25 {
                                // 0.25
                                width: 1.5%;
                                height: 1%;
                            }

                            &.gold-0-5 {
                                // width: 30px;
                                // height: 30px;
                                // width: 6%;
                                // height: 4%;
                                width: 3%;
                                height: 2%;
                            }

                            &.gold-0-8 {
                                // 0.8
                                width: 4.8%;
                                height: 3.2%;
                            }

                            &.gold-1 {
                                // width: 35px;
                                // height: 35px;
                                // width: 9%;
                                // height: 6%;
                                // width: 6%;
                                // height: 4%;

                                width: 5%;
                                height: 3%;
                            }

                            &.gold-2 {
                                // width: 40px;
                                // height: 40px;
                                // width: 11%;
                                // height: 7%;
                                width: 6%;
                                height: 4%;
                            }

                            &.gold-3 {
                                // width: 45px;
                                // height: 45px;
                                // width: 12%;
                                // height: 8%;
                                width: 8%;
                                height: 5%;
                            }

                            &.gold-5 {
                                // width: 55px;
                                // height: 55px;
                                // width: 16%;
                                // height: 10%;

                                width: 9%;
                                height: 6%;
                            }

                            &.gold-10 {
                                // width: 70px;
                                // height: 70px;
                                // width: 19%;
                                // height: 12%;

                                width: 12%;
                                height: 8%;
                            }
                        }

                        &.layer-gold-design {
                            z-index: 6;
                            // width: 100%;
                            // height: 100%;
                            width: inherit;
                            height: inherit;
                            pointer-events: none;
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position: center;

                            // width: 40px;
                            // height: 40px;

                            position: absolute;
                            top: 40%;
                            left: 50%;
                            transform: translateX(-50%);
                            margin-top: 50px;

                            .media-xs( {
                                    margin-top: 0;
                                }

                            );

                            &.gold-0-05 {
                                // 0.05
                                width: 0.3%;
                                height: 0.2%;
                            }

                            &.gold-0-1 {
                                // 0.1
                                width: 0.6%;
                                height: 0.4%;
                            }

                            &.gold-0-25 {
                                // 0.25
                                width: 1.5%;
                                height: 1%;
                            }

                            &.gold-0-5 {
                                // width: 30px;
                                // height: 30px;
                                // width: 6%;
                                // height: 4%;
                                width: 3%;
                                height: 2%;
                            }

                            &.gold-0-8 {
                                // 0.8
                                width: 4.8%;
                                height: 3.2%;
                            }

                            &.gold-1 {
                                // width: 35px;
                                // height: 35px;
                                // width: 9%;
                                // height: 6%;
                                // width: 6%;
                                // height: 4%;

                                width: 5%;
                                height: 3%;
                            }

                            &.gold-2 {
                                // width: 40px;
                                // height: 40px;
                                // width: 11%;
                                // height: 7%;
                                width: 6%;
                                height: 4%;
                            }

                            &.gold-3 {
                                // width: 45px;
                                // height: 45px;
                                // width: 12%;
                                // height: 8%;
                                width: 8%;
                                height: 5%;
                            }

                            &.gold-5 {
                                // width: 55px;
                                // height: 55px;
                                // width: 16%;
                                // height: 10%;

                                width: 9%;
                                height: 6%;
                            }

                            &.gold-10 {
                                // width: 70px;
                                // height: 70px;
                                // width: 19%;
                                // height: 12%;

                                width: 12%;
                                height: 8%;
                            }

                            &.design-tulisan {
                                background-image: url("../../images/desainemas-tulisan.png");
                            }

                            &.design-gambar {
                                background-image: url("../../images/desainemas-gambar.png");
                            }

                            &.design-none {
                                display: none;
                            }
                        }
                    }
                }
            }

            &-content {
                padding: 165px 5% 75px 5%;
                width: 55%;
                height: 100%;
                background-color: @white;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                z-index: 5;

                .media-xs( {
                        padding: 50px 5% 50px 5%;
                        width : 100%;
                    }

                );

                &-info {
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    &.bottom {
                        margin-bottom: 100px;

                        .media-xs( {
                                margin-bottom: 50px;
                            }

                        );
                    }

                    &-title {
                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 22px;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        &.bottom {
                            p {
                                color: @dgray;
                                font-size: 14px;
                                text-transform: none;

                                .media-xs( {
                                        font-size: 12px;
                                    }

                                );
                            }
                        }

                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 18px;
                            letter-spacing: 0.02em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 15px;
                                }

                            );
                        }
                    }
                }

                &-details {
                    position: relative;
                    z-index: 5;
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    // margin-bottom: 20px;
                    // .media-xs({
                    //     margin-bottom: 50px;
                    // });
                    .media-xs( {
                            display: none;
                        }

                    );

                    form {
                        margin-top: 15px;

                        .group {
                            margin-bottom: 30px;

                            .media-xs( {
                                    margin-bottom: 20px;
                                }

                            );

                            label {
                                margin-bottom: 10px;
                                .font-body2;
                                font-size: 16px;
                                letter-spacing: 0.02em;
                                color: @dark;
                                margin-bottom: 10px;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }

                            .custom-select {
                                position: relative;
                                width: 100%;
                                margin-top: 10px;
                                pointer-events: auto;

                                .media-xs( {
                                        margin-top: 5px;
                                    }

                                );

                                &.open {
                                    .custom-select-trigger::after {
                                        transform: translateY(-50%) rotate(180deg);
                                    }

                                    .custom-options {
                                        display: block;
                                    }
                                }

                                &-trigger {
                                    .font-body2;
                                    color: @dgray;
                                    text-transform: capitalize;
                                    border: 1px solid @dgray;
                                    border-radius: 7px;
                                    font-size: 16px;
                                    padding: 20px;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    background: transparent;
                                    cursor: pointer;

                                    .media-xs( {
                                            font-size : 12px;
                                            border-radius: 5px;
                                        }

                                    );

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        right: 20px;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        width: 20px;
                                        height: 20px;

                                        background: url("../../images/dropdown-03.svg?v=3");
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-size: contain;

                                        pointer-events: none; // biar klik tetap ke trigger
                                        transition: transform 0.25s ease;
                                    }

                                    img {
                                        width: 20px;
                                        height: auto;

                                        .media-xs( {
                                                width: 16px;
                                            }

                                        );
                                    }

                                    span {
                                        &.suffix {
                                            .font-title3;
                                            font-size: 16px;
                                            color: @white;
                                            text-transform: lowercase;

                                            .media-xs( {
                                                    font-size: 12px;
                                                }

                                            );
                                        }
                                    }
                                }

                                .custom-options {
                                    position: absolute;
                                    z-index: 6;
                                    width: 100%;
                                    top: 100%;
                                    background: rgba(23, 67, 68, 0.8);
                                    backdrop-filter: blur(12px);
                                    -webkit-backdrop-filter: blur(12px);
                                    border: 1px solid rgba(23, 67, 68, 0.2);
                                    border-radius: 10px;
                                    display: none;
                                    z-index: 10;

                                    max-height: 240px;
                                    overflow-y: auto;
                                    overflow-x: hidden;

                                    &::-webkit-scrollbar {
                                        width: 6px;
                                    }

                                    &::-webkit-scrollbar-thumb {
                                        background: rgba(255, 255, 255, 0.3);
                                        border-radius: 10px;
                                    }

                                    .media-xs( {
                                            max-height: 160px;
                                        }

                                    );

                                    .custom-option {
                                        padding: 12px;
                                        .font-body2;
                                        color: @white;
                                        text-transform: capitalize;
                                        font-size: 16px;
                                        cursor: pointer;

                                        // border: 1px solid @dgray;
                                        background: transparent;
                                        transition: all 0.25s ease;

                                        .media-xs( {
                                                font-size: 12px;
                                            }

                                        );

                                        &:hover {
                                            background: @brown;
                                            border-radius: 10px;
                                        }
                                    }
                                }
                            }

                            .image-options {
                                position: relative;
                                z-index: 6;
                                display: flex;
                                flex-wrap: wrap;
                                gap: 15px;
                                margin-top: 10px;
                                pointer-events: auto;

                                .media-xs( {
                                        margin-top: 5px;
                                    }

                                );

                                .image-option {
                                    width: 120px;
                                    height: 120px;
                                    background-size: cover;
                                    background-position: center;
                                    border-radius: 7px;
                                    border: 2px solid @dgray;
                                    cursor: pointer;
                                    transition: all 0.3s ease;
                                    position: relative;

                                    &:hover {
                                        border-color: @brown;
                                    }

                                    &.active {
                                        border-color: @brown;
                                    }

                                    &.none {
                                        background-color: @lgray;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        .font-body2;
                                        color: @dark;
                                        text-transform: capitalize;
                                    }

                                    .media-xs( {
                                            width : 90px;
                                            height : 90px;
                                            border-radius: 5px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }

                .custom-emas-trigger {
                    display: none;

                    .media-xs( {
                            display : block;
                            margin-bottom: 15px;

                            button {
                                padding : 20px 25px;
                                background-color: @dark;
                                cursor : pointer;
                                width : 170px;
                                border-radius : 5px;
                                font-size : 14px;
                                .font-title2;
                                color: @dwhite;
                            }
                        }

                    );
                }

                &-result {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 30px;

                    .media-xs( {
                            margin-bottom: 15px;
                        }

                    );

                    &-desc {
                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 18px;
                            letter-spacing: 0.02em;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 13px;
                                }

                            );
                        }
                    }

                    &-amount {
                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-align: right;
                            text-transform: uppercase;

                            .media-xs( {
                                    font-size: 20px;
                                }

                            );
                        }
                    }
                }

                &-button {
                    width: 250px;
                    padding: 20px 25px;
                    background-color: @dark;
                    border-radius: 7px;
                    cursor: pointer;

                    .media-xs( {
                            width : 170px;
                            border-radius: 5px;
                        }

                    );

                    p {
                        .font-title1;
                        color: @white;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: center;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 14px;
                            }

                        );
                    }
                }
            }
        }
    }
}

&.bottom-sheet {
    position: fixed;
    z-index: 3;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 50vh;
    background: @white;
    border-radius: 16px 16px 0 0;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    transition:
        top 0.3s ease,
        max-height 0.3s ease,
        transform 0.3s ease;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);

    &.full {
        bottom: 0;
        max-height: 90vh;
        border-radius: 0;
        /* height    : 100vh; */
    }

    &.hidden {
        transform: translateY(100%);
    }

    .bottom-sheet-handle {
        width: 50px;
        height: 5px;
        background: @dgray;
        border-radius: 10px;
        margin: 20px auto;
        cursor: grab;
    }

    .bottom-sheet-content {
        flex: 1;
        overflow-y: auto;
        padding: 0 5% 20px 5%;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        form {
            margin-top: 15px;

            .group {
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 20px;
                    }

                );

                label {
                    margin-bottom: 10px;
                    .font-body2;
                    font-size: 16px;
                    letter-spacing: 0.02em;
                    color: @dark;
                    margin-bottom: 10px;
                    text-transform: capitalize;

                    .media-xs( {
                            font-size: 14px;
                        }

                    );
                }

                .custom-select {
                    position: relative;
                    width: 100%;
                    margin-top: 10px;
                    pointer-events: auto;

                    .media-xs( {
                            margin-top: 5px;
                        }

                    );

                    &.open {
                        .custom-select-trigger::after {
                            transform: translateY(-50%) rotate(180deg);
                        }

                        .custom-options {
                            display: block;
                        }
                    }

                    &-trigger {
                        .font-body2;
                        color: @dgray;
                        text-transform: capitalize;
                        border: 1px solid @dgray;
                        border-radius: 7px;
                        font-size: 16px;
                        padding: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: transparent;
                        cursor: pointer;

                        .media-xs( {
                                font-size : 12px;
                                border-radius: 5px;
                            }

                        );

                        &::after {
                            content: "";
                            position: absolute;
                            right: 20px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 20px;
                            height: 20px;

                            background: url("../../images/dropdown-03.svg?v=3");
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: contain;

                            pointer-events: none; // biar klik tetap ke trigger
                            transition: transform 0.25s ease;
                        }

                        img {
                            width: 20px;
                            height: auto;

                            .media-xs( {
                                    width: 16px;
                                }

                            );
                        }

                        span {
                            &.suffix {
                                .font-title3;
                                font-size: 16px;
                                color: @white;
                                text-transform: lowercase;

                                .media-xs( {
                                        font-size: 12px;
                                    }

                                );
                            }
                        }
                    }

                    .custom-options {
                        position: absolute;
                        z-index: 6;
                        width: 100%;
                        top: 100%;
                        background: rgba(23, 67, 68, 0.8);
                        backdrop-filter: blur(12px);
                        -webkit-backdrop-filter: blur(12px);
                        border: 1px solid rgba(23, 67, 68, 0.2);
                        border-radius: 10px;
                        display: none;
                        z-index: 10;

                        .custom-option {
                            padding: 12px;
                            .font-body2;
                            color: @white;
                            text-transform: capitalize;
                            font-size: 16px;
                            cursor: pointer;

                            // border: 1px solid @dgray;
                            background: transparent;
                            transition: all 0.25s ease;

                            .media-xs( {
                                    font-size: 12px;
                                }

                            );

                            &:hover {
                                background: @brown;
                                border-radius: 10px;
                            }
                        }
                    }
                }

                .image-options {
                    position: relative;
                    z-index: 6;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 15px;
                    margin-top: 10px;
                    pointer-events: auto;

                    .media-xs( {
                            margin-top: 5px;
                        }

                    );

                    .image-option {
                        width: 120px;
                        height: 120px;
                        background-size: cover;
                        background-position: center;
                        border-radius: 7px;
                        border: 2px solid @dgray;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        position: relative;

                        &:hover {
                            border-color: @brown;
                        }

                        &.active {
                            border-color: @brown;
                        }

                        &.none {
                            background-color: @lgray;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .font-body2;
                            color: @dark;
                            text-transform: capitalize;
                        }

                        .media-xs( {
                                width : 90px;
                                height : 90px;
                                border-radius: 5px;
                            }

                        );
                    }
                }
            }
        }
    }

    .bottom-sheet-footer {
        padding: 20px 5%;
        background: @white;
        display: flex;
        justify-content: flex-start;
    }

    .btn-preview {
        background: @button;
        color: @white;
        border: none;
        border-radius: 5px;
        padding: 15px 16px;
        font-size: 14px;
        cursor: pointer;
    }
}

.dv-slide {
    display: block;
    position: relative;
    z-index: 1;

    // overflow-x: hidden;
    // background-color: @float;
    .media-lg( {}

    );

    .media-md( {}

    );

    .media-sm( {}

    );

    .media-xs( {
            background-size: 300px;
        }

    );

    // .imgWrapper{
    // 	max-height: initial !important;
    // }
    .gallery {
        position: relative;

        // .imgWrapper{
        // 	max-height: initial !important;
        // 	box-shadow: none !important;
        // }
        &-wrap {
            padding-left: 0;
            width: 100%;

            &-list {
                display: block;
                cursor: pointer;
                margin-left: 50px;
                margin-right: 50px;

                img {
                    object-fit: contain;
                    object-position: center;
                    width: 100%;
                    height: 35vw;

                    .media-xs( {
                            height: 65vw;
                        }

                    );

                    .media-xxs( {
                            height: 80vw;
                        }

                    );
                }
            }
        }

        .slick-prev-custom {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            border: none !important;
            background: none !important;
            outline: none !important;
            z-index: 11;
            cursor: pointer;

            img {
                width: 40px;

                .media-xs( {
                        width: 30px;
                    }

                );
            }

            // .media-xs({
            // 	left: 0px;
            // });
        }

        .slick-next-custom {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            border: none !important;
            background: none !important;
            outline: none !important;
            z-index: 11;
            cursor: pointer;

            img {
                width: 40px;

                .media-xs( {
                        width: 30px;
                    }

                );
            }

            // .media-xs({
            // 	right: 0px;
            // });
        }

        .slick-dots {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            display: flex !important;
            flex-direction: row;
            gap: 12px;
            width: auto;
        }

        .slick-dots li {
            width: 12px;
            height: 12px;
            margin: 0;
        }

        .slick-dots li button {
            width: 12px;
            height: 12px;
            padding: 0;
            border-radius: 50%;
            border: 1.5px solid @dark;
            background: transparent;
            opacity: 1;

            &::before {
                display: none;
            }
        }

        .slick-dots li.slick-active button {
            background-color: @dark;
            border-color: @dark;
        }
    }
}

.dv-modal-gallery {
    .lightbox {
        position: fixed;
        z-index: 9999;
        display: none !important;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        text-align: center;

        &.active {
            display: flex !important;
        }

        .lightbox-inner {
            position: relative;
            // display: inline-block;
            display: flex;
            margin-left: auto;
            margin-right: auto;
            justify-content: center;
            align-items: center;
            width: 30%;

            .media-xs( {
                    margin: 0 30px;
                }

            );

            .lightbox-content {
                position: relative;
                object-fit: cover;
                animation: fadeIn 0.3s;
                display: block;
                // max-height: 90vh;
                max-height: 65vh;
                margin-top: 0 !important;

                .media-xxs( {
                        width: 100%;
                    }

                );
            }

            .close-button,
            .prev-button,
            .next-button {
                position: absolute;
                z-index: 10000;
                cursor: pointer;

                img {
                    width: 35px;
                    opacity: 1;
                }

                &:hover img {
                    opacity: 0.5;
                }
            }

            .prev-button {
                left: -40px;
                top: 50%;
                transform: translateY(-50%);
            }

            .next-button {
                right: -40px;
                top: 50%;
                transform: translateY(-50%);
            }

            .close-button {
                top: -5%;
                right: -40px;
            }
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

.dv-price-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .price {
        position: relative;
        background-color: @white;

        &:before {
            content: "";
            position: absolute;
            z-index: 0;
            width: 100%;
            height: 30%;
            top: 0;
            left: 0;
            background-color: @brown;

            .media-sm( {
                    height: 18%;
                }

            );

            .media-xs( {
                    height: 18%;
                }

            );
        }

        &::after {
            content: "";
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 30%;
            top: 0;
            left: 0;
            background-image: url("../../images/texture-04.png?v=3");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            mix-blend-mode: color-burn;
        }

        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 3;
            padding: 75px 5% 75px 5%;
            display: flex;
            flex-direction: column;
            gap: 70px;

            .media-sm( {
                    gap: 20px;
                }

            );

            .media-xs( {
                    /* padding: 100px 5% 50px 5%; */
                    padding: 50px 5% 50px 5%;
                    gap : 20px;
                }

            );

            &-content {
                position: relative;
                width: 100%;

                &-info {
                    position: relative;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 30px;

                    .media-xs( {
                            flex-direction: column;
                            margin-bottom : 20px;
                        }

                    );

                    &-title {
                        width: 35%;

                        .media-xs( {
                                width : 100%;
                                margin-bottom: 20px;
                            }

                        );

                        p {
                            .font-title2;
                            color: @white;
                            font-size: 32px;
                            letter-spacing: 0.04em;

                            .media-xs( {
                                    font-size : 20px;
                                    text-align: center;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        width: 40%;

                        .media-xs( {
                                width: 70%;
                            }

                        );

                        p {
                            .font-body1;
                            color: @white;
                            font-size: 20px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size : 12px;
                                    text-align: center;
                                }

                            );
                        }
                    }
                }

                &-choices {
                    position: relative;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .media-xs( {
                            display : grid;
                            grid-template-columns: 1fr 1fr;
                            grid-template-rows : 1fr 1fr;
                            gap : 10px;
                            height : 50vw;
                        }

                    );

                    &-wrap {
                        position: relative;
                        width: 32%;
                        height: 25vw;
                        gap: 50px;
                        overflow: hidden;
                        background-repeat: no-repeat;
                        background-size: cover;
                        border-radius: 12px;
                        cursor: pointer;

                        .media-xs( {
                                width : 100%;
                                height : 100%;
                                border-radius: 7px;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            background-image: inherit;
                            background-size: cover;
                            background-position: center;
                            transition: transform 0.5s ease;
                            z-index: 1;
                        }

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: 2;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            // background: linear-gradient(
                            //     180deg,
                            //     #8c6126 0%,
                            //     rgba(140, 97, 38, 0) 100%
                            // );
                            background: linear-gradient(180deg,
                                    rgba(140, 97, 38, 0.85) 0%,
                                    rgba(140, 97, 38, 0.6) 20%,
                                    rgba(140, 97, 38, 0) 60%);
                            transform: rotate(-180deg);
                            mix-blend-mode: multiply;
                        }

                        &:hover {
                            outline: 2px solid @dbrown;

                            &::before {
                                transform: scale(1.1);
                            }
                        }

                        &.is-active {
                            outline: 2px solid @dbrown;

                            &::before {
                                transform: scale(1);
                            }
                        }

                        &:nth-child(1) {
                            .media-xs( {
                                    grid-row : 1 / span 2;
                                    grid-column: 1 / 2;
                                }

                            );
                        }

                        &:nth-child(2) {
                            .media-xs( {
                                    grid-row : 1 / 2;
                                    grid-column: 2 / 3;
                                }

                            );
                        }

                        &:nth-child(3) {
                            .media-xs( {
                                    grid-row : 2 / 3;
                                    grid-column: 2 / 3;
                                }

                            );
                        }

                        &-desc {
                            position: absolute;
                            left: 50px;
                            bottom: 50px;
                            z-index: 3;
                            width: 50%;

                            .media-xs( {
                                    width : 55%;
                                    left : 15px;
                                    bottom: 15px;
                                }

                            );

                            p {
                                .font-title2;
                                color: @white;
                                font-size: 32px;
                                letter-spacing: 0.02em;

                                .media-sm( {
                                        font-size: 28px;
                                    }

                                );

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }
                    }
                }
            }

            &-table {
                width: 100%;
                height: 100%;

                &-info {
                    position: relative;
                    width: 100%;
                    display: none;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;

                    .media-xs( {
                            align-items: center;
                        }

                    );

                    &-top {
                        width: 100%;
                        position: relative;
                        display: flex;
                        align-items: flex-start;
                        justify-content: space-between;

                        .media-xs( {
                                flex-direction : column;
                                justify-content: flex-start;
                                align-items : flex-start;
                                gap : 20px;
                                margin-bottom : 20px;
                            }

                        );

                        &-title {
                            p {
                                .font-title1;
                                color: @dark;
                                font-size: 32px;
                                letter-spacing: 0.04em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 20px;
                                    }

                                );
                            }
                        }

                        &-desc {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            justify-content: center;
                            gap: 5px;

                            .media-xs( {
                                    align-items: flex-start;
                                }

                            );

                            &-date {
                                p {
                                    .font-title1;
                                    color: @dark;
                                    font-size: 32px;
                                    letter-spacing: 0.04em;
                                    text-align: right;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size : 17px;
                                            text-align: left;
                                        }

                                    );
                                }
                            }

                            &-subtitle {
                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 18px;
                                    letter-spacing: 0.02em;
                                    text-align: right;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size : 12px;
                                            text-align: left;
                                        }

                                    );
                                }
                            }
                        }
                    }

                    &.is-active {
                        display: flex;
                    }

                    &-mobile-nav {
                        position: relative;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 10px;

                        .nav-btn {
                            width: 25px;
                            height: 25px;
                            border: none;
                            background: transparent;
                            cursor: pointer;
                            flex-shrink: 0;
                            transition:
                                transform 0.3s ease,
                                opacity 0.3s ease;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }

                            &:hover {
                                opacity: 0.7;
                                transform: scale(1.12);
                            }

                            &:active {
                                transform: scale(0.95);
                            }
                        }
                    }

                    &-choices {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 20px;
                        /* overflow          : hidden; */
                        overflow-x: auto;
                        overflow-y: visible;
                        scroll-behavior: smooth;
                        padding: 5px;

                        &::-webkit-scrollbar {
                            display: none;
                        }

                        .media-xs( {
                                /* MODE SWIPE LAMA */
                                /* overflow-x                : auto;
                                scroll-snap-type          : x mandatory;
                                -webkit-overflow-scrolling: touch;
                                padding                   : 10px 0;

                                &::-webkit-scrollbar {
                                    display: none;
                                } */

                                width : 100%;
                                overflow : hidden;
                                justify-content: center;
                            }

                        );

                        &-wrap {
                            position: relative;
                            padding: 20px;
                            border: 2px solid @dgray;
                            border-radius: 7px;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            background-color: transparent;
                            flex-shrink: 0;

                            .media-xs( {
                                    /* SWIPE YANG LAMA */
                                    /* scroll-snap-align: center;
                                    min-width        : 70%;
                                    text-align       : center;
                                    padding          : 15px 0px;
                                    border-radius    : 5px; */

                                    /* display  : none; */
                                    min-width: auto;
                                    width : 100%;

                                    &:not(.is-active) {
                                        display: none;
                                    }

                                    &.is-active {
                                        display: flex;
                                    }
                                }

                            );

                            p {
                                .font-body3;
                                color: @dgray;
                                font-size: 16px;
                                margin-left: 15px;
                                text-align: center;

                                .media-xs( {
                                        font-size : 14px;
                                        margin-left: 0;
                                    }

                                );
                            }

                            &::before {
                                content: "●";
                                position: absolute;
                                left: 16px;
                                top: 50%;
                                transform: translateY(-50%);
                                font-size: 10px;
                                color: @dgray;
                                transition: all 0.3s ease;

                                .media-xs( {
                                        display: none;
                                    }

                                );
                            }

                            &:hover {
                                // border-color: @dark;
                                border: 3px solid @dark;
                                background-color: @dwhite;

                                &::before {
                                    content: "✓";
                                    font-size: 14px;
                                    color: @dark;
                                    .font-title1;

                                    .media-xs( {
                                            display: none;
                                        }

                                    );
                                }

                                p {
                                    .font-title1;
                                    color: @dark;
                                }
                            }

                            &.is-active {
                                // border-color: @dark;
                                border: 3px solid @dark;
                                background-color: @dwhite;

                                &::before {
                                    content: "✓";
                                    font-size: 14px;
                                    color: @dark;
                                    .font-title1;
                                }

                                p {
                                    .font-title1;
                                    color: @dark;
                                }

                                .media-xs( {
                                        display : flex;
                                        align-items : center;
                                        justify-content: center;
                                    }

                                );
                            }
                        }
                    }

                    &-content {
                        width: 100%;
                        margin: 30px 0;
                        display: flex;
                        align-items: flex-start;
                        justify-content: space-between;
                        gap: 50px;

                        .media-xs( {
                                display : flex;
                                justify-content : flex-start;
                                overflow-x : auto;
                                scroll-snap-type : x mandatory;
                                -webkit-overflow-scrolling: touch;
                                gap : 15px;
                                flex-wrap : nowrap;
                                scroll-behavior : smooth;
                                margin-bottom : 10px;
                            }

                        );

                        &::-webkit-scrollbar {
                            display: none;
                        }

                        &-wrap {
                            /* width: 32%; */
                            padding-bottom: 20px;
                            background-color: @lwhite;
                            border-radius: 10px;

                            width: 100%;
                            overflow-x: auto;
                            -webkit-overflow-scrolling: touch;

                            &::-webkit-scrollbar {
                                display: none;
                            }

                            &.dif {
                                overflow-x: hidden !important;
                                scroll-snap-align: start;

                                .media-xs( {
                                        min-width : 100%;
                                        flex : 0 0 100%;
                                        flex-shrink : 0;
                                        scroll-snap-align: start;
                                        border-radius : 7px;
                                    }

                                );

                                table {
                                    thead {
                                        th {
                                            &:first-child {
                                                position: static;
                                                left: auto;

                                                &::after {
                                                    display: none;
                                                }
                                            }
                                        }
                                    }

                                    tbody {
                                        td {
                                            &:first-child {
                                                position: static;
                                                left: auto;

                                                &::after {
                                                    display: none;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            .media-xs( {
                                    min-width : 100%;
                                    flex : 0 0 100%;
                                    scroll-snap-align: start;
                                    border-radius : 7px;
                                }

                            );

                            &.full {
                                width: 100%;
                            }

                            table {
                                /* width: 100%; */
                                border-collapse: collapse;
                                background-color: @lwhite;
                                border-radius: 10px;
                                /* overflow        : hidden; */

                                width: max-content;
                                min-width: 100%;
                                border-collapse: collapse;
                            }

                            thead {
                                background-color: @dark;

                                tr {
                                    position: relative;

                                    /* &:after {
                                        content         : "";
                                        position        : absolute;
                                        left            : 20px;
                                        right           : 20px;
                                        bottom          : 0;
                                        height          : 1px;
                                        background-color: @dark;
                                    } */
                                }

                                th {
                                    .font-title1;
                                    color: @white;
                                    font-size: 18px;
                                    letter-spacing: 0.02em;
                                    padding: 20px;
                                    text-align: center;
                                    border-bottom: 1px solid @dark;

                                    /* width: calc(100% / 7); */
                                    min-width: 140px;

                                    &:first-child {
                                        position: sticky;
                                        left: 0;
                                        background-color: @dark;
                                        border-bottom: 1px solid @dark;
                                        z-index: 3;

                                        &::after {
                                            content: "";
                                            position: absolute;
                                            top: 0;
                                            right: 0;
                                            width: 5px;
                                            height: 100%;
                                            background: linear-gradient(to right,
                                                    rgba(0, 0, 0, 0.12),
                                                    rgba(0, 0, 0, 0));
                                            pointer-events: none;
                                        }
                                    }

                                    .media-xs( {
                                            /*  width: calc(100% / 4); */
                                            min-width: 120px;
                                        }

                                    );

                                    .media-xxs( {
                                            /* width: calc(100% / 3); */
                                            min-width: 110px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 14px;
                                            padding : 12px;
                                        }

                                    );
                                }
                            }

                            tbody {
                                tr {
                                    position: relative;

                                    /* &:after {
                                        content         : "";
                                        position        : absolute;
                                        left            : 20px;
                                        right           : 20px;
                                        bottom          : 0;
                                        height          : 1px;
                                        background-color: @dark;
                                    } */
                                }

                                td {
                                    .font-title3;
                                    color: @dark;
                                    font-size: 16px;
                                    letter-spacing: 0.02em;
                                    padding: 20px;
                                    text-align: center;
                                    border-bottom: 1px solid @dark;

                                    /* width: calc(100% / 7); */
                                    min-width: 140px;

                                    &:first-child {
                                        position: sticky;
                                        left: 0;
                                        background-color: @lwhite;
                                        border-bottom: 1px solid @dark;
                                        z-index: 3;

                                        &::after {
                                            content: "";
                                            position: absolute;
                                            top: 0;
                                            right: 0;
                                            width: 5px;
                                            height: 100%;
                                            background: linear-gradient(to right,
                                                    rgba(0, 0, 0, 0.12),
                                                    rgba(0, 0, 0, 0));
                                            pointer-events: none;
                                        }
                                    }

                                    .media-xs( {
                                            /* width: calc(100% / 4); */
                                            min-width: 120px;
                                        }

                                    );

                                    .media-xxs( {
                                            /* width: calc(100% / 3); */
                                            min-width: 110px;
                                        }

                                    );

                                    /* &:nth-child(even) {
                                        background-color: #ebebeb;
                                    } */

                                    &:nth-child(even):not(:first-child) {
                                        background-color: #ebebeb;
                                    }

                                    .media-xs( {
                                            font-size: 13px;
                                            padding : 10px 12px;
                                        }

                                    );
                                }
                            }
                        }
                    }

                    &-dots {
                        display: flex;
                        justify-content: center;
                        gap: 10px;
                        margin: 10px auto;

                        .media-xs( {
                                margin-bottom: 20px;
                            }

                        );

                        .dot {
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            border: 1.5px solid @dark;
                            background-color: transparent;
                            transition: all 0.3s ease;
                            cursor: pointer;
                            display: none;

                            &.is-visible {
                                display: block;
                            }

                            &.is-active {
                                display: block;
                                background-color: @dark;
                            }
                        }
                    }

                    &-subtitle {
                        width: 80%;

                        .media-xs( {
                                width: 100%;
                            }

                        );

                        p {
                            .font-body1;
                            color: @dark;
                            font-size: 20px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 11px;
                                }

                            );
                        }
                    }
                }
            }
        }
    }
}

/* ABOUT US PAGE */
.dv-opening-L3-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 75px 5% 75px 5%;

    .media-xs( {
            padding: 50px 5% 50px 5%;
        }

    );

    .opening {
        &-area {
            width: 100%;
            display: flex;
            align-items: stretch;
            justify-content: space-between;

            .media-xs( {
                    flex-direction: column;
                    gap : 20px;
                }

            );

            &-left {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                gap: 30px;

                .media-xs( {
                        gap: 15px;
                    }

                );

                &-title {
                    width: 60%;

                    .media-xs( {
                            width: 100%;
                        }

                    );

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 48px;
                        letter-spacing: 0.04em;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );
                    }
                }

                &-subtitle {
                    width: 60%;

                    .media-xs( {
                            width: 100%;
                        }

                    );

                    p {
                        .font-body1;
                        color: @dark;
                        font-size: 20px;
                        letter-spacing: 0.02em;
                        text-align: justify;

                        .media-xs( {
                                font-size: 11px;
                            }

                        );
                    }
                }
            }

            &-right {
                display: grid;
                grid-template-rows: repeat(2, auto);
                grid-auto-flow: column;
                gap: 50px 100px;

                .media-xs( {
                        gap: 25px 50px;
                    }

                );

                &-wrap {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;

                    &-title {
                        p {
                            .font-title1;
                            color: @dark;
                            font-size: 48px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 34px;
                                }

                            );
                        }

                        span {
                            .font-title1;
                            color: @dark;
                            font-size: 48px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 34px;
                                }

                            );
                        }

                        .rolling-number {
                            display: inline-block;
                            font-size: 48px;
                            font-weight: 700;
                            line-height: 1;
                            overflow: hidden;

                            .media-xs( {
                                    font-size: 34px;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        p {
                            .font-body2;
                            color: @dark;
                            font-size: 20px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 12px;
                                }

                            );
                        }
                    }
                }
            }
        }
    }
}

.dv-gallery-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;

    .gallery {
        &-area {
            position: relative;
            width: 100%;

            &-top {
                position: relative;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;

                .media-sm( {
                        grid-template-columns: 1fr 1fr;
                    }

                );

                .media-xs( {
                        grid-template-columns: 1fr 1fr;
                    }

                );

                &-wrap {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    background-repeat: no-repeat;
                    background-size: cover;

                    &.col-1 {
                        display: flex;
                        flex-direction: column;
                    }

                    &.col-3 {
                        .media-sm( {
                                display: none;
                            }

                        );

                        .media-xs( {
                                display: none;
                            }

                        );
                    }

                    &-image {
                        background-repeat: no-repeat;
                        background-size: cover;

                        &.col-1 {
                            height: 25vw;
                        }
                    }

                    &-desc {
                        background-color: @button;
                        padding: 50px 70px;

                        .media-sm( {
                                padding: 50px 10%;
                            }

                        );

                        .media-xs( {
                                padding: 25px 10%;
                            }

                        );

                        p {
                            .font-body1;
                            color: @white;
                            font-size: 18px;
                            letter-spacing: 0.07em;
                            text-align: justify;

                            .media-xs( {
                                    font-size: 11px;
                                }

                            );
                        }
                    }
                }
            }

            &-bottom {
                position: relative;
                display: flex;
                width: 100%;
                height: 50vw;

                .media-sm( {
                        height : 100%;
                        flex-direction: column;
                    }

                );

                .media-xs( {
                        height : 100%;
                        flex-direction: column;
                    }

                );

                &-desc {
                    position: relative;
                    width: 50%;
                    padding: 20px 5%;
                    background-color: @dark;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .media-sm( {
                            width : 100%;
                            padding: 50px 5%;
                        }

                    );

                    .media-xs( {
                            width : 100%;
                            padding: 25px 5%;
                        }

                    );

                    &-title {
                        margin-bottom: 70px;

                        .media-xs( {
                                margin-bottom: 20px;
                            }

                        );

                        p {
                            .font-body3;
                            color: @white;
                            font-size: 35px;
                            letter-spacing: 0.04em;

                            .media-xs( {
                                    font-size: 16px;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        p {
                            .font-body2;
                            color: @white;
                            font-size: 18px;
                            letter-spacing: 0.07em;
                            text-align: justify;

                            .media-xs( {
                                    font-size: 12px;
                                }

                            );
                        }
                    }
                }

                &-image {
                    position: relative;
                    width: 50%;
                    overflow: hidden;
                    background-repeat: no-repeat;
                    background-size: cover;

                    .media-sm( {
                            width : 100%;
                            height: 70vw;
                        }

                    );

                    .media-xs( {
                            width : 100%;
                            height: 65vw;
                        }

                    );
                }
            }
        }
    }
}

.dv-visionmission-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @lwhite;

    .visionmission {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 100px;

            .media-xs( {
                    flex-direction: column;
                    gap : 30px;
                }

            );

            &-info {
                width: 20%;

                .media-xs( {
                        width: 100%;
                    }

                );

                p {
                    .font-title1;
                    color: @dark;
                    font-size: 48px;
                    letter-spacing: 0.04em;
                    text-transform: capitalize;

                    .media-xs( {
                            font-size: 23px;
                        }

                    );
                }
            }

            &-content {
                width: 80%;
                /* display           : flex;
                justify-content      : space-between;
                align-items          : stretch; */
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;

                .media-xs( {
                        /* flex-direction: column; */
                        grid-template-columns: 1fr;
                        width : 100%;
                    }

                );

                &-wrap {
                    /* width: 50%; */
                    width: 100%;
                    height: 100%;
                    /* display        : flex;
                    flex-direction    : column;
                    align-items       : stretch; */
                    display: grid;
                    grid-template-rows: 1fr auto;
                    // align-items: center;
                    border-radius: 10px;
                    overflow: hidden;

                    .media-xs( {
                            width : 100%;
                            border-radius: 7px;
                        }

                    );

                    &-desc {
                        flex: 1;
                        width: 100%;
                        height: 100%;
                        padding: 30px;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: space-between;
                        gap: 20px;
                        background-color: @white;

                        &-logo {
                            img {
                                width: 40px;
                            }
                        }

                        &-title {
                            p {
                                .font-title2;
                                color: @dark;
                                font-size: 36px;
                                letter-spacing: 0.04em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 27px;
                                    }

                                );
                            }
                        }

                        &-list {
                            counter-reset: item;
                            list-style: none;
                            padding: 0;
                            margin: 0;

                            li {
                                counter-increment: item;
                                position: relative;
                                padding-left: 40px;
                                margin-bottom: 15px;

                                .font-body1;
                                color: @dark;
                                font-size: 18px;
                                letter-spacing: 0.07em;
                                text-align: justify;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );

                                &:before {
                                    content: counter(item) ".";
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    width: 28px;
                                    height: 28px;
                                    border-radius: 50%;
                                    .font-body1;
                                    color: @dark;
                                    font-size: 18px;
                                    letter-spacing: 0.07em;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    .media-xs( {
                                            font-size: 14px;
                                        }

                                    );
                                }
                            }
                        }
                    }

                    &-image {
                        width: 100%;
                        height: 15vw;
                        overflow: hidden;
                        background-repeat: no-repeat;
                        background-size: cover;

                        .media-xs( {
                                height: 45vw;
                            }

                        );
                    }
                }
            }
        }
    }
}

.dv-advantage-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;

    .advantage {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            &-title {
                position: relative;
                width: 100%;
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 20px;
                    }

                );

                p {
                    .font-title1;
                    color: @dark;
                    font-size: 32px;
                    letter-spacing: 0.04em;
                    text-align: center;

                    .media-xs( {
                            font-size: 20px;
                        }

                    );
                }
            }

            &-content {
                position: relative;
                width: 100%;
                display: flex;
                align-items: stretch;
                justify-content: space-between;
                gap: 30px;

                .media-xs( {
                        flex-direction: column;
                        gap : 20px;
                    }

                );

                &-wrap {
                    position: relative;
                    width: 33%;
                    border-radius: 10px;
                    overflow: hidden;
                    z-index: 3;
                    padding: 60px;

                    .media-xs( {
                            width : 100%;
                            padding : 45px;
                            border-radius: 7px;
                        }

                    );

                    &.one {
                        background-color: @dark;

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: -1;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                            background-image: url("../../images/advantage-01.jpg?v=3");
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                            background-size: cover;
                            opacity: 0.4;
                            mix-blend-mode: multiply;
                        }
                    }

                    &.two {
                        background-color: @dbrown;

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: -1;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                            background-image: url("../../images/advantage-02.jpg?v=3");
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                            background-size: cover;
                            opacity: 0.4;
                            mix-blend-mode: multiply;
                        }
                    }

                    &.three {
                        background-color: @button;

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: -1;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                            background-image: url("../../images/advantage-03.jpg?v=3");
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                            background-size: cover;
                            opacity: 0.4;
                            mix-blend-mode: multiply;
                        }
                    }

                    &-desc {
                        position: relative;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 20px;

                        &-logo {
                            img {
                                width: 40px;
                            }
                        }

                        &-title {
                            p {
                                .font-title1;
                                color: @white;
                                font-size: 28px;
                                letter-spacing: 0.04em;
                                text-align: center;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 20px;
                                    }

                                );
                            }
                        }

                        &-subtitle {
                            p {
                                .font-body2;
                                color: @white;
                                font-size: 16px;
                                letter-spacing: 0.07em;
                                text-align: center;

                                .media-xs( {
                                        font-size: 13px;
                                    }

                                );
                            }
                        }
                    }
                }
            }
        }
    }
}

/* BLOG PAGE */
.dv-trending-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;
    padding: 75px 5% 75px 5%;

    .media-sm( {
            padding: 75px 5% 75px 5%;
        }

    );

    .media-xs( {
            padding: 50px 5% 50px 5%;
        }

    );

    .trending {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 30px;

            .media-xs( {
                    gap: 20px;
                }

            );

            &-info {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &-title {
                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 32px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );
                    }
                }

                &-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 35px;

                    .media-xs( {
                            gap: 20px;
                        }

                    );

                    &-wrap {
                        cursor: pointer;

                        img {
                            width: 20px;

                            .media-xs( {
                                    width: 10px;
                                }

                            );
                        }

                        &:hover {
                            opacity: 0.7;
                        }
                    }
                }
            }

            &-content {
                width: 100%;
                display: flex;
                gap: 30px;

                .media-sm( {
                        gap: 20px;
                    }

                );

                .media-xs( {
                        flex-direction: column;
                        gap : 20px;
                    }

                );

                &-left {
                    width: 50%;

                    .media-xs( {
                            width: 100%;
                        }

                    );

                    .card {
                        position: relative;
                        cursor: pointer;
                        height: 85vh;
                        border-radius: 7px;
                        padding: 40px;
                        overflow: hidden;

                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-end;

                        .media-sm( {
                                height: 85vh;
                            }

                        );

                        .media-xs( {
                                height : 40vh;
                                border-radius: 5px;
                            }

                        );

                        .media-xxs( {
                                padding: 20px;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            z-index: 1;

                            background-image: inherit;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50% 50%;

                            transform: scale(1);
                            transition: transform 0.6s ease;
                        }

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: 2;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            // background: linear-gradient(
                            //     180deg,
                            //     #8c6126 0%,
                            //     rgba(140, 97, 38, 0) 100%
                            // );
                            background: linear-gradient(180deg,
                                    rgba(140, 97, 38, 0.85) 0%,
                                    rgba(140, 97, 38, 0.6) 15%,
                                    rgba(140, 97, 38, 0) 50%);
                            transform: rotate(-180deg);
                            mix-blend-mode: multiply;
                        }

                        &:hover::before {
                            transform: scale(1.1);
                        }

                        &-content {
                            // position: absolute;
                            position: relative;
                            z-index: 3;
                            // bottom: 40px;
                            // left: 40px;
                            width: 85%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: flex-start;
                            gap: 20px;

                            .media-xs( {
                                    gap : 10px;
                                    // bottom: 20px;
                                    // left: 20px;
                                }

                            );

                            &-button {
                                .button {
                                    width: 100%;
                                    padding: 10px 15px;
                                    background-color: #174344;
                                    border-radius: 5px;
                                    cursor: pointer;

                                    .media-sm( {
                                            padding: 15px;
                                        }

                                    );

                                    .media-xs( {
                                            padding : 5px 10px;
                                            border-radius: 3px;
                                        }

                                    );

                                    p {
                                        .font-body3;
                                        color: @white;
                                        font-size: 12px;
                                        text-align: center;
                                        text-transform: capitalize;

                                        .media-xs( {
                                                font-size: 10px;
                                            }

                                        );
                                    }
                                }
                            }

                            &-title {
                                p {
                                    .font-title2;
                                    color: @white;
                                    font-size: 24px;
                                    letter-spacing: 0.04em;

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );
                                }
                            }

                            &-subtitle {
                                .font-body2;
                                color: @white;
                                font-size: 16px;
                                letter-spacing: 0.02em;

                                .media-xs( {
                                        font-size: 11px;
                                    }

                                );
                            }
                        }
                    }
                }

                &-right {
                    width: 50%;
                    height: 85vh;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: 1fr 1fr;
                    gap: 30px;

                    .media-sm( {
                            height: 85vh;
                            gap : 20px;
                        }

                    );

                    .media-xs( {
                            width : 100%;
                            grid-template-columns: 1fr 1fr;
                            grid-template-rows : auto;
                            gap : 20px;
                            height : 100%;
                        }

                    );

                    .card {
                        position: relative;
                        border-radius: 10px;
                        display: flex;
                        align-items: flex-end;
                        border-radius: 10px;
                        padding: 20px;
                        overflow: hidden;

                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-end;

                        &.invisible-mobile {
                            .media-xs( {
                                    display: none;
                                }

                            );
                        }

                        .media-xs( {
                                height: 30vh;
                            }

                        );

                        .media-xxs( {
                                padding: 20px;
                                height : 25vh;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            z-index: 1;

                            background-image: inherit;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50% 50%;

                            transform: scale(1);
                            transition: transform 0.6s ease;
                        }

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: 2;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            // background: linear-gradient(
                            //     180deg,
                            //     #8c6126 0%,
                            //     rgba(140, 97, 38, 0) 100%
                            // );
                            background: linear-gradient(180deg,
                                    rgba(140, 97, 38, 0.85) 0%,
                                    rgba(140, 97, 38, 0.6) 15%,
                                    rgba(140, 97, 38, 0) 50%);
                            transform: rotate(-180deg);
                            mix-blend-mode: multiply;
                        }

                        &:hover::before {
                            transform: scale(1.1);
                        }

                        &-content {
                            // position: absolute;
                            position: relative;
                            z-index: 3;
                            // bottom: 20px;
                            // left: 20px;
                            width: 85%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: flex-start;
                            gap: 20px;

                            .media-xs( {
                                    gap : 10px;
                                    // bottom: 10px;
                                    // left: 10px;
                                }

                            );

                            &-button {
                                .button {
                                    width: 100%;
                                    padding: 10px 15px;
                                    background-color: @dark;
                                    border-radius: 5px;
                                    cursor: pointer;

                                    .media-xs( {
                                            padding : 5px 10px;
                                            border-radius: 3px;
                                        }

                                    );

                                    p {
                                        .font-body3;
                                        color: @white;
                                        font-size: 12px;
                                        text-align: center;
                                        text-transform: capitalize;

                                        .media-xs( {
                                                font-size: 10px;
                                            }

                                        );
                                    }
                                }
                            }

                            &-title {
                                p {
                                    .font-title2;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;

                                    .media-sm( {
                                            font-size: 16px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 10px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-highlight-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @brown;

    &:after {
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url("../../images/texture-04.png?v=3");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        mix-blend-mode: color-burn;
    }

    .highlight {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 3;

            &-title {
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 20px;
                    }

                );

                p {
                    .font-title2;
                    color: @white;
                    font-size: 32px;
                    letter-spacing: 0.04em;
                    text-transform: capitalize;

                    .media-xs( {
                            font-size: 20px;
                        }

                    );
                }
            }

            &-content {
                position: relative;
                width: 100%;
                display: flex;
                flex-flow: row wrap;
                align-items: flex-start;
                justify-content: space-between;
                gap: 30px;

                .media-xs( {
                        gap: 10px;
                    }

                );

                &-wrap {
                    position: relative;
                    width: 20%;
                    // height: 30vw;
                    // height: 45vh;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 20px;

                    .media-xs( {
                            width : calc(50% - 2px);
                            gap : 10px;
                            margin-bottom: 20px;

                            &:nth-last-child(1) {
                                margin-bottom: 0;
                            }

                            &:nth-last-child(2) {
                                margin-bottom: 0;
                            }
                        }

                    );

                    &-image {
                        position: relative;
                        width: 100%;
                        // height: 30vw;
                        height: 30vh;
                        background-repeat: no-repeat;
                        background-size: cover;
                        overflow: hidden;
                        border-radius: 7px;

                        .media-sm( {
                                height: 20vh;
                            }

                        );

                        .media-xs( {
                                height : 25vh;
                                border-radius: 5px;
                            }

                        );

                        .media-xxs( {
                                height: 15vh;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            z-index: 1;

                            background-image: inherit;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50% 50%;

                            transform: scale(1);
                            transition: transform 0.6s ease;
                        }

                        &:hover::before {
                            transform: scale(1.1);
                        }
                    }

                    &-button {
                        padding: 10px 15px;
                        background-color: @dark;
                        border-radius: 5px;
                        cursor: pointer;

                        .media-xs( {
                                padding: 5px 10px;
                            }

                        );

                        p {
                            .font-body3;
                            color: @white;
                            font-size: 12px;
                            text-align: center;
                            text-transform: capitalize;

                            .media-xs( {
                                    font-size: 10px;
                                }

                            );
                        }
                    }

                    &-desc {
                        p {
                            .font-title2;
                            color: @white;
                            font-size: 20px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;

                            .media-sm( {
                                    font-size: 16px;
                                }

                            );

                            .media-xs( {
                                    font-size: 11px;
                                }

                            );
                        }
                    }
                }
            }
        }
    }
}

.dv-article-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;

    .article {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 30px;

            .media-sm( {
                    flex-direction: column;
                    gap : 20px;
                }

            );

            .media-xs( {
                    flex-direction: column;
                    gap : 20px;
                }

            );

            .article-content {
                width: 70%;

                // height: 100vh;
                .media-sm( {
                        width: 100%;
                    }

                );

                .media-xs( {
                        width: 100%;
                    }

                );

                &-top {
                    width: 100%;
                    display: flex;
                    align-items: flex-end;
                    justify-content: space-between;

                    .media-xs( {
                            flex-direction: column;
                        }

                    );

                    &-title {
                        width: 45%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;

                        .media-xs( {
                                border-bottom: none;
                                width : 100%;
                                margin-bottom: 0;
                            }

                        );

                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;
                            margin-bottom: 15px;

                            .media-xs( {
                                    font-size: 20px;
                                }

                            );
                        }
                    }

                    &-choices {
                        width: 55%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 10px;
                        text-align: center;

                        .media-xs( {
                                width: 100%
                            }

                        );

                        &-wrap {
                            cursor: pointer;

                            p {
                                .font-body3;
                                color: @dgray;
                                font-size: 16px;
                                margin-bottom: 15px;

                                .media-xs( {
                                        font-size: 13px;
                                    }

                                );
                            }

                            &:hover p {
                                color: @dark;
                                .font-title1;
                            }

                            &.is-active p {
                                color: @dark;
                                .font-title1;
                            }
                        }
                    }
                }

                .container {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: 20px;

                    .media-xs( {
                            width: 100%;
                        }

                    );

                    &.custom {
                        justify-content: flex-start;
                    }
                }

                &-wrap {
                    display: flex;
                    align-items: stretch;
                    gap: 30px;

                    .media-xs( {
                            flex-direction: column;
                        }

                    );

                    &.one {
                        .article-content-wrap-main {
                            width: 100%;
                            height: 60vh;
                        }

                        .container {
                            display: none;
                        }
                    }

                    &-main {
                        position: relative;
                        width: 50%;
                        height: 100vh;
                        overflow: hidden;
                        border-radius: 7px;
                        padding: 25px;
                        display: flex;
                        align-items: flex-end;

                        .media-xs( {
                                width : 100%;
                                height : 65vw;
                                border-radius: 5px;
                            }

                        );

                        .media-xxs( {
                                height: 85vw;
                            }

                        );

                        &:before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            z-index: 1;

                            background-image: inherit;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50% 50%;

                            transform: scale(1);
                            transition: transform 0.6s ease;
                        }

                        &:after {
                            content: "";
                            position: absolute;
                            z-index: 2;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            // background: linear-gradient(
                            //     180deg,
                            //     #8c6126 0%,
                            //     rgba(140, 97, 38, 0) 100%
                            // );
                            background: linear-gradient(180deg,
                                    rgba(140, 97, 38, 0.85) 0%,
                                    rgba(140, 97, 38, 0.6) 15%,
                                    rgba(140, 97, 38, 0) 50%);
                            transform: rotate(-180deg);
                            mix-blend-mode: multiply;
                        }

                        &:hover::before {
                            transform: scale(1.1);
                        }

                        .desc {
                            position: relative;
                            z-index: 4;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: flex-start;
                            gap: 20px;

                            .media-xs( {
                                    gap: 10px;
                                }

                            );

                            .button {
                                .button {
                                    width: 100%;
                                    padding: 10px 15px;
                                    background-color: @dark;
                                    border-radius: 5px;
                                    cursor: pointer;

                                    .media-sm( {
                                            padding: 15px;
                                        }

                                    );

                                    .media-xs( {
                                            width : 90px;
                                            padding : 5px 10px;
                                            border-radius: 3px;
                                        }

                                    );

                                    p {
                                        .font-body3;
                                        color: @white;
                                        font-size: 12px;
                                        text-align: center;
                                        text-transform: capitalize;

                                        .media-xs( {
                                                font-size: 10px;
                                            }

                                        );
                                    }
                                }
                            }

                            .title {
                                p {
                                    .font-title2;
                                    color: @white;
                                    font-size: 24px;
                                    letter-spacing: 0.04em;

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );
                                }
                            }

                            .subtitle {
                                .font-body2;
                                color: @white;
                                font-size: 16px;
                                letter-spacing: 0.02em;

                                .media-xs( {
                                        font-size: 12px;
                                    }

                                );
                            }
                        }
                    }

                    &-secondary {
                        width: 100%;
                        display: flex;
                        align-items: stretch;
                        gap: 20px;

                        .media-xs( {
                                gap: 20px;
                            }

                        );

                        .image {
                            position: relative;
                            width: 55%;
                            // height: 10vw;
                            height: 22vh;
                            background-repeat: no-repeat;
                            background-size: cover;
                            overflow: hidden;
                            border-radius: 7px;

                            .media-xs( {
                                    height : 20vh;
                                    border-radius: 5px;
                                }

                            );

                            .media-xxs( {
                                    height: 13vh;
                                }

                            );

                            &:before {
                                content: "";
                                position: absolute;
                                inset: 0;
                                z-index: 1;

                                background-image: inherit;
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: 50% 50%;

                                transform: scale(1);
                                transition: transform 0.6s ease;
                            }

                            &:hover::before {
                                transform: scale(1.1);
                            }
                        }

                        .container {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: flex-end;
                            width: 100%;

                            // gap: 20px;
                            // .media-xs({
                            //     gap: 10px;
                            // });
                            &-button {
                                padding: 10px 15px;
                                background-color: @dark;
                                border-radius: 5px;
                                cursor: pointer;

                                .media-xs( {
                                        padding : 5px 10px;
                                        border-radius: 3px;
                                    }

                                );

                                p {
                                    .font-body3;
                                    color: @white;
                                    font-size: 12px;
                                    text-align: center;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );
                                }
                            }

                            &-desc {
                                p {
                                    .font-title2;
                                    color: @dark;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;
                                    text-transform: capitalize;

                                    .media-sm( {
                                            font-size: 16px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 13px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }
            }

            .article-review {
                width: 30%;

                // height: 100vh;
                .media-sm( {
                        width: 100%;
                    }

                );

                .media-xs( {
                        width: 100%;
                    }

                );

                &-follow {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    margin-bottom: 30px;

                    &-title {
                        width: 100%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;

                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;
                            margin-bottom: 15px;

                            .media-xs( {
                                    font-size: 20px;
                                }

                            );
                        }
                    }

                    &-content {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        gap: 10px;

                        &-wrap {
                            width: 100%;
                            padding: 20px 25px;
                            background-color: @lbrown;
                            border-radius: 7px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .media-xs( {
                                    padding : 15px 25px;
                                    border-radius: 5px;
                                }

                            );

                            &-main {
                                display: flex;
                                align-items: center;
                                gap: 30px;

                                img {
                                    width: 40px;

                                    .media-xs( {
                                            width: 25px;
                                        }

                                    );
                                }

                                p {
                                    .font-title1;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );
                                }
                            }

                            p {
                                .font-title1;
                                color: @white;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;
                                font-style: italic;
                                text-align: right;

                                .media-xs( {
                                        font-size: 16px;
                                    }

                                );
                            }
                        }
                    }
                }

                &-google {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;

                    .media-xs( {
                            margin-bottom: 30px;
                        }

                    );

                    &-title {
                        width: 100%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;

                        p {
                            .font-title1;
                            color: @dark;
                            font-size: 24px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;
                            margin-bottom: 15px;

                            .media-xs( {
                                    font-size: 18px;
                                }

                            );
                        }
                    }

                    &-ddloc {
                        position: relative;
                        width: 100%;
                        margin-bottom: 30px;

                        /* .media-xs( {
                                width: 100%;
                            }

                        ); */

                        .custom-select-branch {
                            position: relative;
                            width: 100%;

                            .custom-select-branch-dropdown:hover {
                                .custom-option-branch.active:not(:hover) {
                                    background: transparent;
                                    color: @button;
                                }
                            }

                            &-trigger {
                                .font-body1;
                                width: 100%;
                                padding: 12px 45px 12px 16px;
                                border-bottom: 1px solid @button;
                                background-color: transparent;
                                color: @button;
                                font-size: 16px;
                                cursor: pointer;
                                position: relative;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );

                                &::after {
                                    content: "";
                                    position: absolute;
                                    top: 50%;
                                    right: 16px;
                                    width: 10px;
                                    height: 10px;
                                    border-right: 2px solid @button;
                                    border-bottom: 2px solid @button;
                                    transform: translateY(-60%) rotate(45deg);
                                    transition: 0.3s ease;
                                }
                            }

                            &.open {
                                .custom-select-branch-trigger {
                                    &::after {
                                        transform: translateY(-30%) rotate(-135deg);
                                    }
                                }

                                .custom-select-branch-dropdown {
                                    opacity: 1;
                                    visibility: visible;
                                    pointer-events: auto;
                                    transform: translateY(0);
                                }
                            }

                            &-dropdown {
                                position: absolute;
                                top: calc(100% ~"+"10px);
                                left: 0;
                                width: 100%;
                                background: @white;
                                border: 1px solid @button;
                                border-radius: 7px;
                                overflow-y: auto;
                                max-height: 220px;
                                z-index: 10;
                                opacity: 0;
                                visibility: hidden;
                                pointer-events: none;
                                transform: translateY(10px);
                                transition: 0.25s ease;
                                padding-right: 8px;

                                /* custom scrollbar */
                                &::-webkit-scrollbar {
                                    width: 8px;
                                }

                                &::-webkit-scrollbar-thumb {
                                    background: @button;
                                    border-radius: 20px;
                                    border: 2px solid @white;
                                }

                                &::-webkit-scrollbar-thumb:hover {
                                    background: darken(@button, 10%);
                                }

                                &::-webkit-scrollbar-track {
                                    background: fade(@button, 12%);
                                    border-radius: 20px;
                                    margin: 6px 0;
                                }
                            }

                            .custom-option-branch {
                                .font-body1;
                                padding: 12px 16px;
                                color: @button;
                                font-size: 15px;
                                cursor: pointer;
                                transition: 0.2s ease;

                                &:hover,
                                &.active {
                                    background: @button;
                                    color: @white2;
                                }

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }
                    }

                    &-content {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 30px;
                        cursor: pointer;

                        .review-summary {
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            background: @gray;
                            padding: 20px;
                            border-radius: 10px;
                            text-align: center;

                            &-title {
                                margin-bottom: 10px;

                                p {
                                    .font-title3;
                                    color: @dark;
                                    font-size: 28px;
                                    line-height: 1;
                                    text-align: center;

                                    .media-xs( {
                                            font-size: 24px;
                                        }

                                    );
                                }
                            }

                            &-subtitle {
                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 16px;
                                    line-height: 1;
                                    text-align: center;

                                    .media-xs( {
                                            font-size: 14px;
                                        }

                                    );
                                }
                            }

                            .stars {
                                position: relative;
                                margin-bottom: 10px;
                                width: 120px;
                                height: 24px;

                                background: @dgray;

                                -webkit-mask: url("../../images/star.svg") repeat-x;
                                -webkit-mask-size: 24px;

                                mask: url("../../images/star.svg") repeat-x;
                                mask-size: 24px;

                                .stars-fill {
                                    height: 100%;
                                    width: 0%;
                                    background: @brown;
                                }
                            }
                        }

                        .review-breakdown {
                            display: flex;
                            flex-direction: column;
                            gap: 12px;

                            .review-row {
                                display: flex;
                                align-items: center;
                                gap: 10px;

                                span {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 14px;
                                    line-height: 1.3;
                                }

                                .bar {
                                    flex: 1;
                                    height: 6px;
                                    background: @dwhite;
                                    border-radius: 10px;
                                    overflow: hidden;
                                }

                                .fill {
                                    height: 100%;
                                    background: @brown;
                                    border-radius: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-article-L2-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;

    .article {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            gap: 30px;

            .media-sm( {
                    gap: 20px;
                }

            );

            .media-xs( {
                    gap: 20px;
                }

            );

            .article-content {
                width: 100%;

                &-top {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: space-between;

                    &-title {
                        width: 100%;
                        margin-bottom: 30px;

                        .media-xs( {
                                margin-bottom: 0;
                            }

                        );

                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;
                            margin-bottom: 15px;

                            .media-xs( {
                                    font-size: 20px;
                                }

                            );
                        }
                    }

                    &-choices {
                        width: 100%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 10px;
                        text-align: center;

                        .media-sm( {
                                gap : 30px;
                                justify-content: flex-start;
                            }

                        );

                        .media-xs( {
                                gap : 20px;
                                justify-content: flex-start;
                            }

                        );

                        &-wrap {
                            cursor: pointer;

                            p {
                                .font-body3;
                                color: @dgray;
                                font-size: 16px;
                                margin-bottom: 15px;

                                .media-xs( {
                                        font-size: 13px;
                                    }

                                );
                            }

                            &:hover p {
                                color: @dark;
                                .font-title1;
                            }

                            &.is-active p {
                                color: @dark;
                                .font-title1;
                            }
                        }
                    }
                }

                .container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: 20px;
                }

                &-wrap {
                    display: flex;
                    align-items: stretch;
                    gap: 30px;

                    .media-xs( {
                            flex-direction: column;
                        }

                    );

                    &-secondary {
                        width: 100%;
                        display: flex;
                        align-items: stretch;
                        gap: 20px;

                        .media-xs( {
                                gap: 20px;
                            }

                        );

                        .image {
                            position: relative;
                            width: 70%;
                            // height: 8vw;
                            height: 22vh;
                            background-repeat: no-repeat;
                            background-size: cover;
                            overflow: hidden;
                            border-radius: 7px;

                            // .media-sm({
                            //     height: 20vw;
                            // });
                            .media-xs( {
                                    height : 20vh;
                                    border-radius: 5px;
                                }

                            );

                            .media-xxs( {
                                    height: 13vh;
                                }

                            );

                            &:before {
                                content: "";
                                position: absolute;
                                inset: 0;
                                z-index: 1;

                                background-image: inherit;
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: 50% 50%;

                                transform: scale(1);
                                transition: transform 0.6s ease;
                            }

                            &:hover::before {
                                transform: scale(1.1);
                            }
                        }

                        .container {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: flex-end;
                            width: 100%;

                            // gap: 20px;
                            // .media-xs({
                            //     gap: 10px;
                            // });
                            &-button {
                                padding: 10px 15px;
                                background-color: @dark;
                                border-radius: 5px;
                                cursor: pointer;

                                .media-sm( {
                                        padding: 15px;
                                    }

                                );

                                .media-xs( {
                                        padding : 5px 10px;
                                        border-radius: 3px;
                                    }

                                );

                                p {
                                    .font-body3;
                                    color: @white;
                                    font-size: 12px;
                                    text-align: center;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 12px;
                                        }

                                    );
                                }
                            }

                            &-desc {
                                p {
                                    .font-title2;
                                    color: @dark;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 13px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }
            }

            /* .article-follow {
                width: 100%;

                &-title {
                    width: 100%;
                    border-bottom: 1px solid @dgray;
                    margin-bottom: 30px;

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 32px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;
                        margin-bottom: 15px;

                        .media-xs( {
                                font-size: 20px;
                            }

                        );
                    }
                }

                &-content {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    gap: 10px;

                    &-wrap {
                        width: 100%;
                        padding: 20px 25px;
                        background-color: @lbrown;
                        border-radius: 7px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .media-xs( {
                                padding: 15px 25px;
                                border-radius: 5px;
                            }

                        );

                        &-main {
                            display: flex;
                            align-items: center;
                            gap: 30px;

                            img {
                                width: 40px;

                                .media-xs( {
                                        width: 25px;
                                    }

                                );
                            }

                            p {
                                .font-title1;
                                color: @white;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 16px;
                                    }

                                );
                            }
                        }

                        p {
                            .font-title1;
                            color: @white;
                            font-size: 20px;
                            letter-spacing: 0.02em;
                            text-transform: capitalize;
                            font-style: italic;
                            text-align: right;

                            .media-xs( {
                                    font-size: 16px;
                                }

                            );
                        }
                    }
                }
            } */

            .article-review {
                width: 100%;

                // height: 100vh;
                .media-sm( {
                        width: 100%;
                    }

                );

                .media-xs( {
                        width: 100%;
                    }

                );

                &-follow {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    margin-bottom: 30px;

                    &-title {
                        width: 100%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;

                        p {
                            .font-title2;
                            color: @dark;
                            font-size: 32px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;
                            margin-bottom: 15px;

                            .media-xs( {
                                    font-size: 20px;
                                }

                            );
                        }
                    }

                    &-content {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        gap: 10px;

                        &-wrap {
                            width: 100%;
                            padding: 20px 25px;
                            background-color: @lbrown;
                            border-radius: 7px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .media-xs( {
                                    padding : 15px 25px;
                                    border-radius: 5px;
                                }

                            );

                            &-main {
                                display: flex;
                                align-items: center;
                                gap: 30px;

                                img {
                                    width: 40px;

                                    .media-xs( {
                                            width: 25px;
                                        }

                                    );
                                }

                                p {
                                    .font-title1;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.02em;
                                    text-transform: capitalize;

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );
                                }
                            }

                            p {
                                .font-title1;
                                color: @white;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-transform: capitalize;
                                font-style: italic;
                                text-align: right;

                                .media-xs( {
                                        font-size: 16px;
                                    }

                                );
                            }
                        }
                    }
                }

                &-google {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    cursor: pointer;

                    .media-xs( {
                            margin-bottom: 30px;
                        }

                    );

                    &-title {
                        width: 100%;
                        border-bottom: 1px solid @dgray;
                        margin-bottom: 30px;

                        p {
                            .font-title1;
                            color: @dark;
                            font-size: 24px;
                            letter-spacing: 0.04em;
                            text-transform: capitalize;
                            margin-bottom: 15px;

                            .media-xs( {
                                    font-size: 18px;
                                }

                            );
                        }
                    }

                    &-ddloc {
                        position     : relative;
                        width        : 100%;
                        margin-bottom: 30px;

                        /* .media-xs( {
                                width: 100%;
                            }

                        ); */

                        .custom-select-branch {
                            position: relative;
                            width   : 100%;

                            .custom-select-branch-dropdown:hover {
                                .custom-option-branch.active:not(:hover) {
                                    background: transparent;
                                    color     : @button;
                                }
                            }

                            &-trigger {
                                .font-body1;
                                width           : 100%;
                                padding         : 12px 45px 12px 16px;
                                border-bottom   : 1px solid @button;
                                background-color: transparent;
                                color           : @button;
                                font-size       : 16px;
                                cursor          : pointer;
                                position        : relative;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );

                                &::after {
                                    content      : "";
                                    position     : absolute;
                                    top          : 50%;
                                    right        : 16px;
                                    width        : 10px;
                                    height       : 10px;
                                    border-right : 2px solid @button;
                                    border-bottom: 2px solid @button;
                                    transform    : translateY(-60%) rotate(45deg);
                                    transition   : 0.3s ease;
                                }
                            }

                            &.open {
                                .custom-select-branch-trigger {
                                    &::after {
                                        transform: translateY(-30%) rotate(-135deg);
                                    }
                                }

                                .custom-select-branch-dropdown {
                                    opacity       : 1;
                                    visibility    : visible;
                                    pointer-events: auto;
                                    transform     : translateY(0);
                                }
                            }

                            &-dropdown {
                                position      : absolute;
                                top           : calc(100% ~"+"10px);
                                left          : 0;
                                width         : 100%;
                                background    : @white;
                                border        : 1px solid @button;
                                border-radius : 7px;
                                overflow-y    : auto;
                                max-height    : 220px;
                                z-index       : 10;
                                opacity       : 0;
                                visibility    : hidden;
                                pointer-events: none;
                                transform     : translateY(10px);
                                transition    : 0.25s ease;
                                padding-right : 8px;

                                /* custom scrollbar */
                                &::-webkit-scrollbar {
                                    width: 8px;
                                }

                                &::-webkit-scrollbar-thumb {
                                    background   : @button;
                                    border-radius: 20px;
                                    border       : 2px solid @white;
                                }

                                &::-webkit-scrollbar-thumb:hover {
                                    background: darken(@button, 10%);
                                }

                                &::-webkit-scrollbar-track {
                                    background   : fade(@button, 12%);
                                    border-radius: 20px;
                                    margin       : 6px 0;
                                }
                            }

                            .custom-option-branch {
                                .font-body1;
                                padding   : 12px 16px;
                                color     : @button;
                                font-size : 15px;
                                cursor    : pointer;
                                transition: 0.2s ease;

                                &:hover,
                                &.active {
                                    background: @button;
                                    color     : @white2;
                                }

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }
                    }

                    &-content {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 30px;

                        .review-summary {
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            background: @gray;
                            padding: 20px;
                            border-radius: 10px;
                            text-align: center;

                            &-title {
                                margin-bottom: 10px;

                                p {
                                    .font-title3;
                                    color: @dark;
                                    font-size: 28px;
                                    line-height: 1;
                                    text-align: center;

                                    .media-xs( {
                                            font-size: 24px;
                                        }

                                    );
                                }
                            }

                            &-subtitle {
                                p {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 16px;
                                    line-height: 1;
                                    text-align: center;

                                    .media-xs( {
                                            font-size: 14px;
                                        }

                                    );
                                }
                            }

                            .stars {
                                position: relative;
                                margin-bottom: 10px;
                                width: 120px;
                                height: 24px;

                                background: @dgray;

                                -webkit-mask: url("../../images/star.svg") repeat-x;
                                -webkit-mask-size: 24px;

                                mask: url("../../images/star.svg") repeat-x;
                                mask-size: 24px;

                                .stars-fill {
                                    height: 100%;
                                    width: 0%;
                                    background: @brown;
                                }
                            }
                        }

                        .review-breakdown {
                            display: flex;
                            flex-direction: column;
                            gap: 12px;

                            .review-row {
                                display: flex;
                                align-items: center;
                                gap: 10px;

                                span {
                                    .font-body1;
                                    color: @dark;
                                    font-size: 14px;
                                    line-height: 1.3;
                                }

                                .bar {
                                    flex: 1;
                                    height: 6px;
                                    background: @dwhite;
                                    border-radius: 10px;
                                    overflow: hidden;
                                }

                                .fill {
                                    height: 100%;
                                    background: @brown;
                                    border-radius: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-blog-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;
    padding: 100px 5% 75px 5%;

    .media-xs( {
            padding: 75px 5% 50px 5%;
        }

    );

    .blog {
        &-back {
            position: relative;
            width: 100%;
            margin-bottom: 30px;

            .media-xs( {
                    margin-bottom: 20px;
                }

            );

            p {
                .font-body1;
                color: @dark;
                font-size: 18px;
                letter-spacing: 0.02em;
                text-decoration: underline;
                cursor: pointer;

                .media-xs( {
                        font-size: 12px;
                    }

                );
            }
        }

        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 30px;

            .media-sm( {
                    flex-direction: column;
                    gap : 20px;
                }

            );

            .media-xs( {
                    flex-direction: column;
                    gap : 20px;
                }

            );

            &-content {
                position: relative;
                width: 70%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 30px;

                .media-sm( {
                        width: 100%;
                        gap : 20px;
                    }

                );

                .media-xs( {
                        width: 100%;
                        gap : 20px;
                    }

                );

                &-title {
                    width: 100%;

                    p {
                        .font-title2;
                        color: @dark;
                        font-size: 48px;
                        letter-spacing: 0.04em;
                        text-transform: capitalize;

                        .media-xs( {
                                font-size: 22px;
                            }

                        );
                    }
                }

                &-subtitle {
                    p {
                        .font-body3;
                        color: @dark;
                        font-size: 20px;

                        .media-xs( {
                                font-size: 11px;
                            }

                        );
                    }
                }

                &-image {
                    width: 100%;
                    height: 75vh;
                    overflow: hidden;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border-radius: 7px;

                    .media-xxs( {
                            height : 30vh;
                            border-radius: 5px;
                        }

                    );
                }

                .body-content {
                    width: 100%;
                    word-break: break-word;

                    /* ================= TEXT ================= */

                    p {
                        .font-body2;
                        color: @dark;
                        font-size: 18px;
                        line-height: 1.7;
                        letter-spacing: 0.02em;
                        margin: 0 0 1em;
                        text-align: justify;

                        .media-xs( {
                                font-size: 12px;
                            }

                        );
                    }

                    strong,
                    b {
                        font-weight: 600;
                    }

                    em,
                    i {
                        font-style: italic;
                    }

                    u {
                        text-decoration: underline;
                    }

                    s,
                    strike {
                        text-decoration: line-through;
                    }

                    span {
                        color: inherit;
                        font-size: inherit;
                    }

                    /* ================= HEADINGS ================= */

                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        color: @dark;
                        font-weight: 600;
                        line-height: 1.3;
                        margin: 1.2em 0 0.6em;
                    }

                    h1 {
                        font-size: 42px;
                    }

                    h2 {
                        font-size: 34px;
                    }

                    h3 {
                        font-size: 28px;
                    }

                    h4 {
                        font-size: 22px;
                    }

                    h5 {
                        font-size: 18px;
                    }

                    h6 {
                        font-size: 16px;
                    }

                    .media-xs( {
                            h1 {
                                font-size: 24px;
                            }

                            h2 {
                                font-size: 20px;
                            }

                            h3 {
                                font-size: 18px;
                            }

                            h4 {
                                font-size: 16px;
                            }

                            h5 {
                                font-size: 14px;
                            }

                            h6 {
                                font-size: 13px;
                            }
                        }

                    );

                    /* ================= LIST ================= */

                    ul {
                        list-style: disc;
                        padding-left: 24px;
                        margin: 16px 0;
                    }

                    ol {
                        list-style: decimal;
                        padding-left: 24px;
                        margin: 16px 0;
                    }

                    li {
                        .font-body2;
                        color: @dark;
                        font-size: 18px;
                        line-height: 1.6;
                        margin-bottom: 6px;

                        .media-xs( {
                                font-size: 12px;
                            }

                        );
                    }

                    /* ================= TABLE ================= */

                    table {
                        width: 100%;
                        border-collapse: collapse;
                        margin: 24px 0;
                        overflow-x: auto;
                    }

                    th,
                    td {
                        border: 1px solid fade(@dark, 15%);
                        padding: 10px 12px;
                        text-align: left;
                        vertical-align: top;
                    }

                    th {
                        font-weight: 600;
                        background-color: fade(@dark, 6%);
                    }

                    /* ================= MEDIA ================= */

                    img {
                        max-width: 100%;
                        height: auto;
                        display: block;
                        margin: 24px 0;
                        border-radius: 6px;
                    }

                    iframe,
                    video {
                        max-width: 100%;
                        margin: 24px 0;
                        border-radius: 6px;
                    }

                    figure {
                        margin: 24px 0;
                    }

                    figcaption {
                        font-size: 14px;
                        color: fade(@dark, 70%);
                        text-align: center;
                        margin-top: 8px;
                    }

                    /* ================= LINK ================= */

                    a {
                        color: @dark;
                        text-decoration: underline;
                        word-break: break-word;

                        &:hover {
                            opacity: 0.75;
                        }
                    }

                    /* ================= QUOTE ================= */

                    blockquote {
                        margin: 24px 0;
                        padding-left: 20px;
                        border-left: 3px solid fade(@dark, 25%);
                        color: fade(@dark, 80%);
                        font-style: italic;
                    }

                    /* ================= CODE ================= */

                    pre {
                        background-color: fade(@dark, 5%);
                        padding: 16px;
                        border-radius: 6px;
                        overflow-x: auto;
                        font-size: 14px;
                        margin: 24px 0;
                    }

                    code {
                        font-family: monospace;
                        background-color: fade(@dark, 6%);
                        padding: 2px 4px;
                        border-radius: 4px;
                    }

                    /* ================= HR ================= */

                    hr {
                        border: none;
                        border-top: 1px solid fade(@dark, 15%);
                        margin: 32px 0;
                    }
                }
            }

            &-info {
                position: relative;
                width: 30%;
                height: 100%;

                // background-color: @dark;
                .media-sm( {
                        width: 100%;
                    }

                );

                .media-xs( {
                        width: 100%;
                    }

                );
            }
        }
    }
}

.dv-contact-L1-V0 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: @white;

    .contact {
        &-area {
            position: relative;
            width: 100%;
            height: 100%;
            // padding: 100px 0 200px 0;
            padding: 0 0 200px 0;

            .media-xs( {
                    padding: 0 0 150px 0;
                }

            );

            &-opening {
                position: relative;
                background-color: @brown;
                // height: 53vw;
                // bottom: -50%;
                // overflow: hidden;
                padding: 75px 5%;

                display: flex;
                // flex-direction: column;
                // align-items: flex-start;
                // justify-content: space-between;

                align-items: flex-end;
                justify-content: space-between;
                background-image: url("../../images/cover-landscape.jpg");
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-size: cover;

                .media-xs( {
                        padding : 50px 5% 75px 5%;
                        background-image : url("../../images/cover-portrait.jpg");
                        background-position: 50% 50%;
                        flex-direction : column;
                        align-items : center;
                    }

                );

                &:after {
                    content: "";
                    position: absolute;
                    z-index: 1;
                    bottom: 0;
                    right: 0;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(270deg,
                            #f5f5f5 0%,
                            rgba(245, 245, 245, 0) 100%);

                    .media-xs( {
                            display: none;
                        }

                    );
                }

                &-container {
                    position: relative;
                    width: 100%;

                    &-title {
                        margin-bottom: 30px;

                        .media-xs( {
                                margin-bottom: 20px;
                            }

                        );

                        p {
                            .font-title2;
                            color: @white;
                            font-size: 48px;
                            letter-spacing: 0.04em;
                            text-transform: uppercase;

                            .media-xs( {
                                    font-size : 20px;
                                    text-align: center;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        p {
                            .font-body1;
                            color: @white;
                            font-size: 18px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size : 13px;
                                    text-align: center;
                                }

                            );
                        }
                    }
                }

                .content {
                    position: relative;
                    z-index: 3;
                    width: 50%;
                    height: 100%;
                    // bottom: -65%;
                    transform: translateY(35%);
                    // right: 5%;
                    background-color: @dark;
                    border-radius: 12px;
                    padding: 50px;

                    .media-xs( {
                            width : 100%;
                            padding : 30px;
                            border-radius: 7px;
                            margin-top : -135px;
                        }

                    );

                    &-title {
                        position: relative;
                        margin-bottom: 10px;

                        p {
                            .font-title1;
                            color: @white;
                            font-size: 28px;
                            letter-spacing: 0.04em;

                            .media-xs( {
                                    font-size: 17px;
                                }

                            );
                        }
                    }

                    &-subtitle {
                        position: relative;
                        margin-bottom: 30px;

                        .media-xs( {
                                margin-bottom: 20px;
                            }

                        );

                        p {
                            .font-body2;
                            color: @white;
                            font-size: 16px;
                            letter-spacing: 0.02em;

                            .media-xs( {
                                    font-size: 11px;
                                }

                            );
                        }
                    }

                    .form-content {
                        position: relative;

                        form {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            gap: 20px;

                            input,
                            textarea {
                                width: 100%;
                                border: 1px solid @white;
                                border-radius: 7px;
                                padding: 20px;
                                background-color: transparent;

                                color: @white;
                                .font-body2;
                                font-size: 16px;
                                letter-spacing: 0.02em;

                                &:focus {
                                    outline: none;
                                    border-color: @white;
                                }

                                &::placeholder {
                                    color: @white;
                                    opacity: 1;
                                    transition: opacity 0.25s ease;
                                }

                                &:focus::placeholder {
                                    opacity: 0;
                                }

                                .media-xs( {
                                        font-size : 12px;
                                        padding : 15px;
                                        border-radius: 5px;
                                    }

                                );
                            }

                            textarea {
                                min-height: 120px;
                                resize: none;
                            }

                            .phone-field {
                                position: relative;
                                width: 100%;
                            }

                            // BUTTON
                            .btn-submit {
                                width: 250px;
                                padding: 20px 15px;
                                border-radius: 7px;
                                border: none;
                                cursor: pointer;

                                background-color: @button;
                                color: @white;
                                .font-title1;
                                font-size: 20px;
                                letter-spacing: 0.02em;
                                text-align: center;
                                transition: opacity 0.3s ease;

                                .media-xs( {
                                        font-size : 15px;
                                        width : 150px;
                                        padding : 15px 10px;
                                        border-radius: 5px;
                                    }

                                );
                            }
                        }
                    }
                }
            }
        }
    }
}

.dv-whatsapp-L1-V0 {
    z-index: 990;

    .floating-wa {
        z-index: 990;
        right: 25px;
        bottom: 25px;
        transition: all 0.25s ease;
        position: fixed;

        .media-sm( {
                right: 10px;
            }

        );

        .media-xs( {
                right: 10px;
            }

        );

        &.is-stuck {
            position: absolute;
        }

        &-button {
            width: 56px;
            height: 56px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            transition: bottom 0.25s ease;

            /* .media-xs({
                width: 45px;
                height: 45px;
            }); */
            img {
                width: 100%;
                height: auto;
            }
        }

        &-panel {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 345px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: 0.3s ease;

            .media-xs( {
                    border-radius: 8px;
                }

            );

            .media-xs( {
                    width: 300px;
                }

            );

            &.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            &-header {
                padding: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                background-color: @dark;
                gap: 15px;

                .media-xs( {
                        padding: 20px;
                    }

                );

                &-title {
                    p {
                        .font-title1;
                        color: @white;
                        font-size: 20px;
                        letter-spacing: 0.04em;

                        .media-xs( {
                                font-size: 17px;
                            }

                        );
                    }
                }

                &-subtitle {
                    p {
                        .font-body2;
                        color: @white;
                        font-size: 14px;
                        letter-spacing: 0.04em;

                        .media-xs( {
                                font-size: 12px;
                            }

                        );
                    }
                }
            }

            &-wrap {
                padding: 30px;
                background-color: @button;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: space-between;

                .media-xs( {
                        padding: 20px;
                    }

                );

                &-list {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                    padding: 12px;
                    background-color: @white;
                    border-radius: 8px;
                    color: @dark;
                    text-decoration: none;
                    margin-bottom: 8px;
                    transition: 0.25s ease;

                    span {
                        .font-body1;
                        color: @dark;
                        font-size: 16px;
                        letter-spacing: 0.02em;

                        .media-xs( {
                                font-size: 14px;
                            }

                        );
                    }

                    .wa-icon {
                        width: 20px;
                        height: 20px;

                        &.wa-white {
                            display: none;
                        }
                    }

                    &:hover {
                        background-color: @brown;

                        span {
                            color: @white;
                        }

                        .wa-color {
                            display: none;
                        }

                        .wa-white {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}

.gallery-area {
    &-bottom {
        position: relative;
        display: flex;
        width: 100%;
        height: 50vw;

        .media-sm( {
                height : 100%;
                flex-direction: column;
            }

        );

        .media-xs( {
                height : 100%;
                flex-direction: column;
            }

        );

        &-desc {
            position: relative;
            width: 50%;
            padding: 20px 5%;
            background-color: @dark;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .media-sm( {
                    width : 100%;
                    padding: 50px 5%;
                }

            );

            .media-xs( {
                    width : 100%;
                    padding: 25px 5%;
                }

            );

            &-title {
                margin-bottom: 70px;

                .media-xs( {
                        margin-bottom: 20px;
                    }

                );

                p {
                    .font-body3;
                    color: @white;
                    font-size: 35px;
                    letter-spacing: 0.04em;

                    .media-xs( {
                            font-size: 16px;
                        }

                    );
                }
            }

            &-subtitle {
                p {
                    .font-body2;
                    color: @white;
                    font-size: 18px;
                    letter-spacing: 0.07em;
                    text-align: justify;

                    .media-xs( {
                            font-size: 12px;
                        }

                    );
                }
            }
        }

        &-image {
            position: relative;
            width: 50%;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;

            .media-sm( {
                    width : 100%;
                    height: 70vw;
                }

            );

            .media-xs( {
                    width : 100%;
                    height: 65vw;
                }

            );
        }
    }
}

.dv-options-L1-V0 {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;

    .options {
        position: relative;
        z-index: 3;
        width: 100%;
        height: 100%;

        &-area {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            &-title {
                margin-bottom: 15px;

                .media-xs( {
                        margin-bottom: 15px;
                    }

                );

                p {
                    .font-title2;
                    color: @dark;
                    font-size: 38px;
                    letter-spacing: 0.04em;
                    text-transform: uppercase;
                    text-align: center;

                    .media-xs( {
                            font-size: 20px;
                        }

                    );
                }
            }

            &-title2 {
                margin-bottom: 30px;

                .media-xs( {
                        margin-bottom: 15px;
                    }

                );

                p {
                    .font-title2;
                    color: @dark;
                    font-size: 26px;
                    letter-spacing: 0.04em;
                    text-transform: uppercase;
                    text-align: center;

                    .media-xs( {
                            font-size: 17px;
                        }

                    );
                }
            }

            &-subtitle {
                margin-bottom: 30px;
                max-width: 700px;

                .media-xs( {
                        max-width: 400px;
                    }

                );

                p {
                    .font-body2;
                    color: @dark;
                    font-size: 20px;
                    letter-spacing: 0.02em;
                    text-align: center;

                    .media-xs( {
                            font-size: 11px;
                        }

                    );
                }
            }

            &-content {
                &-wrap {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-auto-flow: row;
                    gap: 30px;

                    .media-xs( {
                            grid-template-columns: repeat(2, 1fr);
                            gap : 15px;
                        }

                    );

                    &-card {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-start;
                        cursor: pointer;

                        &.flash-sale {

                            /* BADGE */
                            .flash-sale-badge {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 50%;
                                background: @dark;
                                padding: 15px 15px 15px 30px;
                                border-radius: 0 25px 25px 0;
                                z-index: 2;

                                .media-sm( {
                                        width : 70%;
                                        padding: 15px;
                                    }

                                );

                                .media-xs( {
                                        padding: 10x 5px 10px 15px;
                                        width : 65%;
                                    }

                                );

                                p {
                                    .font-title1;
                                    margin: 0;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;

                                    .media-xs( {
                                            font-size: 12px;
                                        }

                                    );
                                }
                            }

                            /* COUNTDOWN */
                            .flash-sale-countdown {
                                position: absolute;
                                left: 0px;
                                right: 0px;
                                bottom: 65px;
                                background: @button;
                                border-radius: 10px;
                                padding: 20px 10px;
                                z-index: 2;

                                .media-sm( {
                                        bottom: 90px;
                                    }

                                );

                                .media-xs( {
                                        border-radius: 5px;
                                        padding : 10px;
                                        bottom : 50px;
                                    }

                                );

                                .countdown-area-cd-time {
                                    display: flex;
                                    justify-content: center;
                                    gap: 15px;

                                    .media-sm( {
                                            gap: 10px;
                                        }

                                    );

                                    .media-xs( {
                                            gap: 25px;
                                        }

                                    );

                                    .media-xxs( {
                                            gap: 20px;
                                        }

                                    );
                                }

                                .countdown-area-cd-time-item {
                                    position: relative;

                                    &:not(:last-child):after {
                                        content: ":";
                                        position: absolute;
                                        right: calc(-1 * (15px / 2));
                                        top: 35%;
                                        transform: translate(50%, -50%);
                                        font-size: 20px;
                                        color: @white;
                                        .font-title1;

                                        .media-sm( {
                                                font-size: 18px;
                                                right : calc(-1 * (10px / 2));
                                            }

                                        );

                                        .media-xs( {
                                                right : calc(-1 * (25px / 2));
                                                font-size: 16px;
                                            }

                                        );

                                        .media-xs( {
                                                right : calc(-1 * (20px / 2));
                                                font-size: 4vw;
                                            }

                                        );
                                    }
                                }

                                .countdown-area-cd-time-item-number {
                                    .font-title1;
                                    color: @white;
                                    font-size: 20px;
                                    letter-spacing: 0.04em;
                                    text-align: center;

                                    .media-sm( {
                                            font-size: 18px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 16px;
                                        }

                                    );

                                    .media-xxs( {
                                            font-size: 4vw;
                                        }

                                    );
                                }

                                .countdown-area-cd-time-item-label p {
                                    .font-body2;
                                    color: @white;
                                    font-size: 14px;
                                    letter-spacing: 0.04em;
                                    text-align: center;
                                    margin: 0;

                                    .media-sm( {
                                            font-size: 12px;
                                        }

                                    );

                                    .media-xs( {
                                            font-size: 11px;
                                        }

                                    );

                                    .media-xxs( {
                                            font-size: 2vw;
                                        }

                                    );
                                }
                            }
                        }

                        &-image {
                            width: 100%;
                            height: 450px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            overflow: hidden;
                            margin-bottom: 15px;

                            .media-sm( {
                                    height: 250px;
                                }

                            );

                            .media-xs( {
                                    height : 275px;
                                    margin-bottom: 10px;
                                }

                            );

                            .media-xxs( {
                                    height: 200px;
                                }

                            );

                            img {
                                /* width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: 50% 50%; */
                                max-width: 100%;
                                max-height: 100%;
                                width: auto;
                                height: auto;
                                object-fit: contain;
                            }
                        }

                        &-title {
                            margin-bottom: 10px;

                            .media-xs( {
                                    margin-bottom: 5px;
                                }

                            );

                            p {
                                .font-title3;
                                color: @dark;
                                font-size: 20px;
                                letter-spacing: 0.04em;
                                text-transform: capitalize;

                                .media-xs( {
                                        font-size: 14px;
                                    }

                                );
                            }
                        }

                        &-subtitle {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 10px;

                            &-desc {
                                p {
                                    .font-body2;
                                    color: @dark;
                                    font-size: 16px;
                                    letter-spacing: 0.02em;

                                    .media-xs( {
                                            font-size: 12px;
                                        }

                                    );
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}