.list-slider{
    list-style: none;
    margin: 0;
    padding: 0;

    li{
        img{
            width: 100%;
        }
    }
}

.slick-dots{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;

    li{
        margin: 0 12px;

        button{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 0;
            background-color: #959595;
            box-shadow: none;
            text-indent: -99999px;
        }

        &.slick-active, &:active{
            button{
                background-color: #F89623;
            }
        }
    }
}

.home-about{
    @include rem('padding', 50, 0);
    background: url(../images/home-about.png) no-repeat center;
    background-size: cover;

    h2.title{
        margin-bottom: 20px;
    }

    .btn{
        @include rem('margin-top', 30);
    }
}

.home-used{
    background: url(../images/home-used.jpg) no-repeat top center;
    background-size: cover;
    padding: 15px 0 30px;

    h2.title{
        margin-bottom: 20px;
    }

    .list-used{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 30px;

        @include media-breakpoint-down(lg){
            grid-gap: 15px;
        }

        @include media-breakpoint-down(md){
            grid-template-columns: repeat(2, 1fr);
        }

        .item{
            transition: all 0.3s;
            padding: 15px;
            background-color: rgb(255 255 255 / 85%);
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            border-radius: 10px;
            text-align: center;

            &:hover{
                background-color: #F89623;

                img{
                    filter: brightness(0) invert(1);
                }

                h4, .des{
                    color: $white;
                }
            }

            .img{
                margin-bottom: 20px;

                img{
                    max-height: 61px;
                    object-fit: cover;

                    @include media-breakpoint-down(md){
                        max-width: 50px;
                    }
                }
            }

            h4{
                font-family: $font-family-base;
                color: $primary;
                font-weight: 700;
                font-size: 16px;
                margin-bottom: 12px;
                
            }

            .des{
                text-align: justify;
                color: #181818;
            }
        }
    }
}

.home-product-cat{
    padding: 30px 0;
    background-color: #F89623;
    background-image: url(../images/bg-category-home.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.list-category-home{
    .item-category{
        padding: 0 5px;

        .wrap-img{
            text-align: center;
            margin-bottom: 20px;
        }

        .name{
            color: $white;
            font-size: 25px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
        }
    }

    .slick-arrow{
        text-decoration: none;
        padding: 0;
        text-indent: -99999px;
        border: 0;
        background-color: rgba(255, 255, 255, 0.3);

        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 25px;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        &:hover{
            background-color: rgba(255, 255, 255, 0.7);;
        }

        &.slick-prev{
            background-image: url(../images/left.svg);
            left: -50px;
        }

        &.slick-next{
            background-image: url(../images/right.svg);
            right: -50px;
        }
    }
}

.home-product-featured{
    @include rem('padding', 40, 0);
    background: url(../images/bg-featured.png) no-repeat left top;

    h2.title{
        margin-bottom: 30px;
    }
}

.viewmore{
    font-family: $font-family-base;
    font-size: 20px;
    font-weight: 600;
    color: #9D9D9D;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;

    &:after{
        content: '';
        transition: all 0.3s;
        display: block;
        margin-left: 10px;
        width: 36px;
        height: 29px;
        background: url(../images/arrow-right.svg) no-repeat center;
    }

    &:hover{
        &:after{
            margin-left: 20px;
        }
    }
}

.product-f-list{
    margin-bottom: 30px;
}

.product-f-item{
    &:nth-child(odd){
        .row{
            flex-direction: row-reverse;
        }
    }

    .row{
        align-items: center;
    }

    .col-md-5{
        @include media-breakpoint-down(md){
            text-align: center;
        }
    }

    h3{
        font-size: 30px;
        color: #181818;
        font-weight: 600;
        text-align: center;
        margin-bottom: 15px;
    }

    .des{
        text-align: center;
        margin-bottom: 30px;
    }

    .wrap-btn{
        width: 350px;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        .btn{
            min-width: 150px;
        }

        .btn-outline{
            background-color: transparent;
            border: 1px solid $primary;
            color: $primary;
        }
    }
}

.home-partner{
    padding: 30px 0;

    h2.title{
        @include rem('margin-bottom', 40);
    }

    .video-wrap{
        &:before{
            @include rem('width', 150);
            @include rem('height', 150);
        }
    }

    .wrap{
        display: flex;

        @include media-breakpoint-down(md){
            display: block;
        }

        .left{
            width: 50%;

            @include media-breakpoint-down(md){
                width: 100%;
            }

            img{
                width: 100%;
            }
        }

        .right{
            background-color: #F1F1F1;
            width: 55%;
            margin-left: -5%;
            margin-top: 55px;
            margin-bottom: -35px;
            padding: 35px 100px;

            @include media-breakpoint-down(lg){
                padding: 35px 30px;
            }

            @include media-breakpoint-down(md){
                position: relative;
                width: 100%;
                padding: 15px;
                margin-left: 0;
                margin-bottom: 0;
                margin-top: 0;
                z-index: 2;
            }

            p{
                margin-bottom: 5px;
            }

            .content{
                padding-left: 30px;
                width: 500px;
                max-width: 100%;
                font-size: 20px;

                @include media-breakpoint-down(md){
                    padding-left: 0;
                    font-size: 15px;
                }
            }
        }
    }
}

.home-news{
    @include rem('padding', 40, 0);

    h2.title{
        @include rem('margin-bottom', 50);
    }
}

.list-news{
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);

    @include media-breakpoint-down(md){
        grid-gap: 15px;
    }

    @include media-breakpoint-down(md){
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
    }
}

.news-page{
    @include media-breakpoint-down(md){
        grid-template-columns: repeat(2, 1fr);
    }

    @include media-breakpoint-down(sm){
        grid-template-columns: repeat(1, 1fr);
    }    

    .news-item:first-child{
        grid-area: 1 / 1 / auto / span 2;

        @include media-breakpoint-down(sm){
            grid-area: auto;
        }
        
        .wrap-info{
            padding: 10px 20px;
            background: rgba(248, 150, 35, 0.8);
            mix-blend-mode: normal;
            position: absolute;
            top: 0;
            right: 0;
            width: 350px;
            max-width: 100%;

            .post-title{
                color: $white;
                margin-bottom: 5px;
            }

            .date{
                color: $white;
                margin-bottom: 5px;
                font-size: 15px;
            }

            .des{
                color: $white;
                display: block;
                font-size: 14px;

                p{
                    margin-bottom: 0;
                }
            }
        }
    }
}

.news-item{
    position: relative;

    .wrap-img{
        overflow: hidden;

        img{
            transition: all 0.3s;
            width: 100%;
            min-height: 215px;
            object-fit: cover;
        }

        &:hover{
            img{
                transform: scale(1.2);
            }
        }
    }

    .wrap-info{
        padding: 10px 0;

        .post-title{
            display: block;
            font-family: $font-family-secondary;
            font-size: 24px;
            color: #181818;
            font-weight: 600;
            margin-bottom: 20px;
            text-decoration: none;

            &:hover{
                color: $primary;
            }
        }

        .date{
            font-size: 16px;
            color: #6C6C6C;
        }

        .des{
            display: none;
        }
    }
}

.home-testimonial{
    @include rem('padding', 40, 0);

    h2.title{
        @include rem('margin-bottom', 50);
    }
}

.list-testimonial{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;

    @include media-breakpoint-down(md){
        grid-gap: 15px;
    }

    @include media-breakpoint-down(md){
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
    }    

    .testimonial-item{
        background-color: #F1F1F1;

        .wrap-img{
            overflow: hidden;

            img{
                width: 100%;
                transition: all 0.3s;
            }

            &:hover{
                img{
                    transform: scale(1.2);
                }
            }            
        }

        .wrap-info{
            padding: 15px;

            .name{
                font-weight: 600;
                font-family: $font-family-secondary;
                color: #F89623;
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
    }
}

.home-faqs{
    h2.title{
        margin-bottom: 15px;
    }

    .content{
        text-align: center;
    }
}

.accordion{
    margin-top: 25px;        

    .accordion-item{
        border-radius: 0;
        border: 1px solid #E0E0E0;
    }

    .accordion-button{
        outline: none;
        box-shadow: none;
        padding: 13px 24px;
        border-radius: 0;
        background-color: #F5F5F5;

        font-weight: 500;
        @include rem('font-size', 20);
        font-family: $font-family-secondary;

        @include media-breakpoint-down(md){
            padding-left: 10px;
            padding-right: 10px;
        }

        &:before{
            content: '';
            background-image: none;
            width: 20px;
            height: 4px;
            background-color: #F89623;
            position: absolute;
            right: 24px;

            @include media-breakpoint-down(md){
                right: 10px;
            }
        }

        &:after{
            content: '';
            background-image: none;
            width: 20px;
            height: 4px;
            background-color: #F89623;
            transform: rotate(90deg);
        }

        &:not(.collapsed){
            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
            background-color: $primary;
            color: $white;

            &:after{
                display: none;
            }

            &:before{
                background-color: $white;
            }
        }
    }

    .accordion-body{
        text-align: left;
        background-color: #FFE6C9;
    }
}

.home-contact{
    @include rem('padding', 60, 0);

    h2.title{
        margin-bottom: 15px;
    }

    .site-info{
        list-style: none;
        margin: 0;
        padding: 0;

        @include rem('margin-top', 60);
        @include rem('padding-top', 30);
        border-top: 1px solid #939393;

        li{
            font-size: 20px;
            font-family: $font-family-secondary;
            color: #3E3E3E;
            margin-bottom: 15px;

            display: flex;
            align-items: center;

            &:before{
                content: '';
                display: block;
                width: 35px;
                height: 35px;
                margin-right: 15px;
                background-size: cover;
                background-repeat: no-repeat;
            }

            &.address{
                &:before{
                    background-image: url(../images/location.svg);
                }
            }

            &.email{
                &:before{
                    background-image: url(../images/email.svg);
                }
            }

            &.website{
                &:before{
                    background-image: url(../images/web.svg);
                }
            }

            &.phone{
                &:before{
                    background-image: url(../images/phone.svg);
                }
            }
        }
    }

    .contact-form{
        @include media-breakpoint-down(lg){
            margin-top: 30px;
        }
    }

    .wpcf7-form{
        .wpcf7-form-control-wrap{
            display: block;
            margin-bottom: 20px;

            .wpcf7-text,
            .wpcf7-textarea{
                width: 100%;
                height: 50px;
                outline: none;
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.18);
                border-radius: 46px;
                border: 1px solid #EDEDED;
                padding: 10px 24px;

                &::placeholder{
                    color: #A5A5A5;
                }
            }

            .wpcf7-textarea{
                height: 200px;
                width: 100%;
                border-radius: 14px;
            }
        }

        .wpcf7-submit{
            border-radius: 0;
            border: 0;
            background-color: $primary;
            color: $white;
            border-radius: 5px;
            font-size: 16px;
            font-family: $font-family-secondary;

            padding: 12px 30px;
            min-width: 210px;
            float: right;
            text-transform: uppercase;
            font-weight: 700;            
        }        
    }
}

.home-new-cat{
    padding: 30px 0;
}

.list-new-cat{    

    .slick-list{
        padding: 1px;
    }

    .slick-arrow{
        border: 0;
        box-shadow: none;
        text-indent: -999999999px;
        width: 40px;
        height: 40px;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: none;
        background-size: cover;
        background-position: center;
        z-index: 9;

        &.slick-prev{
            background-image: url(../images/icon-prev.svg);
            left: -20px;

            @include media-breakpoint-down(md){
                left: -10px;
            }
        }

        &.slick-next{
            background-image: url(../images/icon-next.svg);
            right: -20px;

            @include media-breakpoint-down(md){
                right: -10px;
            }            
        }
    }

    .item{
        text-align: center;
        padding: 10px 5px;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
        background-color: #FFF;

        .img{
            margin-bottom: 10px;

            img{
                margin: 0 auto;
            }
        }

        a{
            font-weight: 400;
            font-size: 25px;
            text-decoration: none;
            color: #181818;

            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;            
        }
    }
}
