/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 5 version
*/

/*
CSS RESPONSIVE ON DEVICE
 */

/*=============== START DESKTOP ====================*/

@media only screen 
and (min-width : 1024px) {
    .header-wrapper>.container {
        max-width: 1360px;
    }
}

@media only screen 
and (min-width : 1400px) {
 .container {
  max-width: 1200px;
}

}

@media only screen 
and (min-width : 1600px) {
 .container {
  max-width: 1300px;
}

}

@media only screen 
and (min-device-width : 1200px) 
and (max-device-width : 1399px) {

    .header-main-menu>ul.menu-list>li>a {
        padding: 25px 20px;
    }
}

@media only screen 
and (min-device-width : 994px) 
and (max-device-width : 1199px) {

    .header-main-menu>ul.menu-list>li>a {
        padding: 25px 10px;
        font-size: 13px;
    }

    .services-box {
        gap: 15px;
    }

    .services-item>a {
        padding: 2rem;
    }

    .services-item-content {
        text-align: left;
    }

}



/*=============== END DESKTOP ====================*/

/*=============== START IPAD ====================*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1023px) {
    
    .newsletter-box {
        padding: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .newsletter-box-text {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-contact-logo {
        margin-bottom: 3rem;
        text-align: center;
    }

    .copyright {
        padding-top: 10px;
    }

    .services-item>a {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }

    .services-item-content>h4 {
        font-size: 18px;
    }

    .services-item-content>p {
        font-size: 14px;
        line-height: 1.4;
    }

    .about-us-img {
        padding: 0;
        margin-bottom: 3rem;
    }

    .about-us-img>img {
        left: auto;
    }

    .slide-home-item-content {
        width: 90%;
        top: 15%;
    }

    .slide-home-item-content h3 {
        font-size: 3.8rem;
        margin-bottom: 3rem;
    }

    .counter-item {
        margin-bottom: 3rem;
    }

    section.counter-area {
        padding-bottom: 4rem;
    }

    .page-contact-info-img {
        height: 220px;
    }

    .page-contact-info-img:before {
        left: -20px;
    }

    .hotline-box {
        gap: 15px;
        position: relative;
        width: 470px;
        top: 15px;
    }

    .haft-form p {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .haft-form p span:first-child {
        margin-bottom: 10px;
    }

    .contact-main-maps-map iframe {
        height: 478px;
    }

    .about-coreValue-box {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .tax-table-list-thumb>a>img {
        max-width: 80px;
    }

    .tax-table-list-content-item.tax-btn-detail a {
        padding: 5px 5px;
        width: 70px;
        line-height: 1.2;
        font-size: 13px;
    }

    .tax-table-list-title>span {
        line-height: 1.2;
    }

    .single-product-summary-wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 15px;
        max-width: 650px;
        margin: 0 auto;
    }

    .single-product-summary-info {
        margin: 0;
    }


}       
/*=============== END IPAD ====================*/



/*=============== START MOBILE ====================*/

@media only screen 
and (max-width : 767px) {
    
    h2.header-page-title {
        font-size: 22px;
        margin-bottom: 0;
        letter-spacing: 1px;
    }

    section.bg-breadcrumb {
        padding: 30px 0;
    }

    .services-box {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    section.services {
        margin-top: 30px;
    }

    .services-item-content>h4 {
        font-size: 18px;
    }

    div#owl-slide-desktop .owl-item img {
        height: 300px !important;
    }

    section.slide-homepage:before, section.slide-homepage:after {
        display: none;
    }

    .slide-home-item-content {
        top: 20%;
        width: 100%;
    }

    .slide-home-item-content h3 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
        padding: 0 30px;
        line-height: 1.3;
    }

    .slide-home-item-content span {
        font-size: 14px;
    }

    .slide-home-item .btn-more {
        margin-top: 2rem;
    }

    .btn-detail>a, .btn-more>a, .blog-btn>a {
        padding: 10px 20px;
        font-size: 13px;
    }

    .about-us-img {
        padding: 0;
    }

    .about-us-img>img {
        left: 0;
    }

    .about-us-exp {
        bottom: 0;
        right: 0;
        width: 145px;
        height: 70px;
    }

    .about-us-exp span {
        font-size: 3rem;
    }

    .about-us-exp p {
        font-size: 14px;
    }

    .about-us-content {
        margin-top: 3rem;
    }

    .about-us-content .title-home span:before {
        display: none;
    }

    .about-us-content ul li {
        margin: 0;
        width: 48%;
    }

    .about-us-content ul li a {
        font-size: 16px;
    }

    .about-us-content ul li span {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .about-us-content p {
        font-size: 14px;
    }

    .title-home span {
        font-size: 16px;
    }

    .title-home h2 {
        font-size: 2.6rem;
    }

    .title-home.title-left.product-header-title {
    }

    section.product-cate>.container {
        padding: 0 40px;
    }

    .product-cate-item {
        margin-top: -15px;
    }

    section.product-cate .btn-more {
        margin-bottom: 5rem;
    }

    .title-home.title-center>span:before, .title-home.title-center>span:after {
        width: 40px;
        top: 8px;
    }

    .title-home.title-center>span:before {
        left: -50px;
    }

    .title-home.title-center>span:after {
        right: -50px;
    }

    .whychoose-item {
        margin-bottom: 3rem;
    }

    .counter-item {
        margin-bottom: 3rem;
    }

    .counter-item h3 {
        font-size: 3.6rem;
    }

    .counter-item p {
        font-size: 15px;
    }

    .newsletter-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0;
        text-align: center;
    }

    .newsletter-form p input {
        width: 320px;
    }

    .newsletter-box-text {
        margin-bottom: 15px;
    }

    .newsletter-box-text h2 {
        font-size: 20px;
    }

    .newsletter-form p button {
        font-size: 13px;
        padding: 0 8px;
    }

    .footer-contact-logo {
        margin-bottom: 3rem;
    }

    .footer-menu-block {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-contact-logo h3 {
        font-size: 18px;
    }

    section.bg-breadcrumb.bg-page {
        padding: 40px 0;
    }

    .page-contact-info-text>h2 {
        font-size: 2rem;
    }

    .hotline-box {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .page-contact-info-img {
        height: 250px;
    }

    .page-contact-info-img:before {
        left: -10px;
        -webkit-clip-path: polygon(17% 0%, 100% 0%, 85% 100%, 0% 100%);
        clip-path: polygon(17% 0%, 100% 0%, 85% 100%, 0% 100%);
    }

    .page-contact-form-header h3 {
        font-size: 2rem;
    }

    .page-contact-form-header {
        padding-top: 5rem;
    }

    .contact-main-maps {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .contact-main-maps-form {
        padding: 3rem;
    }

    .haft-form p {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .haft-form p span:first-child {
        margin-bottom: 10px;
    }

    .page-contact-social>h3 {
        font-size: 2rem;
    }

    .about-coreValue-box {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    h2.title-about-us, h2.title-vision {
        font-size: 2.2rem;
    }

    .coreValue-item>h5 {
        font-size: 18px;
    }

    .taxonomy-product-list-lable {
        display: none;
    }

    .tax-table-list-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .tax-table-list-content-item span.small-show {
        display: block;
        font-family: var(--second-font);
        color: #000;
        font-size: 15px;
        line-height: 1.3;
    }

    .tax-table-list-content-item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-bottom: 20px;
        border-bottom: 1px solid #b3b3b333;
        padding-bottom: 15px;
    }

    .tax-table-list-content, .tax-table-list-content.tax-table-benifit-cat {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        width: 100%;
    }

    .tax-table-list-thumb {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        text-align: center;
        width: 100%;
        margin-bottom: 30px;
    }

    .tax-table-list-thumb>a>img {
        max-width: 150px;
    }

    .tax-table-list-thumb>a span {
        font-size: 18px;
    }

    .tax-table-list-content-item.tax-btn-detail a {
        display: block;
        width: 100%;
    }

    .single-product-summary-wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .single-product-summary-info {
        margin: 0;
    }

    .main-image-container {
        height: 300px;
    }

    .single-product-thumbnail-slider .thumbnail {
        height: 75px;
        min-width: calc((100% - 10px) / 3);
    }

    .single-product-thumbnail-slider .thumbnail-track {
        gap: 8px;
    }

    ul#singleProduct-tab {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 10px;
    }

    ul#singleProduct-tab li button {
        width: 100%;
    }

    .single-product-summary-info>h1 {
        font-size: 2.2rem;
    }

    .single-product-summary-info>span {
        font-size: 13px;
    }

    .copyright {
        padding-top: 10px;
    }

    .copyright p {
        font-size: 13px;
    }

    .single-product-summary-addon ul li img {
        width: 30px;
        margin-right: 10px;
    }

    .single-product-summary-addon ul li {
        font-size: 13px;
    }

    .single-product-summary-box {
        flex-direction: column;
    }

    .single-product-summary-guarantee {
        border: none;
        padding: 0;
        margin-top: 20px;
    }

}

/*=============== END MOBILE ====================*/



/*=============== START MOBILE < 320px ====================*/

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 320px) {
    


}

/*=============== END MOBILE < 320px====================*/