:root {
--primary-color: #f11a21;
--secondary-color: #0f6b35;
--gray: #e0e0e0;
}

.text-color{ color: var(--primary-color) !important;}
.text-gray{ color: #666666 !important;}
.text-green{ color: #0f6b35 !important;}

/* topbar */
body.index-style-2 #topbar{ display: none;}
.tb-language > a.title{ line-height: 30px;}
.tb-language span{ color: #6a5a5a; font-weight: 500;}
.tb-language > a.active span{ color: #000;}

.header-extra-social .social-icons{
margin-top: 23px;
}
#header.header-sticky .header-inner{
background: #fff !important;
box-shadow: 0 12px 6px rgba(0, 0, 0, .06);
}
.header-extra-social .social-icons.social-icons-rounded li a{
background-color: var(--primary-color) !important;
}
.header-extra-social .social-icons.social-icons-rounded li a i{
 color: #fff !important;
}
.custom-theme .btn, .custom-theme button.btn, .custom-theme .btn:not(.close):not(.mfp-close), .custom-theme
a.btn:not([href]):not([tabindex]){
background: var(--secondary-color);
}

/* header */
html[data-page="page-index"] #header:not(.header-sticky) .header-inner{
background: transparent !important;
box-shadow: none;
position: relative;
top: 10px;
}
html[data-page="page-index"] #header .header-inner{
    background: transparent;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.07);
}
#mainMenu nav > ul > li > a{
font-weight: 500;
color: #2a2929;
}

/* subpahe-title */
#page-title{ padding: 80px 0;}
.custom-theme .bg-cover::before{ display: none;}
.btn.btn-secondary:not(:hover){
    background: #dbd7d7 !important;
    color: #5e5e5e !important;
}
.btn.btn-secondary i{ color: inherit !important;}


/* slide */
#slider{
top: -80px;
margin-bottom: -80px;
}

/* 01 - about */
.short-line{
position: relative;
width: 120px;
height: 1px;
display: inline-block;
background: #bdbdbd;
margin: 10px 0;
}
section.about{ position: relative;}
/* section.about::before{
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%;
background: #E80B25;
background: linear-gradient(180deg, rgba(232, 11, 37, 1) 0%, rgba(245, 153, 164, 1) 47%, rgba(252, 220, 224, 1) 75%,
rgba(255, 255, 255, 1) 100%);
opacity: 0.5;
} */
section.about .cright{ padding-left: 40px;}
section.about img{ transition: all 0.5s ease;}
section.about img:hover{ transform: scale(1.05); }
.list-feature{ padding-left: 0;}
.list-feature li{
position: relative;
padding-left: 90px;
margin-bottom: 30px;
}
.list-feature li .icon-wrapper{
position: absolute;
left: 0;
top: 0;
background-color: var(--primary-ci-color-110);
}
.list-feature li .icon-wrapper img{
height: 40px;
filter: brightness(0) invert(1);
}
.list-feature li h4{
color: var(--primary-color);
margin: 0;
}
.list-feature li p{ font-size: 14px; }

/* 02 - feature Types Section */
.feature-types-section {
padding: 80px 0;
background-color: #fff;
}
.list-feature-type > .feature-type-item:nth-child(2n){
position: relative;
top: 20px;
}
.list-feature-type > .feature-type-item:nth-child(2n) .feature-icon-wrapper{
background-color: var(--secondary-color);
top: 20px;
}
.list-feature-type > .feature-type-item:nth-child(2n) .feature-type-card:hover{
border-color: var(--secondary-color);
}

.feature-types-header {
margin-bottom: 50px;
}

.feature-types-badge {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
}

.badge-lines {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
}

.badge-lines::before,
.badge-lines::after {
content: '';
position: absolute;
width: 2px;
height: 10px;
background: #ff6b35;
transform-origin: center;
}

.badge-lines::before {
top: 2px;
left: 4px;
transform: rotate(-45deg);
}

.badge-lines::after {
bottom: 2px;
left: 4px;
transform: rotate(45deg);
}

.badge-text {
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
color: var(--secondary-color);
text-transform: uppercase;
}

.feature-types-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin: 0;
line-height: 1.2;
}

.feature-type-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.feature-type-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-color: var(--primary-color);
}

.feature-icon-wrapper {
width: 80px;
height: 80px;
background-color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}

.feature-type-card:hover .feature-icon-wrapper {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(222, 10, 63, 0.3);
}
.feature-type-card .feature-icon-wrapper img{
width: 40px;
}

.feature-icon-wrapper i {
font-size: 32px;
color: #fff;
}

.feature-type-name {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 8px;
line-height: 1.3;
}

.feature-count {
font-size: 0.9rem;
color: #999;
margin: 0;
line-height: 1.4;
}

@media (max-width: 991px) {
.feature-types-title {
font-size: 2rem;
}

.feature-type-card {
padding: 25px 15px;
margin-bottom: 20px;
}

.feature-icon-wrapper {
width: 70px;
height: 70px;
}

.feature-icon-wrapper i {
font-size: 28px;
}
}

@media (max-width: 575px) {
.feature-types-section {
padding: 50px 0;
}

.feature-types-title {
font-size: 1.75rem;
}

.feature-type-card {
padding: 20px 10px;
min-height: 210px;
}

.feature-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 15px;
}

.feature-icon-wrapper i {
font-size: 24px;
}

.feature-type-name {
font-size: 1rem;
}

.feature-count {
font-size: 0.85rem;
}
}

/* 03 - category section */
.sect-category {
padding: 0;
background-color: #fff;
overflow: hidden;
}
.sect-category .cleft,
.sect-category .cright{
padding: 0;
}
.sect-category .cleft{ padding-left: 15px;}
.sect-category .cright{ padding-right: 15px; }
.category-slider-wrapper {
position: relative;
height: 100%;
min-height: 600px;
}

.category-slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.category-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
display: flex;
flex-direction: column;
}

.category-slide.active {
opacity: 1;
z-index: 1;
}

.category-slide-image {
flex: 1;
overflow: hidden;
position: relative;
}

.category-slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}

.category-slide.active .category-slide-image img {
transform: scale(1.05);
}

.category-slide-footer {
background: #fff;
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
}

.slide-label {
font-size: 14px;
font-weight: 500;
color: #999;
letter-spacing: 0;
text-transform: uppercase;
position: absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;
}

.slide-pagination {
display: flex;
gap: 8px;
align-items: center;
}

.pagination-dot {
width: 8px;
height: 8px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}

.pagination-dot.active {
background: #b50f16;
width: 10px;
height: 10px;
}

.slide-number {
font-size: 14px;
font-weight: 500;
color: #999;
}

/* Category List Wrapper */
.category-list-wrapper {
background: #b50f16;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 4px
);
padding: 80px 60px;
height: 100%;
min-height: 600px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: url(../images/bg-product-title.jpg) no-repeat;
background-size: cover;
background-position: left center;
}

.category-list-header {
margin-bottom: 40px;
}

.category-list-title {
margin: 0;
line-height: 1.2;
}

.title-main {
display: block;
font-size: 3.5rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
}

.title-sub {
display: block;
font-size: 2rem;
font-weight: 400;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 5px;
}

.category-list {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}

.category-item {
display: flex;
align-items: flex-start;
padding: 5px 0;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.7;
}

.category-item:hover {
opacity: 1;
}

.category-item.active {
opacity: 1;
}

.category-bullet {
display: inline-block;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
margin-right: 15px;
margin-top: 8px;
flex-shrink: 0;
transition: all 0.3s ease;
}

.category-item.active .category-bullet {
background: #fff;
width: 10px;
height: 10px;
}

.category-text {
font-size: 1.1rem;
color: #fff;
line-height: 1.6;
font-weight: 400;
}

.category-item.active .category-text {
font-weight: 600;
font-size: 1.5rem;
}

.category-cta {
margin-bottom: 30px;
}
.category-cta .btn-read-more:hover{
background: var(--secondary-color);
border-color: var(--secondary-color);
color: #fff !important;
}

.btn-read-more {
display: inline-block;
background: #fff;
color: #b50f16;
padding: 12px 40px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border: 2px solid #fff;
}

.btn-read-more:hover {
background: transparent;
color: #fff;
border-color: #fff;
}

.category-description {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.8;
}

.category-description p {
margin: 0;
color: var(--gray);
}

/* Responsive */
@media (max-width: 1199px) {
.category-list-wrapper {
padding: 60px 40px;
}

.title-main {
font-size: 2.5rem;
}

.title-sub {
font-size: 1.5rem;
}
}

@media (max-width: 991px) {
.sect-category .row {
flex-direction: column;
}

.category-slider-wrapper {
min-height: 400px;
}

.category-list-wrapper {
padding: 50px 30px;
min-height: auto;
}

.title-main {
font-size: 2rem;
}

.title-sub {
font-size: 1.25rem;
}

.category-text {
font-size: 1rem;
}
}

@media (max-width: 575px) {
.category-slider-wrapper {
min-height: 350px;
}

.category-slide-footer {
padding: 15px 20px;
min-height: 70px;
}

.category-list-wrapper {
padding: 40px 20px;
}

.title-main {
font-size: 1.75rem;
}

.title-sub {
font-size: 1.1rem;
}


.category-text {
font-size: 0.9rem;
}

.btn-read-more {
padding: 10px 30px;
font-size: 0.85rem;
}
}

/* 04 - sect-gallery */
.sect-news-grid{ padding: 80px 0;}
.sect-gallery {
padding: 0;
background-color: #fff;
overflow: hidden;
}
.sect-gallery .gallery-slider-wrapper {
position: relative;
height: 100%;
min-height: 600px;
}
.sect-gallery .gallery-slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

/* 05 sect-cta */
.sect-cta{ padding: 120px 0;}
.custom-theme .background-sub-con::before{ display: none;}

/* footer */
footer,
.custom-theme footer{
background: #f2f2f2;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(221, 221, 221, 1));
}
footer .h5{ font-size: 18px;}
footer, footer a, footer p{
font-size: 15px;
}
footer a.text-secondary:focus,
footer a.text-secondary:hover,
footer a:hover{
color: var(--primary-color) !important;
}
.ft-copyright{
margin-top: 40px;
padding-bottom: 20px;
}
footer .social-icons a.btn-social:not(:hover){
background: #a6a4a4 !important;
}
footer .category-bullet{
background: rgba(164, 164, 164, 0.5);
margin-right: 5px;
}
footer .ft-3{ padding-left: 30px;}

/* page-about */
.sect-page-about .list-feature-type > .feature-type-item:nth-child(2n){
    top: 0;
}
.sect-page-about .about-right{ 
    padding-left: 60px;
    align-self: center;
}
.sect-page-about .box-contact{ 
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 40px;
}
.sect-page-about-cta blockquote{
    font-size: 2em;
    font-weight: 500;
    color: #fff;
}
.blockquote-icon{
    position: relative;
    padding-top: 100px;
    &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 64px;
        height: 64px;
        background: url(../images/icon/quote.png) no-repeat center center;
        background-size: 100%;
        background-position: center;
    }
}
.sect-page-about .counter-item .inner{
    background: #fff;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: 40px 20px 10px 20px;
border-radius: 10px;
height: 100%;
background: #cccccc;
background: linear-gradient(24deg, rgba(204, 204, 204, 1) 0%, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 72%, rgba(224, 224, 224, 1) 100%);
border-bottom: 5px solid var(--secondary-color);
border-radius: 10px 10px 0 0;
}
.sect-page-about .counter{ color: #827979;}
.sect-page-about .counter-item p{ font-size: 14px;}
.sect-page-about .counter small{
    display: block;
}
.sect-page-about .img-about-float{
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: auto;

}


/* product-detail */
.sect-product-1{ padding-bottom: 30px;}
.sect-product-1 .product-title{font-size: 1.25em; }
.sect-product-1 .article-content h3{ font-size: 19px;}

@media (max-width: 1366px) {
    .inspiro-slider .slide,
    #slider, 
    #slider .flickity-viewport{
        height: 750px !important;
    }
    section.about img{ width: 100%;}
    .list-feature li .icon-wrapper img{ width: auto;}
    h2{ font-size: 2em;}
    .list-feature li h4{ font-size: 18px;}
    .list-feature-type{ display: inline-block; width: 100%;}
    .feature-type-item{ width: 25%; max-width: initial;}    
}
@media (min-width: 768px){
    .container, .container-md, .container-sm{max-width: 94%;}
}
@media (min-width: 992px){
    .container, .container-lg, .container-md, .container-sm{ max-width: 90%;}
}
@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl{ max-width: 1140px;}
}
@media (min-width: 1700px){
    /* html[data-page="page-index"] .container, footer .container{ max-width: 1600px;} */
    .container, .container-lg, .container-md, .container-sm, .container-xl{
        max-width: 1600px;
    }
}
@media (max-width: 1024px) {
    #header{ height: auto;}
    .inspiro-slider .flickity-button{
        width: 50px;
        height: 50px;
    }
    .inspiro-slider .flickity-button, .inspiro-slider .flickity-button::before{ line-height: 50px;}
    .inspiro-slider .flickity-button.previous, .inspiro-slider .flickity-button.previous:hover{ left: 15px !important;}
    .inspiro-slider .flickity-button.next, .inspiro-slider .flickity-button.next:hover{ right: 15px !important; }
}
@media (max-width: 991px){
    .inspiro-slider .slide, #slider, #slider .flickity-viewport{
        height: 400px !important;
    }
    html[data-page="page-index"] #header:not(.header-sticky) .header-inner{ top: 0;}
    section.about .cleft,
    section.about .cmiddle,
    section.about .cright,
    footer .ft-1,
    footer .ft-2,
    footer .ft-3{
        width: 100%;
        flex: none;
        max-width: initial;
    }
    section.about .cleft{ width: 100%;}
    section.about .cmiddle{ width: 30%;}
    section.about .cright{ width: 70%;}
    footer .ft-2, footer .ft-3{
        width: 50%;
    }
    .about__text{ text-align: center;}
    section.about .cleft{ margin-bottom: 40px;}
    
    .category-slide.active{
        position: relative;
        opacity: 1;
    }
    .category-list-wrapper{ padding: 40px 80px;}
    .category-slide-footer{
        padding-left: 80px;
        padding-right: 80px;
    }
    
    /* page about */
    #page-title{ padding: 40px 0;}
    .sect-page-about .cleft{
        width: 70%;
        flex: none;
        max-width: initial;
    }
    .sect-page-about .counter-item{ width: 25%;}

    /* news */
    .news-item .news-title a{ font-size: 15px; font-weight: 400;}

}
@media (max-width: 768px){
    #header #logo{
        width: auto;
        right: initial;
        left: 80px;
    }
    #header .header-inner #logo a > img{
        height: 60px;
        padding: 0;
        top: 5px;
        position: relative;
    }

    .sect-page-about .counter-item{
        width: 50%;
        margin-bottom: 30px;
    }
    .sect-page-about .about-left,
    .sect-page-about .about-right{ 
        width: 100%;
        flex: none;
        max-width: initial;
    }
    .sect-page-about .box-contact{ text-align: center;}
    .sect-page-about .about-right{ padding-left: 15px;}
    .sect-page-about-cta blockquote{ font-size: 1.5em;}

    /* news */
    .sect-news-grid{ padding: 40px 0;}
    .news-item{margin: 0; margin-bottom: 30px;}
    .news-item .news-content{ padding: 15px;}
    .news-item .news-title a{ font-size: 16px; font-weight: 500;}
}
@media (max-width: 575px){
    h2{ font-size: 1.5em;}
    .feature-type-item{ padding: 0 6px;}
    .category-slide-footer{
        padding-left: 30px;
        padding-right: 30px;
    }
    .sect-news-grid .btn-view-all{
        position: relative !important;
        margin-top: 20px;
    }
    footer .ft-2, footer .ft-3{ width: 100%;}
    footer .ft-3{ padding-left: 15px;}
    footer .ft-copyright .col-auto{ margin-bottom: 10px;}
    
    /* page about */
    .counter span{ font-size: 36px;}
    
    /* product-detail */
    .sect-product-1 .col-detail{ margin-bottom: 30px; }
}
@media (max-width: 480px){
    #mainMenu-trigger{ margin-left: 0;}
    section.about .cmiddle, section.about .cright{ width: 100%;}
    section.about img{ width: 60%; margin-bottom: 40px;}
    .list-feature li .icon-wrapper img{ margin-bottom: 0;}
    section.about .cright{ padding-left: 15px;}
    .list-feature-type{ margin: 0;}
    .feature-type-card{ min-height: 220px; margin-bottom: 0;}
    .feature-type-item{ width: 50%; min-height: 205px;}
    .list-feature-type > .feature-type-item:nth-child(2n){ top: 0;}
    .list-feature-type > .feature-type-item:nth-child(3n){ clear: left;}
    .category-list-header{ margin-bottom: 20px;}
    .inspiro-slider .flickity-button.next, .inspiro-slider .flickity-button.previous{ opacity: 0;}

    .sect-page-about .cleft{ width: 100%; padding-top: 30px;}
    .p-b-120{ padding-bottom: 60px !important;}
    .p-t-60{ padding-top: 20px !important;}

    .article-title{ font-size: 1.8em;}
    .article-content li{ margin-bottom: 5px;}
}
@media (max-width: 375px){
    html[data-page="page-index"] #header:not(.header-sticky) .header-inner{ top: 0;}
    #header .container{ padding: 0 20px;}
    .inspiro-slider .slide, #slider, #slider .flickity-viewport{ height: 300px !important;}
    .category-list-wrapper{ padding: 40px;}
    .slide-pagination{ display: none;}
    .sect-cta{ padding: 80px 0;}

    .sect-page-about .cleft h4{ font-size: 20px;}
    .sect-page-about .box-contact a{ display: block;}
}
@media (max-width: 320px){
    #mainMenu-trigger{ margin-left: 0;}
    #header #logo{ left: 60px;}
    .sect-page-about .cleft h4{ font-size: 16px;}
    .sect-page-about .cleft h2{ font-size: 20px;}
    .sect-page-about .counter-item{ width: 100%;}
}