/* tablet horizontal */

@media screen and (min-width: 768px) and (max-width: 960px){
    .memu-bar-header,.hide-on-mobile,.hide-on-tab-mobile{
        display: none !important;
    }
    .container{
        max-width: 100% !important;
    }
    .menu-item-759 {
        display: none !important;
    }
    .w-80-center{
        width: 90%;
        margin: 0 auto;
    }
    .w-70-center{
        width: 80%;
        margin: 0 auto;
    }
    article.hide-on-pc{
        background-color: #ffffff;
    }
    .font-8px {
        font-size: 8px;
    }

    .font-10px {
        font-size: 9px;
    }

    .font-12px {
        font-size: 12px;
    }
    
    .font-14px {
        font-size: 14px;
    }

    .font-16px {
        font-size: 16px;
    }

    .font-18px {
        font-size: 18px;
    }

    .font-20px {
        font-size: 20px;
    }

    .font-24px {
        font-size: 24px;
    }

    .font-28px {
        font-size: 28px;
    }

    .font-32px {
        font-size: 32px;
    }

    .font-33px {
        font-size: 33px;
    }

    .font-36px {
        font-size: 36px;
    }

    .font-38px {
        font-size: 38px;
    }

    .font-44px {
        font-size: 44px;
    }

    .font-48px {
        font-size: 48px;
    }

    .font-54px {
        font-size: 54px;
        line-height: 1.3;
    }

    .font-64px {
        font-size: 64px;
        line-height: 1;
    }

    .font-72px {
        font-size: 72px;
    }

    .font-84px {
        font-size: 84px;
    }

    .font-114px {
        font-size: 114px;
    }

    .font-200px {
        font-size: 200px;
        line-height: 1;
    }


    .font-5m{
        font-size: 5px;
    }
    .font-8m{
        font-size: 8px;
    }
    .font-10m{
        font-size: 10px;
    }
    .font-12m{
        font-size: 12px;
    }
    .font-14m{
        font-size: 14px;
    }
    .font-16m{
        font-size: 16px;
    }
    .font-18m{
        font-size: 18px;
    }
    .font-20m{
        font-size: clamp(17px,5vw,20px);
    }
    .font-22m{
        font-size: clamp(18px,5.0vw,22px);
    }
    .font-24m{
        font-size: 24px;
    }
    .font-28m{
        font-size: 28px;
    }
    .font-30m{
        font-size: 30px;
    }
    .font-32m{
        font-size: 31px;
    }
    .font-42m{
        font-size: 42px;
    }
    .font-48m{
        font-size: 48px;
    }
    .font-68m{
        font-size: clamp(54px, 15.8vw ,68px);
    }
    .font-75m{
        font-size: 75px;
    }

    /* !menu!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
    .mobile-logo img{
        height: 23px;
    }

    .button-hamburger,
    .button-hamburger:hover {
        background: none;
        border: none;
        padding: 0;
    }

    .sidebar-page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateX(-100%);
        transition: all 0.7s;
        max-width: 100%;
        width: 100%;
        z-index: 100;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0em 5%;
        background: #191919;
        padding-top: 5em;
        justify-content: space-evenly;
    }

    .show-sidebar {
        transform: translateX(0);
        transition: transform 1s;
    }

    .nav.d-grid {
        grid-template-columns: 50% 1fr;
        justify-content: space-between;
        justify-items: self-start;
        max-width: 100% !important;
        align-items: center;
        width: 100%;
        padding: 18px 20px 14px 20px;
        background-color: #191919;
        box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);

    }

    .site-content {
        padding: 0 !important;
    }

    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .entry-content:not(:first-child),
    .entry-summary:not(:first-child),
    .page-content:not(:first-child) {
        margin-top: 1em;
    }

    .mobile-icons.d-flex {
        gap: 1em;
        align-items: center;
        justify-content: end;
        width: 100%;
    }

    .close-bt button img {
        width: 80%;
    }

    .close-bt {
        position: absolute;
        top: 4rem;
        right: 0;

        button {
            background: transparent;
        }
    }

    .main-menu.menu_main_position {    

        ul.menu {
            margin: 0;
            padding-left: 0;
            list-style: none;

            &>li {
                border-bottom: 1px solid var(--color-text-green);
                padding: 1rem 1rem 1rem 0;

                a {
                    color: #fff;
                    font-weight: 300;
                    font-size: 20px;
                    transition: all 0.5s ease-in-out;
                    text-transform: uppercase;
                }
            }

            &>li.current-menu-item {

                &>a {
                    color: #fff;
                    transition: all 0.5s ease-in-out;
                }
            }
        }
    }

    .contact-nav{
        border-bottom: 1px solid var(--color-text-green);
        padding: 1rem 1rem 1rem 0;

        a{
            font-weight: 300;
            font-size: 20px;
            transition: all 0.5s ease-in-out;
            text-transform: uppercase;
        }
    }

    ul.menu .sub-menu {
        position: static;
        /* ✅ ยกเลิก absolute */
        padding-left: 20px;
        list-style: none;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;

        li {
            padding: 8px 0;

            a {
                color: #fff;
                font-weight: 300;
                font-size: 16px;
                display: inline;
            }
        }
    }

    .main-menu .submenu-open>.sub-menu {
        max-height: 1000px;
    }

    .main-menu .menu-item-has-children::before {
        content: url(./assets/icon/down.svg);
        width: 20px;
        float: right;
        /* position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-50%, -50%); */
        padding-right: 10px;
    }

    .nav_items {
        margin: 2rem 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .nav_grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 10px;

            img {
                filter: brightness(0.5);
            }
        }
    }
    .contact_form_grid{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .nav_footer {
        border-top: 1px solid var(--color-text-green);
        padding: 1rem 0 3rem;
    }

    .contact_bt{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 1.5rem;
        padding: 0 10%;
    }


    .social_icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

        

        /* !menu!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


        /* !home ----------------------------------------------------------------------------------*/
        /* *start main_banner*/
        .main_banner {
            position: relative;
        }

        .main_banner_box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 5;
            display: flex;
            padding: 2.5rem 5%;
            align-items: start;
            overflow: hidden;

            .main_banner_text {
                display: flex;
                width: 100%;
                position: relative;
                height: 100%;
            }
        }

        .border-g {
            padding: 0.3rem 1rem;
            border: 1px solid var(--color-text-green);
            background-color: #00000080;
            width: fit-content;
        }

        .max-w-500 {
            max-width: 508px;
        }

        .text_group_3 {
            display: flex;
            /* flex-direction: column; */
            gap: 0.5rem;
            align-items: center;
            margin-top: 2rem;
        }

        .bt {
            width: 90%;
            margin: 0 auto;
            padding: 0.3rem 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;

            &.green {
                background-color: var(--color-text-green);
                color: #3A1C5C;
                border: solid 1px var(--color-text-green);
            }

            &.purple {
                background-color: var(--color-text-d-purple);
                color: #ffffff;
                border: solid 1px var(--color-text-d-purple);
            }

            &.white {
                background-color: #19191980;
                color: #ffffff;
            }

            &.trans {
                background-color: #19191980;
                border: solid 1px #ffffff;
                color: #ffffff;
            }


        }

        .banner_box_left {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: space-between;

            .mobile_gap{
                display: flex;
                flex-direction: column;
                gap: 2rem;
            }
        }

        .banner_box_right{
            position: absolute;
            bottom: 200px;
            right: 0;
            max-width: 80px;
        }


        /* *end main_banner*/

        /* *start stats*/

        .stats {
            position: relative;
            padding: 1rem 0;
            background: url(./assets/banner/home_banner_1_bg.png) center / cover;
            background-color: #191919;
            display: flex;
            align-items: center;

            .w-80-center {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }

        }

        /* .stats::before {
            content: "";
            position: absolute;
            left: 199px;
            right: 200px;
            bottom: 0;
            height: 1px;
            background: var(--color-text-green);
        } */

        .stat {
            display: flex;
            gap: 0.5rem;
            align-items: center;

            h4 {
                margin-bottom: 0;
            }
        }

        .stat .icon {
            width: 54px;
            height: 54px;
            background: var(--color-text-green);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .stat .icon svg {
            width: 29px;
            height: 29px;
        }



        /* *end stats*/

        /* *start quality*/

        section.quality {
            background-color: #191919;
            padding: 1rem 0 1.5rem;
            margin-top: -2px;

            .w-80-center {
                border-top: 1px solid var(--color-text-green);
                padding: 3rem 0;
            }
        }

        .section-eyebrow {
            font-size: 10px;
            font-weight: 500;
            color: var(--color-text-green);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-eyebrow::before {
            content: "─────";
            letter-spacing: -1px;
            color: var(--color-text-green);
        }


        .lang-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-top: 2.5rem;
        }

        .lang-grid h5 {
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 1px;
            color: var(--color-text-green);
            margin-bottom: 12px;
        }

        .lang-grid p {
            font-size: 14px;
            font-weight: 300;
            color: #ffffff;
            line-height: 1.5;
            white-space: pre-line;
        }

        /* dots */
        .dots {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 32px;
        }

        .dots span {
            width: 16px;
            height: 5px;
            background: rgba(155, 202, 59, .3);
        }

        .dots span.on {
            background: var(--color-text-green);
        }

        /* *end quality*/

        /* *start marquee*/

        .marquee {
            height: 35px;
            background: var(--color-text-green);
            color: #3A1C5C;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0px;
            font-size: 20px;
            letter-spacing: 1px;
            overflow: hidden;
            white-space: nowrap;

            span {
                font-family: "Fugaz One";
                letter-spacing: 5px;
                line-height: 1;
            }
        }

        .marquee .star {
            font-size: 20px;
            line-height: 1;
        }

        .marquee .outline {
            -webkit-text-stroke: 1px #3A1C5C;
            color: transparent;
        }

        /* *end marquee*/

        /* *start trust*/

        section.trust {
            background-color: #3A1C5C;
            padding: 1rem 0 1.5rem;

            .w-80-center {
                padding: 3rem 0;
            }

            .lang-grid{
                padding: 0 2rem;
            }
        }

        .trust_slide {
            position: relative;
            margin-top: 2rem;
        }

        /* ?swiper_setting */
        .swiper-slide--one img{
            width: 100%;
        }

        .swiper-trust_slide-next,.swiper-about_section-next {
            background-image: url(assets/icon/button_n.svg) !important;
            background-repeat: no-repeat;
            width: var(--icon-next-prev-width) !important;
            height: var(--icon-next-prev-width) !important;
            right: -10px !important;
            opacity: 1 !important;
        }

        .swiper-trust_slide-prev,.swiper-about_section-prev {
            background-image: url(assets/icon/button_p.svg) !important;
            background-repeat: no-repeat;
            width: var(--icon-next-prev-width) !important;
            height: var(--icon-next-prev-width) !important;
            opacity: 1 !important;
            left: -10px !important;
        }

        .swiper-trust_slide-next:after,.swiper-about_section-next:after,
        .swiper-trust_slide-prev:after,.swiper-about_section-prev:after {
            content: '' !important;
        }

        .trust_slide_pagination,.about_section_pagination {
            bottom: -25px !important;
        }

        .trust_slide_pagination .swiper-pagination-bullet-active,.about_section_pagination .swiper-pagination-bullet-active{
            width: 50px;
            border-radius: none;
        }


        /* *end trust*/

        /* *start og_banner*/
        section.og_banner {
            background-color: #3A1C5C;
            margin-top: -2px;
        }

        /* *end og_banner*/

        /* *start our-shop*/

        .our-shop {
            position: relative;
            background: #180D25;
            padding: 80px 0 80px;
            overflow: hidden;

            .w-80-center {
                position: relative;
            }
        }

        .our-shop .ghost-title {
            position: absolute;
            right: 0;
            left: 0;
            top: 60px;
            font-family: "Fugaz One";
            font-size: 77px;
            line-height: 1;
            color: #B3529F;
            opacity: 0.1;
            pointer-events: none;
            text-align: center;
            text-transform: uppercase;
            margin: 0;
            line-break: anywhere;
        }

        .our-shop .sub {
            font-size: 14px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 8px;
            margin-bottom: 50px;
        }



        .shop_area_img {
        margin-top: 3rem;
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto auto;
        gap: 10px 10px;
        grid-template-areas:
            "g_1 g_1 g_2 g_4"
            "g_1 g_1 g_3 g_4"
            "g_5 g_6 g_7 g_7";

        .g_1 {
            grid-area: g_1;
        }

        .g_2 {
            grid-area: g_2;
        }

        .g_3 {
            grid-area: g_3;
        }

        .g_4 {
            grid-area: g_4;
        }

        .g_5 {
            grid-area: g_5;
        }

        .g_6 {
            grid-area: g_6;
        }

        .g_7 {
            grid-area: g_7;
        }

        .area_w {
            width: 100%;
            overflow: hidden;
            object-fit: cover;
        }

    }

        .our-shop-flex {
            margin-top: 2rem;
            background-color: #191919;
            border-left: 5px solid var(--color-text-green);
            padding: 1.35rem 8%;
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: flex-start;
        }

        .our-shop-flex .copy {
            flex: 1;
        }

        .our-shop-flex .copy h5 {
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 1px;
            color: var(--color-text-green);
        }

        .our-shop-flex .copy p {
            font-size: 14px;
            font-weight: 300;
            color: #ffffffb9;
        }

        /* *end our-shop*/

        /* *start review*/

        section.review {
            background-color: #191919;
            padding: 1rem 0 1.5rem;

            .w-80-center {
                padding: 3rem 0;
            }

            h2{
                text-align: center;
            }
        }

        .review_js {
            position: relative;
            margin-top: -10rem;
        }


        /* *end feature*/

        section.feature {
            --icon-next-prev-width: 20px;
            background: url(./assets/banner/home_banner_2_bg.png) center / cover;
            background-color: #3A1C5C;
            padding: 1rem 0 1.5rem;

            .w-80-center {
                padding: 3rem 0;
            }
        }

        .feature_card {
            margin-top: 2rem;
            display: grid;
            grid-template-columns:  1fr;

            img{
                width: 100%;
                max-height: 340px;
                object-fit: cover;
            }

            .bt{
                width: 100%;
            }
        }

        .feature_card_box {

            background-color: #191919;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 12px;

            img {
                width: 100%;
                object-fit: cover;
            }
        }

        .badge_section {
            display: flex;
            gap: 10px;
            align-items: center;

            .badge_green {
                background-color: var(--color-text-green);
                padding: 5px;
                color: #3A1C5C;
            }
        }

        .feature_title {
            h2 {
                line-height: 1;
            }
        }

        .feature_card_bt {
            width: 100% !important;
        }

        /* *start feature*/


        /* *end */

        .more {
            background: #191919;
            padding: 60px 0 60px;
        }

        .more .head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .more h3 {
            font-family: "Fugaz One";
            font-size: 24px;
            color: var(--color-text-green);
        }

        .more .view-all {
            font-family: "Prompt";
            font-weight: 500;
            font-size: 14px;
            color: var(--color-text-green);
            text-decoration: underline;
            margin-top: 2rem;
            display: inline-block;
        }

        .more-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1rem;
            align-items: stretch;
        }

        .mini-article {
            background: #180D25;
            display: block;
            border-bottom: 5px solid var(--color-text-green);
        }

        .mini-article .thumb {
            width: 100%;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #2a1547, #18102a);

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

        .mini-article .body {
            padding: 20px;
            height: 195px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .mini-article .tags {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            font-size: 10px;
            margin-bottom: 12px;
        }

        .mini-article .tag {
            
            color: var(--color-text-green);
            text-transform: uppercase;
            padding: 4px 8px;
            font-weight: 500;
        }

        .mini-article .tag.muted {
            background: transparent;
            color: var(--color-text-green);
        }

        .mini-article .min {
            color: #fff;
            font-weight: 300;
            font-size: 8px;
        }

        .mini-article h5 {
            font-family: "Prompt";
            font-weight: 400;
            font-size: 18px;
            color: #fff;
            line-height: 1;
            margin-bottom: 12px;
        }

        .mini-article .sub {
            font-size: 12px;
            color: rgba(255, 255, 255, .7);
            font-weight: 300;
            margin-bottom: 12px;
        }

        .mini-article .read {
            font-size: 12px;
            color: var(--color-text-green);
            text-decoration: none;
        }

        /* *start visit*/


        .visit{
            position: relative;
            background: #1E2E17;
            padding: 60px 0;
            overflow: hidden;

            .w-80-center {
                position: relative;
            }

            p{
                max-width: 80%;
            }
        }

        .visit .ghost-title {
            position: absolute;
            right: 0%;
            left: 0;
            top: 60px;
            font-family: "Fugaz One";
            font-size: 84px;
            line-height: 1;
            color: #9BCA3B;
            opacity: 0.1;
            pointer-events: none;
            text-align: right;
            text-transform: uppercase;
            margin: 0;
        }


        /* *end visit*/

        /* *start */


        /* *end */

        /* *start */


        /* *end */

        /* *start */


        /* *end */

        /* !END-home ----------------------------------------------------------------------------------*/

        /* !footer ----------------------------------------------------------------------------------*/


        section.footer_main {
            --address-width: 300px;
            --grid-gap: 1rem;
            padding: 2rem 0 0;
            background: #180D25;
            margin-top: -10px;
            position: relative;
            z-index: 10;

            .logo_footer {
                display: grid;
                grid-template-columns: 0.55fr 0.5fr 0.55fr;

                .border_bt{
                    border-bottom: 0.5px solid var(--color-gold-light);
                }

                picture{
                    margin: 0 auto;

                    
                }
            }

        }

        .footer_main_grid {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: var(--grid-gap);
            margin: 2rem 0;
            text-align: center;


            div.contact_form_grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }

            

            .contact-ul{
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }


            ul {
                margin: 0;
                padding-left: 0;
                list-style: none;

                li a {
                    color: var(--color-gr);
                    font-size: 14px;
                    font-weight: 200;
                }
            }

            .footer_main_items {
                display: flex;
                justify-content: center;
                width: 100%;

                picture img{
                    display: block;
                    height: 39px !important;
                    width: fit-content !important;
                    margin: 0 auto;
                }

                .right{
                    width: 140px;
                }
            }

            .footer_flex_ul {
                display: flex;
                gap: var(--grid-gap);

                ul{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 0.5rem;

                    color: #fff;
                }
            }

            .footer_main_items>div>p {
                padding-bottom: 1rem;
            }
            .footer_room a{
                transition: all 0.5s ease-in-out;

                &:hover{
                    color: #000 !important;
                    font-weight: 400;
                    transition: all 0.5s ease-in-out;
                }
            }

            .footerset {

                &.menu_main_position{
                    justify-content: space-between;
                }
                
                .translate_tab{
                    bottom: -12px;
                }
                .trp-shortcode-switcher{
                    padding: 0 !important;
                }
            }

            .qr_footer{
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 0.5rem;

                img{
                    width: 100%;
                }
            }
        }

        .copy_right {
            margin-top: 1rem;
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: var(--grid-gap);
            padding: 0.8rem 10%;
            background: #3A1C5C;
            text-align: center;
        

            .social_icon {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.25rem;
            }

            a:nth-child(3){
                text-align: right;
            }

        }

        .icon_float{
            position: fixed;
            bottom: 5vh;
            right: 1rem;
            z-index: 110;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            
            .icon a img{
                aspect-ratio: 1;
                transform: translateX(0px);
                transition: all 0.5s ease-in-out ;
            }

            .icon a:hover img{
                transform: translateX(-20px);
                transition: all 0.5s ease-in-out ;
            }
        }

        /* !END-footer ----------------------------------------------------------------------------------*/



        /* !about ----------------------------------------------------------------------------------*/

        /* *start main_banner og*/

        .og{
            background-color: #3A1C5C;

            .main_banner_box{
                padding: 2rem 5%;
            }
        }

        .og_banner_text{
            display: flex;
            flex-direction: column;
            width: 100%;
            
        }

        .og_banner_text .ghost-title {
            position: absolute;
            right: -20px;
            left: 0;
            top: -17px;
            font-family: "Fugaz One";
            font-size: 100px;
            line-height: 1;
            color: #9BCA3B;
            opacity: 0.1;
            pointer-events: none;
            text-align: right;
            text-transform: uppercase;
            font-style: normal;
            margin: 0;
            overflow: hidden;;

            .outline {
                -webkit-text-stroke: 1px #9BCA3B;
                color: transparent;
            }
        }


        /* *end main_banner og*/


        /* *start about*/

        section.about{
            padding: 60px 0;
            background-color: #191919;
            position: relative;
            margin-top: -10px;
            z-index: 10;

            .text_group_3{
                margin-top: 3rem;
            }
        }

        .about_grid{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;

            .about_info{
                width: 100%;
            }
            .about_slide{
                width: 100%;
                position: relative;
            }
        }

        .lang-grid.about {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }


        /* *end about*/

        /* *start why_og*/

        section.why_og{
            background-color: #180D25;
        }

        .why_og_grid{
            display: grid;
            grid-template-columns: 1fr;
        }
        .why_og_text{
            padding: 60px 5%;

            .lang-grid{
                margin-top: 1.5rem;
                padding: 0 2rem;
            }
        }


        /* *end why_og*/

        /* *start address_map*/

        .address_map{
            position: relative;
            background-color: #3A1C5C;
            padding: 60px 0;

            .w-80-center{
                position: relative;
            }
        }

        .address_map .ghost-title {
            position: absolute;
            right: 0%;
            left: 0;
            top: -40px;
            font-family: "Fugaz One";
            font-size: 84px;
            line-height: 1;
            color: #B3529F;
            opacity: 0.1;
            pointer-events: none;
            text-align: center;
            text-transform: uppercase;
            margin: 0;
        }

        .address_map_grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .map_box{
            background-color: #191919;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-top: -5px;

            .bt{
                width: 100%;
            }
        }

        .cert{
            background-color: #191919;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .cart_bt{
            margin-top: 0.5rem;
            width: 100%;
        }

        .oder_section{
            display: flex;
            flex-direction: column-reverse;
        }


        /* *end address_map*/

        /* *start contact*/

        section.contact{
            background-color: #191919;
            background: url('./assets/banner/bg_contact.png') center / cover;
            padding: 95px 0;
        }
        .contact_grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 5px solid var(--color-text-green);
        }
        .contact_bg img{
            height: 100%;
            object-fit: cover;
        }
        .contact_form{
            background-color: #3A1C5C;
            padding: 1.5rem;
        }

        /* .contact_bg{
            background: url('./assets/banner/about_banner_1.png') center / cover;
        } */

        /* ?form */

        .wpforms-container-full{
            margin: 1rem 0 0 !important;
        }

        label.wpforms-field-label {
            margin: 0 !important;
            font-size: 12px !important;
            font-weight: 300 !important;
            color: var(--color-text-green) !important;
            display: flex !important;
            justify-content: space-between;
        }
        .wpforms-container .wpforms-field{
            padding: 0 0 1rem !important;
        }

        .wpforms-container input[type=text],div.wpforms-container-full input[type=email],div.wpforms-container-full input[type=number]{
            height: 30px !important;
            background-color: #180D25 !important;
            border: 0.5px solid #4C4C4C00 !important;
        }
        div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium{
            color: #fff;
            background-color: #180D25 !important;
            height: 90px !important;
            border: 0.5px solid #4C4C4C00 !important;
        }
        input::placeholder,textarea::placeholder{
            font-size: 14px !important;
            font-weight: 200 !important;
            color: #464646 !important;
        }



        button.wpforms-submit {
            background-color: #9BCA3B !important;
            color: #3A1C5C !important;
            padding: 0rem 3rem !important;
            font-weight: 400 !important;
            font-size: 14px !important;
            text-transform: uppercase !important;
            width: 100% !important;
            border-radius: 0 !important;
        }

        .wpforms-submit-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100% !important;
        }

        /* ?form */


        /* *end contact*/

        /* *start */


        /* *end */

        /* !about----------------------------------------------------------------------------------*/

        /* !article ----------------------------------------------------------------------------------*/

        /* *start main_banner blog*/

        .blog{
            background-color: #3A1C5C;
        }

        .og_banner_text.blog_text .ghost-title{
            margin-top: 7px;
            right: -80px;
            font-style: normal;
        }

        .blog_cat{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 2rem 0 0;

            .tag-border{
                padding: 5px 16px;
                text-align: center;
                text-transform: uppercase;
                border-width: 1px;
                border-style: solid;
                background-color: #00000080;
                font-size: 10px;
            }

            .b-green{
                border-color: var(--color-text-green);
                color: var(--color-text-green);

                &.active{
                    background-color: var(--color-text-green);
                    color: white;
                }
            }

            .b-white{
                border-color: #fff;
                color: #fff;
            }
        }

        .article_main{
            background-color: #3A1C5C;
            padding: 0px 0 80px;
            margin-top: -2px;

            .w-80-center{
                display: flex;
                flex-direction: column;
                gap: 1rem;
                position: relative;
                margin-top: -200px;
            }
        }


        /* *end main_banner blog*/

        /* *start */


        /* *end */

        /* *start */


        /* *end */

        /* *start */


        /* *end */

        /* *start */


        /* *end */


        /* !END-article ----------------------------------------------------------------------------------*/

        /* !single-post ----------------------------------------------------------------------------------*/

        .single_flex{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;

            .tag-border{
                margin-top: 0 !important;
            }
        }

        .cat_read{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            gap: 8px;
        }

        .post_banner{
            position: relative;
            margin-top: -40px;
        }

        .post_content{
            padding: 30px 0;
            background-color: #3A1C5C;
        }

        .post_content_grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        .article-menu {
            list-style: none;
            position: relative;
            margin: 0;
            padding: 0.8rem 0 0.5rem 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .article-menu::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 2px;
            height: 100%;
            background: white;
        }

        .menu-item {
            position: relative;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
            color: white;
        }

        .menu-item.active {
            color: #9be22d;
        }

        .menu-item.active::before {
            content: "";
            position: absolute;
            left: -33px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 25px;
            background: #9be22d;
        }

        .visit_box{
            background: #9be22d;
            padding: 1.5rem 2rem;

            .bt{
                width: 100%;
            }
        }


        /* !single-post ----------------------------------------------------------------------------------*/

        /* !policy----------------------------------------------------------------------------------*/

        section.pdpa{
            padding: 30px 0;
            background-color: #191919;
        }

        .pdpa_grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            margin-bottom: 2rem;
        }
        .pdpa_content{
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .pdpa_legal ul{
            margin: 0;
            list-style:disc;

            li{
                font-size: 14px;
                color: #fff;
            }
        }


        /* !policy ----------------------------------------------------------------------------------*/


        /* !page_404 ----------------------------------------------------------------------------------*/

    .page_404{
        position: relative;
        background-color: #3A1C5C;
        top: -2px;

        .ghost-title {
            position: absolute;
            right: 0;
            left: 0;
            top: 25%;
            font-family: "Fugaz One";
            font-size: 200px;
            line-height: 1;
            color: #9BCA3B;
            opacity: 0.1;
            pointer-events: none;
            text-align: center;
            text-transform: uppercase;
            margin: 0;
        }

        .page_404_box{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 32px 5%;
            display: flex;
            flex-direction: column;
            gap: 5rem;
        }


        .text_group_3{
            margin-top: 2rem;
            justify-content: center;

            .bt{
                width: 100%;
            }
        }

    }



    /* !page_404 ----------------------------------------------------------------------------------*/
}