@charset "utf-8";
/* CSS Document */

/* Base reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: #000;
    background-color: #fff;
    font-size: 16px;
    line-height: 30px;
}
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
img{width: 100%;display: block;height: auto;}
a{text-decoration: none;color: #000;}
a:hover{color: #f8c301!important;transition: .4s all;}
input,textarea{font-size: 12px!important;font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;}

.flex_box{display: flex;justify-content: space-between;}
.c{clear: both;}

/* Container */
.container_width{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}


/* Header */
.motorlifetech_header{background: #f6f6f6;height: 110px;position: fixed;z-index: 999;top: 0;left: 0;width: 100%;}
.motorlifetech_header .flex_box{height: 110px;align-items: center;}
.motorlifetech_header .logo{max-width: 226px;}
.motorlifetech_header .nav a{color: #626262;font-weight: 700;font-size: 20px;}

.header_menu {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}

.menu-icon {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.2s ease;
}

.menu-icon span {
    display: block;
    height: 2px;
    background-color: #333;
    transition: all 0.3s ease;
}

.menu-icon span:nth-child(1) { width: 100%; }
.menu-icon span:nth-child(2) { width: 70%; }
.menu-icon span:nth-child(3) { width: 40%; }

.close-icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: #333;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
}

.header_menu.menu-open .menu-icon {
    opacity: 0;
    visibility: hidden;
}
.header_menu.menu-open .close-icon {
    opacity: 1;
    visibility: visible;
}

.menu-dropdown {
    position: fixed;
    top: 110px;
    left: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.6s;
    z-index: 888;
}

.menu-dropdown.active {
    visibility: visible;
    pointer-events: all;
    transition-delay: 0s;
}

.dropdown-columns {
    /*display: flex;*/
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.dropdown-col {
    /*flex: 1;
    padding: 40px 20px;*/
    height: 100%;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    overflow-y: auto; 
    float: left;
}

.dropdown-col:nth-child(1) { background-color: #272727;width: 50%; }
.dropdown-col:nth-child(2) { background-color: #1f1f1f;width: 42%; }
.dropdown-col:nth-child(3) { background-color: #000000;width: 8%; }

.menu-dropdown.active .dropdown-col {
    transform: translateY(0);
}
.menu-dropdown.active .dropdown-col:nth-child(1) { transition-delay: 0.1s; }
.menu-dropdown.active .dropdown-col:nth-child(2) { transition-delay: 0.3s; }
.menu-dropdown.active .dropdown-col:nth-child(3) { transition-delay: 0.5s;display: flex;align-items: flex-end; }

.menu-dropdown.closing .dropdown-col {
    transform: translateY(-100%) !important;
}
.menu-dropdown.closing .dropdown-col:nth-child(1) { transition-delay: 0.5s; }
.menu-dropdown.closing .dropdown-col:nth-child(2) { transition-delay: 0.3s; }
.menu-dropdown.closing .dropdown-col:nth-child(3) { transition-delay: 0.1s; }
/*@media (max-width: 992px) {
    .dropdown-columns {
        flex-direction: column;
    }
    
    .dropdown-col {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 33.33vh;
        padding: 30px 20px;
        transform: translateX(-100%);
    }
    
    .menu-dropdown.active .dropdown-col {
        transform: translateX(0);
    }
    .menu-dropdown.active .dropdown-col:nth-child(1) { transition-delay: 0.1s; }
    .menu-dropdown.active .dropdown-col:nth-child(2) { transition-delay: 0.3s; }
    .menu-dropdown.active .dropdown-col:nth-child(3) { transition-delay: 0.5s; }
    
    .menu-dropdown.closing .dropdown-col {
        transform: translateX(-100%) !important;
    }
    .menu-dropdown.closing .dropdown-col:nth-child(1) { transition-delay: 0.5s; }
    .menu-dropdown.closing .dropdown-col:nth-child(2) { transition-delay: 0.3s; }
    .menu-dropdown.closing .dropdown-col:nth-child(3) { transition-delay: 0.1s; }
    
    .menu-dropdown {
        transition: visibility 0s 0.6s;
    }
    .menu-dropdown.active {
        transition-delay: 0s;
    }
}*/
.menu-dropdown .name{color: #a3a3a3;writing-mode: vertical-lr;margin: 0 auto;margin-bottom: 120%;}
.dropdown-col-second{padding: 4%;}
.dropdown-col-second .word_logo{max-width: 198px;}
.dropdown-col-second .description{color: #fff;margin-top: 40px;}
.dropdown-col-second .info{margin-top: 60px;}
.dropdown-col-second .info a{color: #bcbcbc;border-bottom: 1px solid #6a6a6a;line-height: 36px;border-bottom: 1px solid #6a6a6a;display: inline-block;}
.dropdown-col-second .info a:hover{border-bottom: 1px solid #f8c301;}

.dropdown-col-first .nav{}
.dropdown-col-first .nav li{height: 90px; line-height: 90px;}
.dropdown-col-first .nav li a{font-size: 24px; display: block;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px; color: #fff;}
.dropdown-col-first .nav li a:before{content: '';
    display: inline-block;
    width: 0;
    height: 2px;
    background: #f8c301;
    position: relative;
    transition: width .3s;
    vertical-align: middle;
}
.dropdown-col-first .nav li a:hover{color: #f8c301;}
.dropdown-col-first .nav li a:hover:before{width: 70px; transition: width .3s; margin-right: 15px;transform: scale(1);}
.dropdown-col-first{padding-top: 2%;padding-left: 10%;}

/* Search page */
.all_search .title_h1{margin-bottom: 30px;}
.search_product {
    display: flex;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
}

.search_product .box1 {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    outline: none;
}

.search_product .box1:focus {
    border-color: #f88c01;
}

.search_product .box2 {
    width: 40px;
    height: 30px;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.3s ease;
    text-indent: -9999px; /* Hide text */
    overflow: hidden;
    position: relative;
}

.search_product .box2:hover {
    background-color: #333;
}

/* SVG magnifying glass - inline */
.search_product .box2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*@media (max-width: 1400px){
    .dropdown-col-first .nav li a{font-size: 30px;}
}*/
@media (max-width: 992px) {
    .motorlifetech_header .nav{display: none;}
    .motorlifetech_header,.motorlifetech_header .flex_box{height: 90px;}
    .menu-dropdown{top: 90px;}
    .dropdown-col:nth-child(1){width: 100%;}
    .menu-dropdown.active .dropdown-col:nth-child(2),.menu-dropdown.active .dropdown-col:nth-child(3),.menu-dropdown .dropdown-col:nth-child(2),.menu-dropdown .dropdown-col:nth-child(3){display: none;}
}
@media (max-width: 768px) {
    .motorlifetech_header,.motorlifetech_header .flex_box{height: 65px;}
    .motorlifetech_header .logo{max-width: 200px;}
    .header_menu{width: 40px;height: 40px;}
    .menu-icon{gap: 8px;}
    .search_product{max-width: 220px;margin: 15px 0;}
    .menu-dropdown{top: 65px;}
}
@media (max-width: 576px) {
    .search_product{display: none;}
    .dropdown-col-first .nav li a{font-size: 16px;}
    .dropdown-col-first .nav li a:hover:before{width: 40px;}
    .dropdown-col-first .nav li{height: 80px;line-height: 80px;}
    body {font-size: 14px;line-height: 24px;}
}



/* Footer */
.motorlifetech_footer{background-color: #1f1a17;padding: 40px 0;}
/*.motorlifetech_footer .footer_column{width: 25%;}*/
.motorlifetech_footer .footer_column_last{padding-top: 2%;}
.motorlifetech_footer .footer_column_middle{max-width: 56%;border-left: 1px solid #47423f;border-right: 1px solid #47423f;box-sizing: border-box;padding: 0 6%;text-align: center;padding-top: 2%;margin: 0 6%;}
.motorlifetech_footer .title{color: #fff;font-size: 18px;display: block;margin-bottom: 5px;font-weight: 600;}
.motorlifetech_footer .subtitle{color: rgba(255,255,255,.5);display: block;}
.motorlifetech_footer .footer_column_middle .flogo{max-width: 205px;margin: 0 auto;}
.motorlifetech_footer .footer_column_middle ul.info li{color: #fff;text-align: left;line-height: 28px;display: flex;text-align: left;margin-top: 20px;}
.motorlifetech_footer .footer_column_middle ul.info li:nth-child(1){float: left;}
.motorlifetech_footer .footer_column_middle ul.info li:nth-child(2){float: right;}
.motorlifetech_footer .footer_column_middle ul.info li .ic{width: 23px;height: 20px;margin-right: 5px;margin-top: 4px;}
.motorlifetech_footer .footer_column_middle .copy{line-height: 22px;margin-top: 40px;color: #989898;font-size: 12px;}
.motorlifetech_footer .footer_column_middle .copy a{color: #626262;}
.follow_all{display: flex;gap: 15px;margin-top: 40px;}

@media (max-width: 768px) {
    .motorlifetech_footer .flex_box{display: block;}
    .motorlifetech_footer .subtitle{float: left;width: 50%;}
    .motorlifetech_footer .footer_column_last .subtitle{width: 33.33%;}
    .motorlifetech_footer .footer_column{display: flow-root;}
    .motorlifetech_footer .footer_column_middle{border: none;padding: 0;margin: 0;max-width: 100%;border-top: 1px solid #47423f;border-bottom: 1px solid #47423f;margin: 20px 0;padding: 20px 0;}
    .motorlifetech_footer .footer_column_middle .copy{margin-top: 10px;}
    .product_categories03 .picture,.main_product_categories .box{width: 100%;}
    .motorlifetech_footer .footer_column_middle ul.info li:nth-child(2){float: left;}
    .motorlifetech_footer .footer_column_middle ul.info li{margin-top: 10px;width: 100%;}
    .motorlifetech_footer .footer_column_middle .flogo{margin-top: 10px;margin-bottom: 10px;}
}



/* Main Banner */
.main_banner{position: relative;}
.banner_wap{display: none;}
.scroll-indicator {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
    /*cursor: pointer;*/
}
.scroll-indicator .mouse {
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: relative;
}
.scroll-indicator .wheel {
    width: 4px;
    height: 10px;
    background-color: #fff;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.5s infinite;
}
@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}
.scroll-indicator .arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.scroll-indicator .arrow span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    animation: arrowDown 1.5s infinite;
    opacity: 0;
}
.scroll-indicator .arrow span:nth-child(1) {
    animation-delay: 0s;
}

.scroll-indicator .arrow span:nth-child(2) {
    animation-delay: 0.2s;
}

.scroll-indicator .arrow span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes arrowDown {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-5px, -5px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(5px, 5px);
    }
}
.scroll-indicator .scroll-text {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    animation: textPulse 2s infinite;
}
@keyframes textPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
.scroll-indicator.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Main Product Categories */
.main_bg{background-color: #f3f3f3;}
.main_bg02{
    background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 60%,
    #f8f8f8 70%,
    #f3f3f3 80%,
    #f3f3f3 100%
    );
}
.main_padding{padding: 100px 0;display: flow-root;}
.main_product_categories .title{font-size: 24px;color: #626262;font-weight: 800;}
.main_product_categories .description{color: #666;}
.all_more{display: inline-block;color: #626262;transition: color 0.3s ease;font-weight: bold;margin-top: 10px;}
.all_more::after{content: "→";display: inline-block;margin-left: 5px;transition: transform 0.3s ease;font-size: 24px;font-weight: bold;}
.all_more:hover::after{transform: translateX(5px);}
.main_product_categories .box{width: 46%;}
.product_categories01 .title{text-align: center;margin-bottom: 30px;}
.product_categories01 .more,.product_categories02 .more{float: right;}
.product_categories01 .picture{margin: 40px 0;}
.product_categories03 .box{float: left;}
.product_categories03 .picture{float: right;width: 50%;}
.product_categories04 .box{float: right;}
.product_categories04 .picture{float: left;width: 50%;}
.product_categories03 .description,.product_categories04 .description{margin: 50px 0 10px;}

@media (max-width: 992px) {
    .main_banner{margin-top: 90px;}
    .main_padding{padding: 60px 0;}
}
@media (max-width: 768px) {
    .product_categories03 .picture,.main_product_categories .box,.product_categories04 .picture{width: 100%;}
    .main_padding{padding: 40px 0;}
    .product_categories03 .description, .product_categories04 .description{margin-top: 20px;}
    .product_categories01 .title,.product_categories02 .title{margin-bottom: 20px;}
    .all_more{margin-top: 0;}
    .banner_com{display: none;}
    .banner_wap{display: block;}
    .main_banner{margin-top: 65px;}
    .product_categories01 .title{font-size: 20px;}
}
@media (max-width: 768px) {
    .product_categories01 .title,.product_categories02 .title,.main_product_categories .title{font-size: 18px;}
}



/* Responsive design */
@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {} 


/* Page About */
.header_height{height: 110px;}
.page_about,.page_contact,.all_page,.all_news,.all_product{margin: 90px 0 120px;padding: 0 20px;box-sizing: border-box;}
.width_about{max-width: 710px;margin: 0 auto;width: 100%;}
.page_about .picture1{max-width: 248px;margin: 0 auto;width: 100%;margin-bottom: 70px;}
.page_about .content{}
.flex_about{display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.flex_about .content{max-width: 50%;}
.top_about{margin-top: 25px;}

@media (max-width: 992px) {
    .header_height{height: 90px;}
}
@media (max-width: 768px) {
    .header_height{height: 65px;}
    .page_about, .page_contact, .all_page, .all_news, .all_product{margin: 60px 0 90px;}
    .page_about .picture1{max-width: 180px;}
    .page_about .picture1{margin-bottom: 50px;}
}
@media (max-width: 576px) {
    .page_about, .page_contact, .all_page, .all_news, .all_product{margin: 40px 0 60px;}
    .page_about .picture1{max-width: 160px;}
    .page_about .picture1{margin-bottom: 30px;}
    .flex_about{display: block;}
    .flex_about .content{max-width: 100%;}
    .top_about{margin-top: 15px;}
    .page_about .picture2{margin: 15px 0;}
}


/* Page Contact */
.title_h1{font-size: 24px;}
.width_contact{max-width: 960px;margin: 0 auto;width: 100%;}
.page_contact .wpforms-field-label{margin-bottom: 0!important;}
.page_contact .wpforms-field-label,.page_contact .wpforms-field-medium{float: left!important;}
.page_contact .wpforms-field-label{width: 100px!important;font-size: 16px!important;color: #9e9e9e!important;}
.page_contact .wpforms-field-medium{height: 30px!important;max-width: calc(100% - 100px)!important;}
.page_contact .wpforms-field-text{width: 48%!important;height: 32px!important;float: left!important;margin: 0!important;padding: 0!important;margin-top: 30px!important;}
.page_contact .wpforms-container .wpforms-field{clear: none!important;}
#wpforms-68-field_3{height: 98px!important;width: calc(100% - 100px)!important;}
#wpforms-68-field_3-container{display: flex!important;width: 100%;}
#wpforms-68-field_7-container,#wpforms-68-field_7-container,#wpforms-68-field_11-container,#wpforms-68-field_12-container{float: right!important;}
#wpforms-68-field_3-container{padding: 0!important;padding: 30px 0!important;}
#wpforms-submit-68{width: 86px!important;height: 38px!important;font-size: 14px!important;margin-left: 100px!important;}
.page_contact .form{border-bottom: 1px solid #dedede;padding-bottom: 80px;margin-bottom: 60px;}
.page_contact .info li{display: flex;align-items: center;margin-bottom: 30px;color: #666;}
.page_contact .info li .ic{margin-right: 15px;}
.page_contact .info{position: relative;}
.logo_contact{position: absolute;right: 0;top: 50%;z-index: -1;}
#wpforms-68-field_5-container{width: 100%!important;margin-bottom: 30px!important;}
#wpforms-68{margin-top: 0px!important;}
#wpforms-68-field_6-container{clear: both!important;float: none!important;}

.favorites-selection{margin-top: 20px; padding: 20px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee;}
.favorites-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.favorite-tag {
    display: inline-flex;
    align-items: center;
    background: #f88c01;
    color: white;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 12px;
    gap: 5px;
    animation: slideIn 0.3s ease;
}

.favorite-tag span{padding-top: 2px;}

.favorite-tag .remove-favorite {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.favorite-tag .remove-favorite:hover {
    opacity: 1;
}

.no-favorites {
    color: #999;
    font-style: italic;
    padding: 10px 0;
}

/*@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/

@media (max-width: 576px) {
    .title_h1{font-size: 20px;}
    .page_contact .wpforms-field-text{width: 100%!important;}
    .page_contact .form{padding-bottom: 20px;margin-bottom: 40px;}
    .logo_contact{display: none;}
    .page_contact .info li{margin-bottom: 15px;display: block;display: flow-root;}
    .page_contact .info li .ic,.page_contact .info li .txt{float: left;}
}


/* News list */
.all_news{}
.width_news{max-width: 1000px;margin: 0 auto;width: 100%;}
.all_news h1.title_h1{text-align: center;}
.list_news li{width: 48%;float: left;margin-right: 4%;margin-top: 80px;display: flow-root;}
.list_news li:nth-child(2n){margin-right: 0;}
.list_news li .date{background-color: #818181;text-align: center;width: 87px;font-size: 14px;line-height: 22px;color: #fff;padding: 20px 0;float: left;}
.list_news li .day{font-size: 20px;margin-bottom: 15px;}
.list_news li .box{width: calc(100% - 110px);float: right;}
.list_news li .box .title{max-width: 310px;color: #a6a6a6;font-size: 14px;line-height: 22px;}
.list_news li .box .title a{color: #a6a6a6;}
.list_news li .box .more{font-size: 14px;font-weight: normal;}
.all_news_info .content{}
.all_news_info img{width: auto!important;}
.all_news_info .title_h1{margin-bottom: 60px;font-size: 20px;}
.all_news_info .content p{margin: 25px 0;font-size: 14px;line-height: 26px;}
.pagelist ul.page-numbers{display: flex;justify-content: center;margin-top: 90px;}
.pagelist ul.page-numbers li{margin: 0 6px;}
.pagelist ul.page-numbers li a,.pagelist ul.page-numbers li span.current{width: 30px;height: 30px;text-align: center;line-height: 30px;border: 1px solid #ccc;color: #1f1f1f;background: #fff;font-size: 14px;cursor: pointer;display: block;}
.pagelist ul.page-numbers li span.current{background-color: #f8c301;color: #fff;border: 1px solid #f8c301;}
/* news article */
.news_info_size{font-size: 16px;}

@media (max-width: 768px) {
    .list_news li{width: 100%;margin-right: 0;margin-top: 40px;}
    .list_news li .box .title{max-width: 100%;}
}
@media (max-width: 576px) {
    .pagelist ul.page-numbers{margin-top: 30px;}
    .list_news li{margin-top: 20px;}
    .all_news_info .title_h1{font-size: 16px;}
    .all_news_info .title_h1{margin-bottom: 30px;}
    .all_news_info .content p{margin: 10px 0;}
}



/* Product list */
.all_product{margin-top: 50px;}
.width_product{max-width: 1100px;margin: 0 auto;width: 100%;}
.product_categories{padding-bottom: 50px;display: flow-root;}
.arrow-right{margin: 0 20px;}
.arrow-right::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #b3b3b3;
    vertical-align: middle;
}

.product_categories li{width: 25%;float: left;}
/*.product_categories ul{display: flex;align-items: center;justify-content: space-between;}*/
.product_categories li a{display: flex;height: 50px;line-height: 50px;color: #626262;font-size: 18px;text-decoration: underline;font-weight: 600;padding-right: 20px;overflow: hidden;}
.product_categories li:hover a{background: #eee;}
.product_categories li.active a{color: #f8c301;}
.product_categories li.active .arrow-right::before,.all_loca .arrow-right::before{border-left: 8px solid #f8c301;}

.all_loca a{font-size: 12px;color: #626262;margin-left: 10px;margin-right: 25px;}
.all_loca{display: flex;align-items: center;border-bottom: 1px solid #eaeaea;height: 40px;line-height: 40px;margin-bottom: 60px;}
.all_loca .arrow-right{margin: 0;}
.all_loca .home-link{margin-top: 8px;}

ul.list_product{display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;list-style: none;padding: 0;margin: 0;}
ul.list_product li .title a{color: #626262;font-weight: 600;}
ul.list_product li .box{display: flex;align-items: flex-start;justify-content: space-between;}
ul.list_product li .like{}

ul.advantages_product{display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px;list-style: none;padding: 0;margin: 0;}
ul.advantages_product li{display: flex;align-items: center;border-right: 1px solid #ebebeb;margin-left: 10%;}
ul.advantages_product li:last-child{border-right: none;}
ul.advantages_product li .ic{width: 65px;margin-right: 20px;}
ul.advantages_product li:last-child .ic{width: 85px;}
ul.advantages_product li .word{color: #737373;}
ul.advantages_product li .word .des{color: #000;font-size: 25px;font-weight: bold;}

ul.highlights_product{display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;list-style: none;padding: 0;margin: 0;margin-top: 100px;}
ul.highlights_product li{display: flex;align-items: center;}
ul.highlights_product li .ic{width: 30px;margin-right: 10px;}
ul.highlights_product li .word{color: #898989;}
ul.highlights_product li .word .des{color: #363636;font-weight: bold;}

.send_product {
    height: 45px;
    line-height: 45px;
    padding: 0 24px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    background-color: #ff6c00;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin-top: 100px;
}

.send_product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #ffa200;
    transition: width 0.3s ease;
    z-index: -1;
}

.send_product:hover::before {
    width: 100%;
}

.send_product:hover {
    color: #fff !important;
}

/* Like product styles */
.like_product{margin: 50px 0;}
.like_product-2 .name{font-size: 12px;color: #a4a4a4;}
.like_product-2{display: flex;justify-content: center;}
/* Favorite heart styles */
.favorite-heart {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
    position: relative;
}

.favorite-heart:hover {
    transform: scale(1.1);
}

.favorite-heart.active .heart-icon path {
    fill: #f88c01;
    stroke: #f88c01;
}

/* Pulse glow effect on active */
.favorite-heart.active {
    animation: heartPulse 0.6s ease;
}

@keyframes heartPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(248, 140, 1, 0));
    }
    30% {
        transform: scale(1.3);
        filter: drop-shadow(0 0 10px rgba(248, 140, 1, 0.5));
    }
    60% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 5px rgba(248, 140, 1, 0.3));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(248, 140, 1, 0));
    }
}

/* Optional: add a second ripple */
.favorite-heart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid #f88c01;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.favorite-heart.active::before {
    animation: ringPulse 0.6s ease-out;
}

@keyframes ringPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Notification styles */
.favorite-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #f88c01;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


@media (max-width: 992px) {
    .product_categories li{width: 33.33%;}
    .product_categories li a{font-size: 16px;}
}
@media (max-width: 768px) {
    .product_categories li{width: 50%;}
    ul.list_product{display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
    .send_product,ul.highlights_product{margin-top: 40px;}
    .all_product_info .title{font-size: 24px;}
}
@media (max-width: 576px) {
    .product_categories li a{height: 36px;line-height: 36px;}
    .arrow-right{margin: 0;margin-right: 10px}
    .product_categories{padding-bottom: 20px;}
    .all_product{margin-top: 20px;}
    .all_loca{margin-bottom: 20px;}
    ul.list_product{display: grid;grid-template-columns: repeat(1, 1fr);gap: 0px;}
    .send_product,ul.highlights_product{margin-top: 30px;}
    .all_loca a{margin: 0 8px;}
    .all_product_info .title{font-size: 18px;}
    .like_product-2{margin: 0;margin-bottom: 20px;}
    ul.advantages_product{grid-template-columns: repeat(2, 1fr);gap: 20px;}
    ul.advantages_product li .word .des{font-size: 18px;}
    ul.advantages_product li .ic{width: 40px;margin-right: 15px;}
    ul.advantages_product li{margin-left: 0;border: none;}
    ul.advantages_product li:last-child .ic{width: 48px;}
    ul.highlights_product{grid-template-columns: repeat(2, 1fr);gap: 10px;}
    .product_categories li:nth-child(2n) a{padding-right: 0px!important;}
}