@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

/* Overall */
#main_index{
    overflow: hidden;
    padding-bottom: 0px !important;
}
a:hover{
    text-decoration: unset;
}
:root{
    --title-font: "Bricolage Grotesque", sans-serif;
}

/* Animation */
@keyframes animSwing{
    0%, 45%{
        transform: rotateZ(0deg);
    }
    15%{
        transform: rotateZ(5deg);
    }
    30%{
        transform: rotateZ(-5deg);
    }    
}

@keyframes decoLeftAnim{
    0%, 50%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-15px);
    }    
}

@keyframes decoRightAnim{
    0%, 50%, 100%{
        transform: translateX(0);
    }
    75%{
        transform: translateX(15px);
    }    
}

/* Text */
.title-style{
    font-family: var(--title-font);
    font-size: clamp(1.5rem, 2.5vw, 2.5vw);
    font-weight: 700;
    background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
    width: fit-content;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin-bottom: 0;
}
.title-style.dark-style{
    background: unset;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
    color: #825a00;
}
.content{
    font-size: clamp(.85rem, 1vw, 1vw);
    line-height: 1.75;
    margin-bottom: 0;
}

@media(min-width:568px){
    .wDeco{
        display: flex;
        align-items: center;

        &:before{
            display: inline-flex;        
            content: "";
            width: 90px;
            height: 30px; 
            background: url(https://cdn1.npcdn.net/images/TITLE_ELEMENT_LEFT_am5bgo_1766540103.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=343&new_height=53&type=4);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 30px;
            animation: decoLeftAnim 3.5s linear infinite;
        }
        &:after{     
            display: inline-flex;
            content: "";
            width: 90px;
            height: 30px;  
            background: url(https://cdn1.npcdn.net/images/TITLE_ELEMENT_RIGHT_b8zyv1_1766481753.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=343&new_height=53&type=4);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 30px;
            animation: decoRightAnim 3.5s linear infinite;
        }
    }
}

/* btn */
.main-btn{
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: clamp(.5rem, .5vw, .5vw) clamp(1rem, 1.25vw, 1.25vw);
    text-transform: uppercase;
    font-size: clamp(1rem, 1vw, 1vw);
    font-weight: 600;
    
    img{
        max-width: 20px;
        transition: all .5s linear;
    }
    
    &:after{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
        border-radius: 50px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);                
        -webkit-mask-composite: exclude;
        -webkit-mask-composite: xor;
        inset: 0;
        padding: 1.5px 2px;
    }
    
    &:hover:after{
        -webkit-mask-composite: unset !important;
        z-index: -1;
    }
    
    &:hover img{
        transform: rotateX(180deg);
    }
    
    &:hover{
        color: #000;
        background: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
    }        
}

/* Nav */
.navbar_type8{
height: 120px;
background: #0a0a0a;
padding: 0;
}
#main_index .navbar_type8{
    background: transparent;
}
.navbar_type8 .logo{
    margin-left: 8%;  
    flex: unset;
    min-width: 19%;
}
.navbar_type8 .logo img{
    padding: 0px;
    width: 100%;
}

.navbar_type8 .nav_tab{
    flex: unset;
    width: 100%;
    padding-right: 8%;
    gap: 4.5vw;  
}
.navbar_type8 .nav_tab .nav_item:before{
    display: none;    
}
.navbar_type8 .nav_tab .nav_item a{
    color: #fff;
    padding: 0;
    font-size: clamp(.85rem, 1vw, 1rem);
    font-weight: 400;    
}
.navbar_type8 .nav_tab .nav_item a:hover{
    background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;    
}

.dark_nav{
background: rgba(0, 0, 0, 0.85) !important;
}

.navbar_mobile{
    background: #0a0a0a;
}
.navbar_mobile .btn-outline-light{
    border-color: #fff;
    color: #fff;
}

@media(max-width:1300px){
    .navbar_type8 {
        height: 100px;
    }
    .navbar_type8 .logo{
        margin-left: 5%;
    }
    .navbar_type8 .nav_tab{
        padding-right: 5%;
    }
}

/* Banner */
.slider_banner .banner_content{
    overflow: hidden;
}
.hp_banner{
    height: 100%;
}
.b-wrapper{
    height: 100%;    
}
.b-content{
    height: 90%;
    width: 40%;
    display:grid;
    place-content: center;
    padding-left: 8%;
    color: #fff;
}
.b-content h2{
    font-family: var(--title-font);
    font-size: clamp(2rem, 3.2vw, 3.2vw);
    font-weight: 700;
    background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
    width: fit-content;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin-bottom: 0;    
    
    span{
        /* position: relative; */
        display: flex !important;
        white-space: nowrap;
        align-items: center;
        gap: 1.75rem;
        
        &:after{
            /* position: absolute; */
            display: inline-flex;
            content: "";
            width: 90px;
            height: 15px;
            background: url(https://cdn1.npcdn.net/images/TITLE_ELEMENT_RIGHT_b8zyv1_1766481753.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=343&new_height=53&type=4);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
}
.b-content p{
    color: #f1f1f1;
    font-size: clamp(.85rem, 1vw, 1vw);
    line-height: 1.75;
    margin: 1rem 0 1.75rem;
}
.b-frame{
    position: absolute;
    right: 6%;
    bottom: 11%;
    width: 46.5%;
}

@media(min-width:991px){
    .slider_banner{
        margin-top: -120px;
    }
}

@media(max-width:991px){
    .slider_banner .item > img{
        min-height:60vw;
        object-fit: cover;
    }
    .b-content{
        height: 85%;
        width: 50%;
    }
    .b-frame{
        width: 50%;
        bottom: 12.5%;
    }
}

@media(max-width:768px){
    .slider_banner .item > img{
        min-height: 100vw;        
    }
    .b-content{
        height: 50%;
        width: 85%;
        margin: auto;
        padding: 0;        
        
        h2 span{
            gap: 1rem;
        }
    }
    .b-content p{
        margin: 1rem 0 1.25rem;
    }
    .b-frame{
        width: 64%;
    }
}

@media(max-width:568px){
    .slider_banner .item > img{
        min-height: 135vw;
        object-position: left;
    }
    .b-content{
        height: 60%;
    }
    .b-frame{
        width: 75%;
        bottom: 0;        
    }
    
    .b-content h2 span:after{
        width: 60px;
        right: -40px;
    }
}

/* Pointer */
.hp_pointer{
    padding: 5rem 0;
}
.hp_pointer .container{
    background: linear-gradient(to right, #fff8c2, #fffef5, #fff8c2);
    padding: 0 5% 2.5%;    
}
.pointer-outer-box{
    padding: 1rem 3%;    
    
    &:first-child{
        margin-top: -4.5rem;   
    }    
}
.pointer-box{
    text-align: center;
    
    &:hover{
        .pointer-icon{
            transform: rotateZ(360deg);
        }
    }
}
.pointer-icon{
    width: 7rem;
    margin: auto;
    filter: drop-shadow(0px 5px 5px #ccc);
    transition: all .5s linear;
}
.pointer-info h3{
    color: #855f0e;
    font-family: var(--title-font);
    font-size: clamp(1.1rem, 1.25vw, 1.25vw);
    font-weight: 600;
    margin: 1.5rem 0 .85rem;
}
.pointer-info p{
    color: #444;
    font-size: clamp(.85rem, 1vw, 1vw);
    font-weight: 400;
    margin-bottom: 0;
}

@media(min-width:768px){
    .pointer-outer-box{       
        padding: 1rem;
        
        &:nth-child(-n + 2){
            margin-top:-4.5rem;   
        }        
    }
}

@media(min-width:991px){
    .pointer-outer-box{
        margin-top: -4.5rem;
    }
}

@media(max-width:576px){
    .hp_pointer{        
        padding-bottom: 0;
        
        .container{
            padding-bottom: calc(2.5% + 1rem);
        }
    }
    .pointer-info{
        padding: 0 5%;
    }    
}

/* ISO */
.iso-box{
    display: flex;
    align-items: stretch;
    background: #2b1d00;
}
.iso-frame{
    min-width: 40%;
}
.iso-content{        
    color: #fff;
    padding: 5%;
    position: relative;            
    
    p{
        position: relative;
        z-index: 1;
    }
    
    .main-btn{
        position: relative;
        z-index: 1;
    }
    
    &:after{
        position: absolute;
        content: "ABOUT US";
        bottom: 4%;
        right: 5%;
        color: #36290d;
        font-size: clamp(3.5rem, 5.5vw, 5.5vw);
        font-weight: 700;
        letter-spacing: 3px;        
    }
    
    &:before{
        position: absolute;
        content: "";
        width: 14vw;
        height: 14vw;
        background: url(https://cdn1.npcdn.net/images/C_ABOUT_ELEMENT_ujmfhy_1766479518.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=321&new_height=234&type=4);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        top: 0;
        right: 0;
    }
}

@media(max-width:1200px){
    .iso-frame{
        min-width: 35%;
        min-height: 100%;
        
        img{
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
}

@media(max-width:768px){
    .iso-box{
        flex-direction: column;
    }
    .iso-frame{        
        height: 300px;
    }
    .iso-content{
        padding: 3rem;
    }
    .iso-content:before{
        width: 20vw;
        height: 20vw;
    }
}

@media(max-width:600px){
    .iso-content{
        padding: 7rem 1rem 3rem;
    }
    .iso-content:before{
        width: 45vw;
        height: 45vw;
    }
    .iso-content:after{
        right: 0;
        left: 0;
        display: grid;
        place-content: center;
    }
}

/* Product */
.index_wrapper_5{
    background: linear-gradient(to right, #fff8c2, #fffef5, #fff8c2);
    background-size: 150%;
    padding-top: calc(5rem + 10rem);
    padding-bottom: 5rem;
    margin-top: -10rem;
}

@media(max-width:768px){
    .hp_product .title-style{
        text-align: center;
    }    
}

/* Product Listing */
#index_5{
    padding: 0;
}
.productSlider-4 .product_img .product_box{
    background: unset;
    margin: 0;
    padding: 0 10px !important;        
}
.productSlider-4 .product_img .product_box .product_img_frame{    
    border-radius: 10px;
    transition: all .3s linear;
}
.productSlider-4 .product_img .product_box .product_img_frame:hover{
    border-radius: 10px;
}
.productSlider-4 .product_img .product_box .content_button{
    width: 100% !important;
    text-align: center !important;
}
.productSlider-4 .product_img .product_box .content{
    text-align: center !important; 
}
.productSlider-4 .product_img .product_box .product_title{
    font-size: clamp(1rem, 1.05vw, 1.05vw);
    font-weight: 500 !important;
    margin-bottom: 1rem;
}
.productSlider-4 .product_img .product_box .product_price{
    color: #fff;
    background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
    background-size: 100%;
    background-position: center;
    padding: 6px;
    transition: all .3s linear;
    cursor: pointer;
    border-radius: .3rem;
    transition: all .3s linear;
}
.productSlider-4 .product_img .product_box .product_price:hover{
    background-size: 200%;    
}
.productSlider-4 .product_img .product_box a{
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    display: block;
}
.productSlider-4 .product_img{
    margin-top: 0;
}
.productSlider-4 .product_img{
  overflow: visible;
  margin: 0 -10px;
}

.productSlider-4 .slick-prev,
.productSlider-4 .slick-next{
  display: none !important;
}

@media(max-width:768px){
    .productSlider-4 .draggable{
        padding: 0 4rem;
    }
    .productSlider-4 .slick-slide{
        opacity: .25;
        transform: scale(0.9);
        transition: all 1s linear;
        
        &.slick-active{
            opacity: 1;
            transform: scale(1);
        }
    }    
}

/* Works */
.index_wrapper_6{
    background: url(https://cdn1.npcdn.net/images/D_PHOTO_BG_kgfacs_1766541858.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=1600&new_height=590&type=4);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 5rem 0 8rem;
    position: relative;
    z-index: 1;
}
#index_6,
.hp_photoGallerySlider_type3 .container-fluid,
.hp_photoGallerySlider_type3 .container,
.hp_photoGallerySlider_type3 .col-12{
    padding: 0;
}
.hp_photoGallerySlider_type3 .photo-gallery3,
.hp_photoGallerySlider_type3 .photo-gallery3 .outline_box{
  padding: 0;  
}
.hp_photoGallerySlider_type3 .photo-gallery3 .outline_box .gallery_box{
    width: 100%;
    padding-top: 100%;
    background: unset;
}
.hp_photoGallerySlider_type3 .photo-gallery3 .outline_box .gallery_box img{
    padding: 0;
    object-fit: cover;
    object-position: top;
}
.hp_photoGallerySlider_type3 .photo-gallery3 .outline_box .gallery_box:hover img{
    width: 105%;
    height: 105%;
}
.hp_photoGallerySlider_type3{
  background: unset;
}
.hp_photoGallerySlider_type3 .slick-track{  
  margin: 0px;
  gap: 1rem;
  display: flex;
}

.hp_photoGallerySlider_type3 .photo-gallery3 .slick-prev,
.hp_photoGallerySlider_type3 .photo-gallery3 .slick-next{
    display: none !important;
}

@media(max-width:991px){
    .hp_photoGallerySlider_type3 .slick-dots{
        display: none !important;
    }
}

@media(max-width:768px){
    .photo-0-gallery{
        display: block;
        padding: 0 50px;
    }
    .hp_photoGallerySlider_type3 .slick-track{
        gap: 0;
    }
    
    .hp_works .title-style{
        text-align: center;
    }
}

/* News */
.index_wrapper_7{
    background: linear-gradient(to right, #fff8c2, #fffef5, #fff8c2);
    background-size: 110%;
    background-position: right;
    padding: calc(5rem + 10vw) 0;
    margin-top: -10vw;    
    position: relative;
    z-index: 0;
    
/*     &:after{
        position: absolute;
        
    } */
}
.hp_latest_new_8 .news_box{
    background: #fff;
    padding: 1.25rem;
    box-shadow: 0px 6px 15px #d8d8d8;
    
    &:hover{
        background: #1a1a1a;
        
        p{
            color: #fff;
        }
        
        .date{
            opacity: 1;
            color: #fff;
        }
    }
}
.hp_latest_new_8 .news_box .date{
    opacity: .8;
    font-weight: 600;
}
.hp_latest_new_8 .news_box .read_more{
    background: linear-gradient(to right, #f0d051, #f0d051, #deaf20);
    width: fit-content;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
    border-bottom: 2px solid #fff889;
    font-weight: 700;
    font-size: clamp(.55rem, .75vw, .75vw);
}


.hp_news_btn .main-btn{
    margin: auto;    
    border-radius: 50px;    
    transition: all .3s linear;
    
    &:after{
        background: #1a1a1a;
        -webkit-mask: unset;  
        z-index: -1;
    }
    
    &:hover{
        color: #fff;
    }
}

@media(Max-width:768px){
    .hp_news .title-style{
        text-align: center;
    }
}

/*Footer*/
.footer1 {
    position: relative;
    color: #fcfcfc;  
    z-index: 1;    
    padding: 13rem 0 2rem;    
}

.footer1:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000 , transparent 25%);
    bottom: 0;
    left: 0;
    z-index: -1;
}

.footer1:before {
    content: '';
    background-image: url(https://cdn1.npcdn.net/images/F_LOCATION_BG_xe431q_1766545484.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=1600&new_height=598&type=4);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.footer1 .font-small {
    display: flex;
    align-items: center;
    font-size: clamp(.85rem, 1.05vw, 1.05vw);
    
    a{
        color: #fff;        
        
        &:hover{
            color: #f8e670;
        }
    }
}

.footer1 .font-small i {
    color: #000;
    background: linear-gradient(to right, #f0d051, #fff889, #deaf20);
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
    font-size: 140%;
    display: grid;
    place-content: center;
    margin-right: 1rem;
}

.footer1 iframe {
    width: 100%;
}

.list1 ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.list1 ul li {
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-right: 1px solid #8dc63f;
}

.list1 ul li:first-child {
    padding-left: 0;
}

.list1 ul li:last-child {
    padding-right: 0;
    border-right: none;
}

.list1 ul li a {
    text-transform: uppercase;
    font-weight: bold;
}

.list1 ul li a:hover {
    color: #ffffff;
}

.footer1 .title-style{
    font-size: clamp(1rem, 1.75vw, 1.75vw);
}

@media(min-width:768px){
 .footer1 .align1 .title-style{
    margin-left: auto;
}   
}

.footer1-deco {
    position: absolute;
    content: "";
    width: 40vw;
    height: 20vw;
    background: url(https://cdn1.npcdn.net/images/E_NEWS_ELEMENT_k2bhyq_1766545484.png?md5id=f6a81a05f0dc6797d195dfb9aad909bb&new_width=380&new_height=462&type=4);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    top: -8vw;
    right: 2%;
    z-index: 105 !important;
    animation: animSwing 6s ease-in-out infinite;
    transform-origin: bottom right;
}

.footer_type3{
    background: #000;
    border-top: 1px solid #737373;
}
.footer_type3 a:hover{
    color: #f8e670;
}

@media(max-width:991px){
    .footer1-deco{        
        height: 25vw;
        top: -10vw;
    }
}

@media(max-width:768px){
    .footer1-deco{        
        height: 40vw;
        top: -20vw;
    }
}

@media(max-width:568px){
    .footer1-deco{
        width: 60vw;
        height: 60vw;
        top: -25vw;
    }
}