/* Overall */
#main_index{
    overflow: hidden;
    padding-bottom: 0px !important;
}
a:hover{
    text-decoration: unset;
}
:root{
    --sec-padding: 3.5rem;
}
.line{
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.75), rgba(0,0,0,.5));
    border-radius: 50%;
}

/* Text */
.title-style{
    font-size: clamp(1.65rem, 2.1vw, 2.1vw);
    font-weight: 700;
    letter-spacing: 1px;
}
.content{
    font-size: clamp(.85rem, 1vw, 1vw);
    font-weight: 700;
    margin: 0;
    line-height: 1.75;
}

/* Btn */
.btn-group{
    gap: 1.75rem;
}
.main-btn{
    border-style: none;
    padding: 6px 40px;
    border: 1px solid transparent;
    font-size: clamp(0.85rem, 1.15vw, 1.15vw);
    font-weight: 700;
    transition: all .3s linear;
    
    &:hover{
        transform: scale(1.1);
    }
}
.main-btn.white{
    color: #000;
    background: #fff;        
}
.main-btn.black{
    color: #fff;
    background: #000;
    
    &:hover{
        color: #000;
        background: #fff;
    }
}
.main-btn.outline{
    color: #000;
    background: transparent;
    border-color: #000;
    
    &:hover{        
        background: #fff;
        border-color: #fff;        
    }
}

.line-btn{
    font-size: clamp(.85rem, 1.15vw, 1.15vw);
    font-weight: 700;
    
    i{
        margin-left: .5rem;
        transition: all .3s linear;
    }
    
    &:hover{
        color: #000;
        
        i{
            margin-left: 1rem;
        }
    }
}

/*Navbar*/
.navbar_type11_right .menu_btn .bar1, 
.navbar_type11_right .menu_btn .bar2, 
.navbar_type11_right .menu_btn .bar3{
    height: 3px;
}
.navbar_type11_right .menu_btn.change .bar3 {
  transform: rotate(45deg) translate(-5px, -5px);
}

.navbar_type11_right #logo{
    left: 50%;    
    margin-top: 0;
    margin-left: 0;
}
.navbar_type11_right .logo_frame img{
    background: #000;
    transform: translate(-50%, -50%);
}
.navbar_type11_right .logo_frame{
    padding-top: 90px;
}

.navbar_mobile{
    background: #000;
}
.navbar_mobile .btn-outline-light{
    color: #fff;
    border-color: #fff;
}
.navbar_mobile .row_1{
  height: 100%;
  margin: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.navbar_mobile .logo_img{
    max-height: 75px;
}

.navbar_type11_right_height{
  min-height: 90px;
}
.navbar_type11_right{
    height: 90px;
    
    &.opened{
        height: 100vh;
    }
}
.navbar_type11_right .menu_btn .bar1, 
.navbar_type11_right .menu_btn .bar2, 
.navbar_type11_right .menu_btn .bar3{
  background-color: #fff;
}
.navbar_type11_right .right_menu{
  margin-top: 1.6rem;
}

@media(max-width:991px){
    .navbar_type11_right{
        display: none;
    }
}

/* Slider */
.b-title-box{
    margin-bottom: 1.5rem;
}
.b-title-box h2{
    font-size: clamp(1.9rem, 3.2vw, 3.2vw);
    font-weight: 900;
}
.b-title-box h3{
    font-size: clamp(1.15rem, 2.05vw, 2.05vw);
    font-weight: 600;
}

.b-content{
    font-size: clamp(1rem, 1.45vw, 1.45vw);
    font-weight: 600;
    margin-bottom: 4rem;
    margin-top: 1.5rem;
}
.b-content ul{
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    margin-top: .5rem;
    line-height: 1;
}
.b-content li{
    display: flex;
    align-items: center;
}
.b-content li:not(:last-child):after{    
    display: inline-flex;
    content: "";
    width: 1px;
    height: 100%;
    border-right: 2px solid #000;
    margin: 0 1.5rem;
}

.b-line{
    display: block;
    content:"";       
    background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.75), rgba(0,0,0,.5));
    width: 30%;
    height: 1.75px;
    border-radius: 100%;
}

@media(min-width:991px){
    .b_inner{
        height: calc(100% - 90px) !important;
        margin-top: 90px;
    }
}

@media(max-width:991px){
    .b-content li:not(:last-child):after{
        margin: 0 .75rem;
    }
    .b-title-box{
        margin-bottom: 1rem;
    }    
    .b-content{
        margin-top: 1.25rem;
        margin-bottom: 2.5rem;
    }
}

@media(max-width:768px){
    .slider_banner .item > img{
        min-height: 62vw;
        object-fit: cover;
    }
}

@media(max-width:576px){
    .slider_banner .item > img{
        min-height: 100vw;
        object-fit: cover;
        object-position: left;
    }
    .slider_banner .banner_content{
        background: rgba(255,255,255,.6);
    }
}

/* Category */
.index_wrapper_3{
    padding: var(--sec-padding)  2rem;
}
.cat-wrapper{
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 1.25rem;
}
.cat-wrapper .title-style,
.cat-wrapper .line-btn{
    white-space: nowrap;
}

.product_cat-10 .wrapper_product_category .product_img{
    border-radius: 0;
    padding-top: 150%;
}
.hp_category .col-12,
.product_cat-10 .col-12{
    padding: 0 10px;
}

.product_cat-10 .wrapper_product_category{
    position: relative;
    margin-bottom: 0;
    
    &:before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
        top: 0;
        left: 0;
    }
}
.product_cat-10 .wrapper_product_category .content{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 2rem;
    z-index: 1;
}
.product_cat-10 .content .mt-3{
    margin: 0 !important;
}
.product_cat-10 .content h3{
    margin-bottom: 0;
    color: #fff;
    font-size: clamp(1rem, 1.2vw, 1.2vw);
    font-weight: 700;
}
.product_cat-10 .wrapper_product_category .view-btn{
    position: relative !important;
    all: unset;
    font-size: 0;
    width: 45px;
    aspect-ratio: 1/1;
    transform: translateY(25%);
    transition: all .3s linear;
    
    &:before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: url(https://cdn1.npcdn.net/images/B_Icon_2_68xcsw_1778473226.png?md5id=02f838984bfa7e26567a1e06dd2728b5&new_width=180&new_height=180&type=4);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        bottom: 0;
        right: 0;                
    }
}
.product_cat-10 .wrapper_product_category:hover .view-btn{
    transform: translate(-15%, 25%);
}

@media(max-width:576px){
    .index_wrapper_3{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cat-wrapper{
        justify-content: space-between;
    }
    .cat-wrapper .line{
        display: none;
    }
}

/* About */
.hp_about{
    background: #000;
    padding: var(--sec-padding) 2rem 0;
}
.hp_about .content{
    padding-bottom: 2rem;
    border-bottom: 1px solid #fff;
}

.abt-section{
    padding: 4.5rem 1.5rem;
    align-items: end;    
    gap: 3rem;
}

.abt-content{
    color: #fff;
    min-width: 42%;    
    display: grid;
    place-content: center;
}
.abt-content h3{
    font-size: clamp(1.35rem, 1.95vw, 1.95vw);
    font-weight: 800;
    letter-spacing: 1.5px;
    margin: 0;
}
.abt-content p{
    font-size: clamp(.85rem, 1vw, 1vw);
    text-indent: 4rem;
    margin: .75rem 0;
}

@media(max-width:991px){
    .abt-content p{
        text-indent: 0;
        margin: 1rem 0;
    }
}

@media(max-width:768px){
    .hp_about .content{
        padding: 0 12% 2rem;
        
        br{
            display: none;
        }
    }
    
    .abt-section{
        flex-direction: column;        
        padding: 0 2rem;
    }
    .abt-section{
        padding: 0 1rem;
    }
    .abt-section:first-child{       
        padding-top: 3rem;
    }
    .abt-section:not(:last-child){
        padding-bottom: 3rem;
    }
    .abt-content{
        min-width: 100%;
        text-align: center;
    }
}

@media(max-width:768px){
    .hp_about{
        padding: var(--sec-padding) 1rem ;        
    }
}

@media(max-width:576px){
    .hp_about .content{
        padding: 0 0 2rem;
    }
}
    
/* Contact */
.index_wrapper_5{
    padding: calc(var(--sec-padding) * 1) 0 0;
    padding-left: 6rem;
}
.hp_contact .title-style{
    font-weight: 900;
}
.hp_contact .subtitle-style{
    font-size: clamp(1.35rem, 1.95vw, 1.95vw);
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 3rem;
}

.ex_branchNoImgListing{
    margin: 0 calc(-2.5rem + 15px) !important;
}
.ex_branchNoImgListing .design-3-branch-item{
    padding: 0;    
    margin: 0;    
}
.ex_branchNoImgListing .design-3-branch-item:not(:last-child){
    border-right: 1px solid #000;
}
.ex_branchNoImgListing .border{
    border-style: none !important;
    padding: 0 2.5rem !important;
}
.ex_branchNoImgListing .design-3-header{
    background: none;    
    padding: 0; 
}
.ex_branchNoImgListing .design-3-title{
    color: #000;
    font-weight: 900;
    margin-bottom: 1rem;
}
.ex_branchNoImgListing .design-3-body{
    padding: 0;
}
.ex_branchNoImgListing .design-3-animation:hover{
    transform: scale(1) !important;
}
.ex_branchNoImgListing .address,
.ex_branchNoImgListing a{
    font-size: clamp(.78rem, .85vw, .85vw);
}
.ex_branchNoImgListing .design-3-body .lists{
    margin-bottom: .65rem;
}
.ex_branchNoImgListing .design-3-body > .d-flex:last-child {
  display: none !important;
}

.innerContainer_6{
    height: 100%;
    display: grid;
    place-content: end;
}

@media(min-width:991px){
    .innerContainer_5{
    padding-top: 3%;
    }
    .innerRow_5{
        gap: 4rem;
    }
}

@media(max-width:1400px){
    .index_wrapper_5{
        padding-left: 3rem;
    }
    .innerRow_5{
        gap: 2rem;
    }
    .innerContainer_5{
        padding-top: 1%;
    }
    .hp_contact .subtitle-style{
        margin-bottom: 1.5rem;
    }    
}

@media(max-width:1200px){
    #index_5{
        flex: 0 1 70%;
        max-width: 70%;
        padding-bottom: 4rem !important;
    }
    #index_6{
        flex: 0 1 30%;
        max-width: 30%;
    }
    .c-frame{        
        margin-right: -30%;       
    }
    .ex_branchNoImgListing {
        margin: 0 calc(-1.5rem + 15px) !important;
    }
    .ex_branchNoImgListing .border{
        padding: 0 1.5rem !important;
    }
}

@media(max-width:991px){
    .index_wrapper_5{
        padding: var(--sec-padding) 2rem 0;
    }
    .outerRow_5{
        flex-direction: column;
        align-items: center;
    }
    #index_5,
    #index_6{
        flex: 0 1 100%;
        max-width: 100%;
    }
    .c-frame{
        width: 50%;
        margin: auto;
    }
    #index_5_2 .container{
        max-width: 100%;
    }    
    .hp_contact .title-box{
        text-align: center;
    }
}

@media(max-width:768px){
    .index_wrapper_5{
        padding: var(--sec-padding) 1rem 0;
    }
    .hp_contact .title-box{
        margin-bottom: 1rem;
    }
    .ex_branchNoImgListing .border{
        padding: 0 3rem !important;        
    }
    .ex_branchNoImgListing .design-3-branch-item:not(:last-child){
        padding-bottom: 3rem !important;
        border: none;
    }
    .c-frame{
        width: 80%;
    }
}

@media(max-width:576px){
    .ex_branchNoImgListing .border{
        padding: 0 1rem !important;
    }
}

/* Footer */
.footer_type6{
    color: #f1f1f1;
    background: #000;
    font-size: clamp(.8rem, .85vw, .85vw);
    line-height: 1.75;
}
.footer_type6 .title h5{
    font-weight: 700;
}
.footer_type6 .logo{
    min-height: 100px;
    padding-top: 100px;
    
    img{
        max-height: 100px;
        width: 100%;
        object-fit: contain;
        object-position: left;
    }
}
.footer_type6 .input-container input{
    border-color: #fff;
}
.footer_type6 .line{
    background: #fff;
    opacity: .5;
    height: .1rem;
}

@media(min-width:991px){
    .footer_type6 .space-col{
        padding-left: 5rem !important;
    }
}

/*Product*/
.compare_check_box {
  display: none;
}

/* English Version */

.npfooter_languagebar .text-muted {
  color: #fff !important;
}

html:lang(en){
    .b-title-box h2 {
        font-size: clamp(1.5rem, 2.5vw, 2.5vw);
    }
    .b-title-box h3 {
        font-size: clamp(1rem, 1.5vw, 1.5vw);
    }
    .b-content {
        font-size: clamp(.85rem, 1vw, 1vw);        
        width: 25%;
    }
    .b-content ul{
        flex-wrap: wrap;
        row-gap: 1rem;
        margin-top: 2rem;
    }
    
    
    .abt-content p{
        text-indent: 0;
    }
}

@media(min-width:991px){
    .hp_about .content{
        padding: 0 15% 2rem;
    }
}

@media(max-width:1200px){
    html:lang(en){            
        .b-content{
            width: 35%;
            margin-bottom: 2rem;
        }
    }
}