@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

#main_index {
    padding-bottom: 0px !important;
    overflow: hidden !important;
}

.np_language_btn .dropdown_btn {
    background-color: #d1411b;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 0 0 5px 5px;
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
}

.np_language_btn .dropdown_btn span {
    color: #fff;
}

#language_dropdown a {
    padding: 0 !important;
}

#language_dropdown a {
    padding: 0 !important;
    color: #fff;
}

.np_language_btn {
    position: fixed!important;
}

a:hover{
    text-decoration: none;
    color: #888;
}

.navbar_type8 {
    background-color: #fff;
    position: absolute;
}

.navbar_type8 {
    width: 100%;
    height: 50px;
    z-index: 100;
}

.dark_nav{
    background-color: #fff !important;
    position: fixed;
}

.navbar_type8 .logo {
    display: none;
}

.navbar_type8 .nav_tab {
    flex: 0 1 100%;
    justify-content: center;
}

.navbar_type8 .nav_tab {
    padding-left: 15px;
    padding-right: 0vw;
    flex-wrap: nowrap;
}

.navbar_type8 .nav_tab .nav_item::before {
    top: 110%;
    border-bottom: 3px solid #4b4b4b;
    display: none;
}

.navbar_type8 .nav_tab .active {
    color: #000 !important;
}

.navbar_type8 .nav_tab .nav_item a{
    color: #000;
    font-size: 1.1vw;
    font-weight: 700;
    padding: 15px 30px;
}

.navbar_type8 .nav_tab .nav_item a:hover{
    color: #d1411b;
}

.navbar_type8 .nav_tab .nav_item{
    text-transform: capitalize;
}

.editor {
    position: relative;
    z-index: 999;
    border-bottom: 1px solid #d1411b;
    padding: 0.5vw 1vw 0.5vw 1vw;
}

.logo-img {
    height: 95px;
    width: auto;  
    max-width: 100%;
}

.editor a:hover{
    text-decoration: none;
    color: #d1411b !important;
}

.topcontact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* margin-left: 6vw; */
    left: 3vw;
    top: 0.5vw;
}

.topcontact img {
    height: 80px; 
    max-width: 100%;
}

.topcontact a {
    color: #000;
    font-size: 0.95vw;
    font-weight: 600;
}

.topicon{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.topicon.scroll_menu {
    position: fixed;
    z-index: 9999;
    top: 0.6vw;
    right: 10vw;
    width: auto;
}

.topicon > div {
    margin-right: 2.5vw;
    margin-top: 0.5vw;
}

.editor .login .dropdown-menu {
    z-index: 1;
    background-color: transparent;
    top: 20px;
    border: none;
    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    right: auto;
    left: 0;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: left;
    position: absolute;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    list-style: none;
    background-clip: padding-box;
    border-radius: .25rem;
}

.editor .login .dropdown-menu .dropdown-item a {
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: transparent;
    padding: 0.5rem 1rem !important;
    color: #fff;
    font-size: 14px;
}

.editor .login .dropdown-menu .dropdown-item a:hover{
    text-decoration: none;
    background: #454343;
}

.editor .login .dropdown-menu .dropdown-item {
    background-color: rgba(75, 75, 75, 0.9);
    display: flex;
    flex-direction: column;
    max-width: 350px;
    min-width: 150px;
    padding: 0;
}

.editor.login:focus .dropdown-menu, .editor .login:hover .dropdown-menu {
    display: block;
}

.editor .login {
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
    display: flex;
    position: relative;
}

.editor .shopping{
    margin-right: 10px;
    display: flex;
}

.editor .shopping > a {
    display: flex;
    padding: 0 15px 0 0 !important;
}

.editor .bi-search {
    font-size: 1.2vw;
}

.editor .topicon.scroll_menu .shopping .fa-shopping-cart, .editor .topicon.scroll_menu .fa-user, .editor .topicon.scroll_menu .fa-search{
    font-size: 20px !important;
}

.nav_search {
    flex-grow: 1;
    display: flex;
    max-width: 100%;
    align-self: center;
    margin-bottom: -5px;
    border: 1px solid #e0dede;
    box-shadow: 0px 0px 7px rgb(191 191 191 / 65%);
}

.editor .scroll_menu .nav_search{
    border: none;
}

.nav_search input {
    background: rgba(240, 242, 245, 1);
    width: 100%;
    height: 45px;
    border: 0;
    box-shadow: none;
    padding: 5px 60px 5px 25px;
    border-radius: 0;
    max-height: 45px;
}

.nav_search .search_button {
    background-color: #f0f2f5;
    color: white;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 15px;
    max-height: 45px;
}

.boxSearch .fa-search{
    font-size: 18px !important;
}

.dark_nav.sticky-search{
    margin-top: 60px;
}

.btnSearch {
    position: relative;
    z-index: 999;
    cursor: pointer;
    transition: all .43s ease-in-out;
}

.boxSearch {
    display: none;
    position: absolute;
    top: 70px;
    left: 7vw;
}

.scroll_menu .boxSearch {
    display: none;
    position: absolute;
    top: 60px;
    left: -265px;
    width: 300px;
}

.btnClose .bi-search:before {
    content: "\f62a";
    font-size: 24px;
    vertical-align: bottom;
    margin-right: -5px;
}

.editor .scroll_menu .btnClose .fa-search:before{
    font-size: 20px;
}

.editor .scroll_menu .boxSearch .bi-search{
    transition: all .3s ease;
}

.editor .fa-search{
    line-height: 24px;
}

.nav_search .search_button:hover .bi-search{
    color: #b7b7b7;
}

.nav_search .search_button:focus{
    outline: none;
}

.navbar_type8 .nav_tab .login, .navbar_type8 .nav_tab .shopping{
    display: none;
}

.dark_nav .nav_tab {
    padding-right: 170px;
    box-shadow: 0 0 5px #aaa;
}

#main_index .m_editor{
    display: none;
}

.m_editor{
    display: none;
}

@media screen and (max-width: 1200.5px){
    .topcontact a {
        color: #000;
        font-size: 1.2vw;
        font-weight: 600;
    } 
    
    .logo-img {
        height: 80px;
        width: auto;
        max-width: 100%;
    }
    
    .navbar_type8 .nav_tab .nav_item a {
        color: #000;
        font-size: 1.3vw;
        font-weight: 700;
        padding: 15px 30px;
    }
    
    .navbar_type8 .nav_tab .nav_item a {
        color: #000;
        font-size: 1.3vw;
        font-weight: 700;
        padding: 15px 14px;
    }

    .social-media-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1px;
        align-items: center;
        margin-right: 1vw;
        margin-top: 0.2vw;
    }
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    
}

/*Banner*/

.banner_content{
    overflow: hidden;
    opacity: 1 !important;
}

.n_bannerContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.n_bannerGroup {
    position: relative;
    width: 100%;
    height: 100%;
}

.n_bannerInnerGroup {
    position: absolute;
    top: 48%;
    left: 15%;
    transform: translate(-20%, -50%);
    width: 40%;
}

.n_bannerImg {
    position: absolute;
    width: 68%;
    z-index: 0;
    top: 5.5vw;
    right: 12vw;
    opacity: 1;
}

.n_bannerContainer2 .n_bannerImg {
    width: 55%;
  right: unset;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1200.5px){
    
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .n_bannerImg {
        position: absolute;
        width: 95%;
        z-index: 0;
        top: 14.5vw;
        right: 2vw;
        opacity: 1;
    } 
    .n_bannerContainer2 .n_bannerImg {
        width: 90%;
        top: 28%;
    }
}

/*hp_why*/

.hp_why {
    position: relative;
    padding: 4vw 7vw 2vw 7vw;
    background-color: #d1411b;
}

.hp_why::after {
    content: '';
    position: absolute;
    top: 21.3vw;
    right: 39vw;
    width: 50%;
    height: 43%;
    background-image: url(../../cdn1.npcdn.net/img/1741317957CK_S02_-40.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    z-index: 0;
}

html:lang(en) .hp_why::after {
    content: '';
    position: absolute;
    top: 21.3vw;
    right: 39vw;
    width: 50%;
    height: 28%;
    background-image: url(../../cdn1.npcdn.net/img/1747815336CK_SEC02_Service.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    z-index: 0;
}

.hp_why .col-md-5 {
    /*-ms-flex: 0 0 41.666667%;*/
    /*flex: 0 0 41.666667%;*/
    /*max-width: 41.666667%;*/
    padding: 0px;
}

.hp_why_item {
    display: flex;
    text-align: left;
    width: 100%;
    max-width: 600px; 
    /*border-bottom: 1px solid #999;*/
    /*border-right: 1px solid #999;*/
    padding-bottom: 1.5vw;
}

.hp_why_item2 {
    display: flex;
    text-align: left;
    width: 100%;
    max-width: 600px; 
    /*border-bottom: 1px solid #999;*/
    /*border-left: 0px solid #999;*/
    padding-bottom: 2vw;
}

.hp_why_separator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;
}

/*.hp_why_line_vertical {*/
/*    width: 0.5px;*/
/*    height: 5vw;*/
/*    background-color: white;*/
/*    position: absolute;*/
/*    top: -2vw;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*}*/

.hp_why_line_vertical {
    width: 0.5px;
    height: 4vw;
    background-color: white;
    position: absolute;
    top: -1.1vw;
    left: 50%;
    transform: translateX(-50%);
}

.hp_why_line_vertical2 {
    width: 0px;
    height: 0vw;
    background-color: white;
    position: absolute;
    top: -1.1vw;
    left: 50%;
    transform: translateX(-50%);
}

.hp_why_line_horizontal {
    width: 18vw;
    height: 0.5px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: -9vw;
    transform: translateX(-50%);
}

.hp_why_line_horizontal2 {
    width: 17vw;
    height: 0.5px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: -11vw;
    transform: translateX(-50%);
}

.hp_why_title {
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 10px;
}

html:lang(en) .hp_why_title {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 10px;
    margin-bottom: 4.5vw;
    margin-top: -1.5vw;
}

.hp_why_icon {
    width: 65px;
    height: 65px;
}

.hp_why_text {
    flex: 1;
}

.hp_why_icontitle {
    font-size: 4vw;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0.5vw;
    margin-bottom: 1vw;
}

.hp_why_text h3 {
    font-size: 0.95vw;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 1.5;
    margin-bottom: 0.5vw;
}

html:lang(en) .hp_why_text h3 {
    font-size: 0.85vw;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 1.5;
    margin-bottom: 0.5vw;
}

.hp_about_image {
    margin-top: -7vw;
    margin-left: 4.5vw;
    padding: 0vw 5vw 1vw 0vw;
}

@media screen and (max-width: 1200.5px){
   
    
    .hp_why {
        position: relative;
        padding: 4vw 3vw 2vw 3vw;
        background-color: #d1411b;
    }
    
    .hp_why_title {
        display: flex;
        align-items: center;
        gap: 4px;
        border-radius: 10px;
    }
    
    .hp_why_separator {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 100%;
        margin-left: -3vw;
    }
    
    .hp_why_line_vertical {
        width: 0.5px;
        height: 4vw;
        background-color: white;
        position: absolute;
        top: -0.1vw;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 1.5vw;
    }
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .hp_why_text h3 {
        font-size: 3.95vw;
        font-weight: 300;
        color: #fff;
        margin: 0;
        line-height: 1.5;
        margin-bottom: 0.5vw;
    } 
    
    .hp_why_separator {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 100%;
        display: none;
    }
    
    .hp_why::after {
        content: '';
        position: absolute;
        top: 44rem;
        right: 76vw;
        width: 50%;
        height: 21%;
        background-image: url(../../cdn1.npcdn.net/img/1741317957CK_S02_-40.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        z-index: 0;
    }
    
    .iconRow {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0px;
    }
    
    .hp_why .col-6 {
        flex: 0 0 50%;
        max-width: 50%; 
        padding: 5px;
    }

    .hp_why_text h3 {
        font-size: 2.5vw;
        font-weight: 300;
        color: #fff;
        margin: 0;
        line-height: 1.5;
        margin-bottom: 0.5vw;
    }
    
    .hp_why {
        position: relative;
        padding: 4vw 3vw 10vw 3vw;
        background-color: #d1411b;
    }
    
    html:lang(en) .hp_why {
        position: relative;
        padding: 4vw 3vw 25vw 3vw;
        background-color: #d1411b;
    }
    
    .hp_why_separator .hp_why_line_vertical,
    .hp_why_separator .hp_why_line_horizontal {
        display: block; /* Show the lines on desktop */
    }
    
    html:lang(en) .hp_why::after {
        content: '';
        position: absolute;
        top: 225.3vw;
        right: 77vw;
        width: 50%;
        height: 16%;
        background-image: url(../../cdn1.npcdn.net/img/1747815336CK_SEC02_Service.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        z-index: 0;
    }
    
    html:lang(en) .hp_why_text h3 {
        font-size: 3vw;
        font-weight: 300;
        color: #fff;
        margin: 0;
        line-height: 1.5;
        margin-bottom: 0.5vw;
    }
}

/*hp_services*/

.hp_services {
    padding: 3vw 0vw 2vw 8vw;
}

.hp_services {
    padding: 6vw 1vw 2vw 9vw;
    background-image: url(../../cdn1.npcdn.net/img/1741277539CK_S03_-18.png);
    background-size: cover;
    background-position: center center;
}

.hp_services .title_small {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 1vw;
    font-weight: 500;
    margin-bottom: 1vw;
    color: #000;
    /* margin-bottom: 10px; */
    padding: 0vw 21vw 0vw 0vw;
    line-height: 1.5;
}

.hp_services .title_big {
    font-family: 'Noto Serif SC', serif;
    font-size: 2.3vw;
    font-weight: 900;
    margin-bottom: 15px;
    color: #000;
    margin-bottom: 10px;
}

.hp_services .btn_more {
    background: #e89234;
    border: 2px solid #e89234;
    color: #fff;
    font-size: .65rem;
    padding: 5px 18px;
    transition: backgroundlinear .3s, colorlinear .3s, borderlinear .3s;
    margin-top: 0px;
    text-decoration: none !important;
    display: inline-block;
    font-weight: 500;
    border-radius: 0px;
    transform: translate(-8vw, 5vw);
}

.hp_services .btn_more:hover {
    background: #fff;
    color: #e89234;
    border: 2px solid #fff;
}


.hp_services_subtitle {
    font-size: 1.3vw;
    font-weight: 600;
    color: black;
    position: relative;
    display: inline-block;
    margin-left: 1vw;
    letter-spacing: 0.5px;
}

.hp_services_title {
    font-size: 2.6vw;
    font-weight: bold;
    color: #111;
    margin-top: 2.1vw;
    line-height: 1.3;
}

.hp_services_title span {
    color: #c4852c;
}

.btn5 a {
  	line-height: 10px;
  	-webkit-perspective: 1000px;
  	-moz-perspective: 1000px;
  	perspective: 1000px;
    text-decoration: none;
}

.btn5 a span {
    position: relative;
    font-weight: 400;
    font-size: 15px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 30px;
    letter-spacing: 0.5px;
    height: 40px;
    color: #d1411b;
    text-shadow: none;
    border: 0px solid #d1411b;
    background-color: #fce28e;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* transform: translate(19vw, 4vw); */
    margin-top: 3vw;
    top: 5vw;
    left: 19vw;
}

html:lang(en) .btn5 a span {
    position: relative;
    font-weight: 400;
    font-size: 15px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 30px;
    letter-spacing: 0.5px;
    height: 40px;
    color: #d1411b;
    text-shadow: none;
    border: 0px solid #d1411b;
    background-color: #fce28e;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* transform: translate(19vw, 4vw); */
    margin-top: 3vw;
    top: 5vw;
    left: 17vw;
}

.btn5 a span::after {
    position: absolute;
    top: 100%;
    left: -2px;
    width: 103.5%;
    height: 112%;
    text-align:center;
    box-sizing: border-box;
    color:#fff;
    background: #d1411b;
    display: flex;
    align-items: center;
    justify-content: center;
    content: attr(data-hover);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    /*transform: translate(19vw, 4vw);*/
}

.btn5 a:hover span,
.btn5 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.btn5 a:hover span::before,
.btn5 a:focus span::before {
    background: #d1411b;
}

/*category*/

.rowCategory {
    padding: 1vw 8vw 3vw 0vw;
}

.services-card {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.services-card:hover {
    transform: scale(1.02); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
}

.services-background {
    transition: transform 0.5s ease-in-out;
}

.services-card:hover .services-background {
    transform: scale(1.1); 
}

.services-background {
    position: relative;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.services-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: flex-end;
    padding: 35px 35px;
    color: white;
}

.services-info {
    margin-top: 1.5vw;
}

.services-title {
    font-size: 1.5vw;
    font-weight: 400;
    line-height: 1.4;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.hp_services a {
    text-decoration: none !important;
    color: #fff;
}

.hp_services:hover {
    color: transparent;;
}

.hp_services .col-lg-4 {
    padding: 20px 15px;
}

.services-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    min-height: 0px;
}

.services-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    padding-top: 10px;
    transition: color 0.3s ease-in-out;
}

.services-link::after {
    content: ">";
    margin-left: 0px;
    font-size: 1vw;
    transition: transform 0.3s ease-in-out;
}

.services-title {
    min-height: 0px;
}

.services-link:hover {
    color: #fdd835; 
}

.services-link:hover::after {
    transform: translateX(5px);
}

@media screen and (max-width: 1200.5px){
    .btn5 a span {
        position: relative;
        font-weight: 400;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        padding: 0 30px;
        letter-spacing: 0.5px;
        height: 40px;
        color: #d1411b;
        text-shadow: none;
        border: 0px solid #d1411b;
        background-color: #fce28e;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        /* transform: translate(19vw, 4vw); */
        margin-top: 3vw;
        top: 5vw;
        left: 14vw;
    }
    
    html:lang(en) .btn5 a span {
        position: relative;
        font-weight: 400;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        padding: 0 30px;
        letter-spacing: 0.5px;
        height: 40px;
        color: #d1411b;
        text-shadow: none;
        border: 0px solid #d1411b;
        background-color: #fce28e;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        /* transform: translate(19vw, 4vw); */
        margin-top: 3vw;
        top: 5vw;
        left: 11vw;
    }
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .hp_services .title_big {
        font-family: 'Noto Serif SC', serif;
        font-size: 6.3vw;
        font-weight: 900;
        margin-bottom: 15px;
        color: #000;
        margin-bottom: 10px;
    }
    
    .hp_services .title_small {
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 3.5vw;
        font-weight: 500;
        margin-bottom: 1vw;
        color: #000;
        /* margin-bottom: 10px; */
        padding: 0vw 5vw 0vw 0vw;
        line-height: 1.5;
    }
    
    .hp_services {
        padding: 6vw 4vw 2vw 4vw;
        background-image: url(../../cdn1.npcdn.net/img/1741277539CK_S03_-18.png);
        background-size: cover;
        background-position: center center;
    }
    
    .btn5 a span {
        position: relative;
        font-weight: 400;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        padding: 0 30px;
        letter-spacing: 0.5px;
        height: 40px;
        color: #d1411b;
        text-shadow: none;
        border: 0px solid #d1411b;
        background-color: #fce28e;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        /* transform: translate(19vw, 4vw); */
        margin-top: 3vw;
        top: 3vw;
        left: 0vw;
    }
    
    .rowCategory {
        padding: 3vw 0vw 3vw 0vw;
    }
    
    .services-title {
        font-size: 5.5vw;
        font-weight: 400;
        /*line-height: 1.4;*/
        text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
    }
    
    .services-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: white;
        font-size: 17px;
        padding-top: 10px;
        transition: color 0.3s ease-in-out;
    }
    
    .services-link::after {
        content: ">";
        margin-left: 0px;
        font-size: 5vw;
        transition: transform 0.3s ease-in-out;
    }
    
    html:lang(en) .btn5 a span {
        position: relative;
        font-weight: 400;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        padding: 0 30px;
        letter-spacing: 0.5px;
        height: 40px;
        color: #d1411b;
        text-shadow: none;
        border: 0px solid #d1411b;
        background-color: #fce28e;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        /* transform: translate(19vw, 4vw); */
        margin-top: 3vw;
        top: 5vw;
        left: 0vw;
    }
}

/*hp_news*/

.index_wrapper_5 {
    position: relative;
    padding: 5vw 9.5vw 2vw 9.5vw;
    background-color: #d1411b;
    height: 26vw;
    margin-bottom: 10vw;
}

.hp_news .title1 {
    font-family: 'Noto Serif SC', serif;
    font-size: 2.3vw;
    font-weight: 900;
    text-align: center;
    margin-bottom: 2vw;
    color: #fff;
}

#main_index .latest_new_type4 .news_box .badge-primary {
    background-color: #000;
    letter-spacing: 1.2px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    padding: 8px 16px;
}

#main_index .latest_new_type4 .news_box .date {
    font-size: 0.7rem;
    text-align: right;
    margin-bottom: 5px;
    color: #000;
}

#main_index .latest_new_type4 .text-right {
    text-align: right !important;
    display: none;
}

#main_index .latest_new_type4 .news_box {
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: transparent;
    position: relative;
    visibility: visible;
}

.hp_photoGallerySlider_type3 {
    background-color: transparent;
}

@media screen and (max-width: 1200.5px){
    .index_wrapper_5 {
        position: relative;
        padding: 5vw 9.5vw 2vw 9.5vw;
        background-color: #d1411b;
        height: 26vw;
        margin-bottom: 26vw;
    }
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .index_wrapper_5 {
        position: relative;
        padding: 5vw 9.5vw 2vw 9.5vw;
        background-color: #d1411b;
        height: 59vw;
        margin-bottom: 250vw;
    }
    
    .hp_news .title1 {
        font-family: 'Noto Serif SC', serif;
        font-size: 6.3vw;
        font-weight: 900;
        text-align: center;
        margin-bottom: 2vw;
        color: #fff;
    }
}

/*hp_product*/

.hp_product {
    position: relative;
    padding: 4vw 8.5vw 4vw 8.5vw;
}

.hp_product .title1 {
    font-family: 'Noto Serif SC', serif;
    font-size: 2.3vw;
    font-weight: 900;
    text-align: center;
    margin-bottom: 4vw;
    color: #000;
    /* display: inline-flex
; */
    align-items: center;
}

.hp_product .title1:after {
    content: "";
    width: 53vw;
    height: 2px;
    background: #d1411b;
    position: absolute;
    right: -19vw;
    top: 2vw;
    bottom: 0;
    margin: auto 0;
}

html:lang(en) .hp_product .title1:after {
    content: "";
    width: 44vw;
    height: 2px;
    background: #d1411b;
    position: absolute;
    right: -19vw;
    top: 2vw;
    bottom: 0;
    margin: auto 0;
}

/*product*/

.five-full {
    flex: 0 0 20%;
    max-width: 20%;
}

.click1 {
    display: inline-block;
    position: relative;
    width: 100%;
    transition: all 0.50s;
}

.click1:hover {
    transform: translateY(15px);
    /*border: 1px solid #e7e7e7;*/
    /*background-color: #fcfcfc;*/
}

.border1 {
    /*border: 5px solid #ffffff;*/
}

.move1 {
    margin-top: 0px;
}

.font-title-2 {
    padding: 15px;
}

.font-title-2 a {
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
}

.font-title-2 a:hover {
    color: #212529;
}

.click1 .border1 {
    position: relative;
}

.click1 .border1 img {
    width: 100%;
    height: auto;
}

.click1 .font-title-2 {
    position: absolute;
    top: 17.5vw;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5vw;
    font-weight: 500;
    width: 100%;
    text-align: center;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

html:lang(en) .click1 .font-title-2 {
    position: absolute;
    top: 17.5vw;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.9vw;
    font-weight: 500;
    width: 100%;
    text-align: center;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

.font-title-2 span {
    font-size: 1vw;
    font-weight: 500;
}

html:lang(en) .font-title-2 span {
    font-size: 0.8vw;
    font-weight: 500;
}

.btn3 a {
  	line-height: 10px;
  	-webkit-perspective: 1000px;
  	-moz-perspective: 1000px;
  	perspective: 1000px;
    text-decoration: none;
}

.btn3 a span {
    position: relative;
    font-weight:400;
    font-size:15px;
    display: table-cell;
    vertical-align: middle;
    padding:0 30px;
    letter-spacing:0.5px;
    height:40px;
    color: #d1411b;
    text-shadow: none;
    border: 0px solid #d1411b;
    background-color: #fce28e;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.btn3 a span::after {
    position: absolute;
    top: 100%;
    left: -2px;
    width: 103.5%;
    height: 112%;
    text-align:center;
    box-sizing: border-box;
    color:#fff;
    background: #d1411b;
    display: flex;
    align-items: center;
    justify-content: center;
    content: attr(data-hover);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.btn3 a:hover span,
.btn3 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.btn3 a:hover span::before,
.btn3 a:focus span::before {
    background: #d1411b;
}

@media screen and (max-width: 1200.5px){
    html:lang(en) .hp_product {
        position: relative;
        padding: 4vw 5.5vw 4vw 5.5vw;
    }
    
    html:lang(en) .btn3 a span {
        position: relative;
        font-weight: 400;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        padding: 0 22px;
        letter-spacing: 0.5px;
        height: 40px;
        color: #d1411b;
        text-shadow: none;
        border: 0px solid #d1411b;
        background-color: #fce28e;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    
    html:lang(en) .click1 .font-title-2 {
        position: absolute;
        top: 18vw;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 0.9vw;
        font-weight: 500;
        width: 100%;
        text-align: center;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        line-height: 1.3;
    }
    
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .five-full {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .hp_product .title1 {
        font-family: 'Noto Serif SC', serif;
        font-size: 6.3vw;
        font-weight: 900;
        text-align: center;
        margin-bottom: 4vw;
        color: #000;
        /* display: inline-flex; */
        align-items: center;
    }
    
    .hp_product .title1:after {
        content: "";
        width: 40vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: -19vw;
        top: 6vw;
        bottom: 0;
        margin: auto 0;
    }
    
    .click1 .font-title-2 {
        position: absolute;
        top: 79%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 6vw;
        font-weight: 500;
        width: 98%;
        text-align: center;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        line-height: 1.1;
    }
    
    .font-title-2 span {
        font-size: 3.5vw;
        font-weight: 500;
    }
    
    .hp_product {
        position: relative;
        padding: 4vw 4.5vw 4vw 4.5vw;
    }
    
    .hp_product .title1:after {
        content: "";
        width: 40vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: -15vw;
        top: 6vw;
        bottom: 0;
        margin: auto 0;
    }
    
    .five-full {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 5vw;
    }
    
    .five-full {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 5vw;
    }
    
    html:lang(en) .hp_product .title1:after {
        content: "";
        width: 44vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: -15vw;
        top: 13vw;
        bottom: 0;
        margin: auto 0;
    }
    
    html:lang(en) .click1 .font-title-2 {
        position: absolute;
        top: 79%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 5vw;
        font-weight: 500;
        width: 98%;
        text-align: center;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        line-height: 1.3;
    }
    
    html:lang(en) .font-title-2 span {
        font-size: 3vw;
        font-weight: 500;
    }
}

/*hp_video*/

.hp_video {
    position: relative;
    padding: 4vw 8.5vw 4vw 8.5vw;
    text-align: center;
}

.hp_video .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0px;
}

.hp_video .container-fluid .row .btn3 {
    text-align: center;
     width: 100%;
}

.hp_video .title1 {
    font-family: 'Noto Serif SC', serif;
    font-size: 2.3vw;
    font-weight: 900;
    text-align: center;
    margin-bottom: 2vw;
    color: #000;
}

.hp_video .title1:after {
    content: "";
    width: 46vw;
    height: 2px;
    background: #d1411b;
    position: absolute;
    right: 44vw;
    top: 2vw;
    bottom: 0;
    margin: auto 0;
}

html:lang(en) .hp_video .title1:after {
    content: "";
    width: 43vw;
    height: 2px;
    background: #d1411b;
    position: absolute;
    right: 47vw;
    top: 2vw;
    bottom: 0;
    margin: auto 0;
}

.rowVideo {
    display: flex;
    justify-content: center;
    gap: 0px;
    flex-wrap: nowrap;
}

/*.video-box {*/
/*    width: 100%;*/
/*    max-width: 400px; */
/*    height: 23vw;*/
    /*background: #333;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    border-radius: 0px;*/
/*}*/

.video-box img {
    width: 100%;
    height: auto;
    cursor: pointer;
    padding: 0px !important;
}

.btn4 a {
  	line-height: 10px;
  	-webkit-perspective: 1000px;
  	-moz-perspective: 1000px;
  	perspective: 1000px;
    text-decoration: none;
}

.btn4 a span {
    position: relative;
    font-weight:600;
    font-size:15px;
    display: table-cell;
    vertical-align: middle;
    padding:0 20px;
    letter-spacing:0.5px;
    height:40px;
    color: #4b4b4b;
    text-shadow: none;
    border: 2px solid #4b4b4b;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.btn4 a span::after {
    position: absolute;
    top: 100%;
    left: -2px;
    width: 103.5%;
    height: 112%;
    text-align:center;
    box-sizing: border-box;
    color:#fff;
    background: #4b4b4b;
    display: flex;
    align-items: center;
    justify-content: center;
    content: attr(data-hover);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.btn4 a:hover span,
.btn4 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.btn4 a:hover span::before,
.btn4 a:focus span::before {
    background: #152736;
}

@media screen and (max-width: 1200.5px){
    
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .hp_video .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0px;
    }
    
    .rowVideo {
        display: flex;
        justify-content: center;
        gap: 0px;
        flex-wrap: wrap;
    }
    
    .hp_video .title1 {
        font-family: 'Noto Serif SC', serif;
        font-size: 6.3vw;
        font-weight: 900;
        text-align: center;
        margin-bottom: 2vw;
        color: #000;
    }
    
    .hp_video .title1:after {
        content: "";
        width: 46vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: 49vw;
        top: 5vw;
        bottom: 0;
        margin: auto 0;
    }
    
    html:lang(en) .hp_video .title1:after {
        content: "";
        width: 31vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: 59vw;
        top: 5vw;
        bottom: 0;
        margin: auto 0;
    }
}

/*about us*/

.abt-container {
    padding: 0% 5% 0 7%;
    background-image: url('../../cdn1.npcdn.net/img/1741276867CK_HP-33.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.abt-imgcol img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0px;
    margin-left: 0;
}

.abt-contentcol {
    padding: 18% 2% 5% 2%;
    /* margin-top: 5vw; */
}

.abt-title {
    margin-bottom: 1.5rem;
}

.abt-container .text1:after {
    content: "";
    width: 70vw;
    height: 2px;
    background: #d1411b;
    position: absolute;
    right: -18.1vw;
    top: -22.1vw;
    bottom: 0;
    margin: auto 0;
}

html:lang(en) .abt-container .text1:after {
    content: "";
    width: 70vw;
    height: 2px;
    background: #d1411b;
    position: absolute;
    right: -18.1vw;
    top: -24.1vw;
    bottom: 0;
    margin: auto 0;
}

.abt-container .title1 {
    font-size: 42px;
    font-weight: 900;
    margin-top: 3%;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: #00909b;
    padding: 0% 0% 0% 0%;
}

.abt-container .text1 {
    font-size: 1.1vw;
    font-weight: 500;
    color: #000;
    margin-bottom: 2rem;
    line-height: 1.6;
    text-align: justify;
}

html:lang(en) .abt-container .text1 {
    font-size: 0.9vw;
    font-weight: 500;
    color: #000;
    margin-bottom: 0rem;
    line-height: 1.6;
    text-align: justify;
}

.abt-container .highlight {
    color: #f5181e;                  
}

.abt-container .j_btn button {
    background: linear-gradient(to right, #E1FDFF, #94F2FF);
    border: 0px solid #404040;
    color: #000;
    font-size: 1.05vw;
    font-weight: 900;
    padding: 7px 33px;
    transition: background 0.3s linear, color 0.3s linear;
    margin-top: 0%;
    margin-left: 0%;
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1); 
}

.abt-container .j_btn button:hover {
    background: linear-gradient(to right, #94F2FF, #E1FDFF); 
    color: #333; 
}

.abt-imgcol {
    position: relative;
    z-index: 5;
}

.abt-foundercol {
    display: flex;
    align-items: flex-end;
}

.founder_img {
    width: 80%;
    margin-left: auto;
}

@media screen and (max-width: 1200.5px){
     .abt-container .text1:after {
        content: "";
        width: 70vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: -16.8vw;
        top: -21.2vw;
        bottom: 0;
        margin: auto 0;
    }
    
    .hp_about_image {
        margin-top: 0vw;
        margin-left: 0vw;
        padding: 0vw 5vw 1vw 5vw;
    }
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    .abt-imgcol img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0px;
        margin-left: 0vw;
    }
    
    .abt-container .text1:after {
        content: "";
        width: 28vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: -8.8vw;
        top: -163.5vw;
        bottom: 0;
        margin: auto 0;
    }
    
    .abt-container {
        padding: 4% 8% 0 9%;
        background-image: url(../../cdn1.npcdn.net/img/1741276867CK_HP-33.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .abt-contentcol {
        padding: 4% 4% 2% 4%;
        /* margin-top: 5vw; */
    }
    
    .abt-container .text1 {
        font-size: 4vw;
        font-weight: 500;
        color: #000;
        margin-bottom: 2rem;
        line-height: 1.6;
    }
    
    .founder_img {
        width: 65%;
        margin: 0 auto;
    }
    
    html:lang(en) .abt-container .text1:after {
        content: "";
        width: 37vw;
        height: 2px;
        background: #d1411b;
        position: absolute;
        right: -18.1vw;
        top: -210.1vw;
        bottom: 0;
        margin: auto 0;
    }
    
    html:lang(en) .abt-container .text1 {
        font-size: 3.5vw;
        font-weight: 500;
        color: #000;
        margin-bottom: 0rem;
        line-height: 1.6;
    }
}

/*footer*/

.footer_type4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #d1411b;
    background-image: none;
    background-position: 10%;
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
}

.footer_type4 .btn-primary {
    background-color: #fff !important;
    border-color: #d1411b !important;
}

.btn {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #d1411b;
}

@media screen and (max-width: 1200.5px){
    
}

@media screen and (max-width: 992.5px){
   
}

@media screen and (max-width: 767.5px){
    
}

@media screen and (max-width: 500.5px){
    .index_wrapper_2 .item>img{
    	min-height:20rem!important;
    	object-fit:cover;
    	object-position:50% 50%;
    }
}

.fa-stack2 {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em;
    margin-left: 1vw;
}

/* Container styling for social media icons */
.social-media-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1px;
    align-items: center;
}

.social-media-list li a img {
    /*width: 32px;*/
    /*height: auto;*/
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover effect */
.social-media-list li a:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

@media screen and (max-width: 1200.5px){
    .social-media-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1px;
        align-items: center;
        margin-right: 1vw;
        margin-top: 0.2vw;
    }
    
    .dark_nav .nav_tab {
        padding-right: 200px;
        box-shadow: 0 0 5px #aaa;
    }
}

@media (max-width: 768px) {
    .social-media-list {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
}