:root {
        --primarycolor: #51AC5A;
        --secondarycolor: #444;
        --thirdcolor: #ffffff;
        --fourcolor: #93C854;
        --bgcolor: #e7eff5;
        --font-primary: "font-primary";
        --font-secondary: "font-secondary";
        --hover: #68a819;
        --spacing: 16px;
        --line-height: 24px;
    }

    /* ==============================================================================
                                Desltop
    ================================================================================ */
    @media screen and (max-width:1440px) {
        .about-left h1 span {
            font-size: 44px;
        }

        .about-left h1 {
            font-size: 44px;
        }

        .navbar-nav {
            margin-left: 178px;
        }

        .hero-slide img {
            width: 100%;
            height: 440px;
        }

        .mission-card {
            width: 345px;
        }

        .navbar-nav .nav-item .nav-link.btn-enquiry {
            margin-left: 110px;
        }

        .contact-card {
            width: 350px;
        }

        .slide-content {
            top: 15%;
            left: 12%;
        }

        .banner-2 .slide-content {
            position: absolute;
            top: 12%;
            left: 7%;
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 115px 0;
        }
        .top-banner-12 {
            padding: 50px 0
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 50px 0;
        }


    }

    @media screen and (max-width:1200px) {
        .about-left h1 span {
            font-size: 36px;
        }

        .about-left h1 {
            font-size: 36px;
        }

        .about-left p {
            line-height: 26px;
        }

        .test-detail p {
            padding: 20px 162px;
        }

        .navbar-nav .nav-item .nav-link.btn-enquiry {
            margin-left: 10px;
        }

        .navbar-expand-lg .navbar-nav .nav-link {

            padding-left: 18px;
        }

        .navbar-nav {
            margin-left: 140px;
        }

        .custom-nav .custom-prev {
            top: 65%;
            left: 15%;
        }

        .custom-nav .custom-next {
            top: 65%;
            right: 15%;
        }

        .about-inner-left {
            padding: 9px 2px;
            position: relative;
        }

        .about-overlay-1 {
            left: -73px;
        }

        .about-overlay {
            left: 35px;
        }

        .about-inner-right {
            padding-top: 5px;
        }

        .about-one-right .about-left h2 {
            font-size: 32px;
        }

        .about-one-right p {
            line-height: 26px;
        }

        .foot-about a {
            padding: 10px 23px;
        }

        .mission-card {
            width: 300px;
        }

        .contact-card {
            width: 299px;
        }

        .navbar-nav {
            margin-left: 60px;
        }

        .tabs button::after {
            width: 200px;
        }

        .about-list {
            gap: 20px;
        }



        .about-right img {
            width: 90%;
        }

        .top-banner-12 {
            padding: 40px 0
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 40px 0;
        }

        .inner-top-banner h2 {
            font-size: 60px !important;
        }


    }



    @media screen and (max-width:1024px) {
        .about-left h1 span {
            font-size: 38px;
        }

        .about-left h1 {
            font-size: 38px;
        }

        .about-left p span {
            font-size: 16px;
            line-height: 24px;
            color: var(--primarycolor);
        }

        .about-left p {
            font-size: 16px;
        }

        .custom-nav .custom-prev {
            top: 65%;
            left: 10%;
        }

        .custom-nav .custom-next {
            top: 65%;
            right: 10%;
        }

        .slide-content {
            position: absolute;
            top: 14%;
            left: 14%;
        }

        .slide-content h1 {
            font-size: 54px;

        }

        .hero-slide img {
            width: 100%;
            height: 400px;
        }

        .inner-about {
            padding-bottom: 20px;
        }

        .test-card p {
            text-align: justify;
            font-size: 15px;
        }

        .faq-item .faq-header h6 {
            margin: 0;
            font-size: 18px;
        }

        .banner-3 .slide-content {
            position: absolute;
            top: 14%;
            left: 6%;
        }

        .about-inner-left {
            padding-top: 56px;
        }

        .inner-brand {
            padding: 3px 0px !important;
            padding-bottom: 30px !important;
        }

    }

    /* ==============================================================================
                                laptop small
    ================================================================================ */
    @media screen and (max-width:991px) {


        .navbar-nav .nav-link {
            font-size: 24px;

        }

        .navbar-nav .nav-item .nav-link {
            font-size: 24px;
        }

        .navbar-nav {
            margin-left: 10px !important;
            padding-left: 0px;

        }

        .banner {
            color: #68a819;
        }

        .navbar-nav .nav-link {

            padding-left: 0px;
        }

        .btn-enquiry {
            margin-top: 20px;
            margin-left: 0px !important;
            width: 160px;
        }

        .about-right {
            padding-left: 3px;
            padding-top: 40px;
        }

        .about-right img {
            width: 94%;
        }

        .about-left a {
            font-size: 16px;
            padding: 10px 20px
        }

        .service-header h2 {
            font-size: 32px;
        }

        .product-header h2 {
            font-size: 32px;
        }

        .faq-header h2 {
            font-size: 32px;
        }

        .test-detail p {
            padding: 20px 125px;
        }

        .faq-right {
            display: none;
        }

        .about-inner-left {
            display: flex;
            justify-content: center;
        }

        .about-overlay-1 h3 {
            font-size: 32px;
            writing-mode: horizontal-tb;
            transform: rotate(360deg);
            white-space: nowrap;
        }

        .about-overlay-1 {
            background-color: whitesmoke;
            padding: 10px 15px;
            position: absolute;
            animation: none;
            left: 50%;
            bottom: 1%;
            transform: translate(-50%, -50%);
        }

        .about-list li {
            font-size: 17px;
        }

        .about-list {
            gap: 2px;
        }

        .about-overlay {
            width: 250px;
        }

        .about-overlay h3 {
            font-size: 38px;
        }

        .industry-inner-left {
            padding-right: 0px;
            padding-top: 0px;
        }

        .navbar-nav .nav-item .nav-link {
            font-size: 20px;
            line-height: 25px;
        }

        .img-product {
            padding-top: 0px;
        }

        .contact-card {
            width: 370px;
            flex: none;
        }

        .contact-card-inner {
            display: block;
        }

        .inner-contact {
            padding: 40px 0px;
        }

        .tabs button::after {
            width: 170px;
        }

        .faq-overlay img {
            width: 100px;
            height: 100px;
        }

        .industry-left-detail img {
            width: 62%;
            height: 300px;
            border-radius: 7px;
        }

        .offcanvas {
            max-width: 40%;
        }

        .slide-content p {

            width: 400px;
        }

        .about-left h1 {
            font-size: 34px;
        }

        .about-left h1 span {
            font-size: 34px;
        }

        .about-inner-left {
            padding-top: 58px;
        }

        .industry-left h2 {
            text-align: center;
            font-size: 28px;
        }

        .test-card1 h3 {
            text-align: center;
            font-size: 28px;
        }

        .inner-brand {
            padding: 10px 0px;
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 60px 0;
        }

        .inner-top-banner h2 {
            font-size: 60px !important;
            color: black;
        }
        .top-banner-12 {
            padding: 35px 0
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 35px 0;
        }


    }

    /* ==============================================================================
                                Tab view
    ================================================================================ */
    @media screen and (min-width:767px) {
        .tabs-mobile {
            display: none;
        }

        .sticky {
            display: none;
        }
    }

    @media screen and (max-width:767px) {
        .about-right img {
            width: 80%;
        }

        .about-right {
            display: flex;
            justify-content: center;
            padding-top: 0px;


        }

        .inner-about {
            padding: 50px 0px;

        }

        .inner-service {
            padding: 50px 0px;

        }


        .inner-product {
            padding: 50px 0px;

        }

        .inner-testmonial {
            padding: 50px 0px;

        }

        .inner-faq {
            padding: 10px 0px;
        }

        .inner-footer {
            padding: 10px 0px;
        }

        .inner-industry {
            padding: 50px 0px;


        }

        .faq-section {
            padding: 50px 0px;
        }

        .inner-choose {
            padding: 50px 0px;
        }

        .test-detail p {
            padding: 20px 32px;
        }

        .custom-nav .custom-prev {
            top: 65%;
            left: 5%;
        }

        .custom-nav .custom-next {
            top: 65%;
            right: 5%;
        }

        .hero-slide img {
            width: 100%;
            height: 400px;
        }

        .hero-custom-nav .custom-prev {
            top: 65%;
            left: 5%;
        }

        .hero-custom-nav .custom-next {
            top: 65%;
            right: 5%;
        }

        .slide-content {
            position: absolute;
            top: 10%;
            left: 10%;
        }

        .product-inner .item {
            width: 100%;
            height: 100%;
        }

        .slide-content p {
            font-size: 16px;

        }

        .slide-content h1 {
            font-size: 44px;

        }

        .hero-slide img {
            width: 100%;
            height: 300px;
        }

        .about-right {
            display: none;
        }

        .inner-top-banner h2 {
            font-size: 56px !important;
        }

        .about-inner-left {
            display: none;
        }

        .mission-card {
            width: 250px;
        }

        .about-left {
            text-align: center;
        }

        .about-left h3 {
            justify-content: center;
            text-align: center;
        }

        .contact-card {
            width: 300px;
            flex: none;
        }

        .contact-card {
            padding: 25px 10px;
        }

        .contact-card {
            width: 250px;
            flex: none;
        }

        .tabs {
            width: 100%;
        }

        .tabs button {
            display: none;
            /* Hide the buttons */
        }

        .tabs select {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }

        .tabs select option {
            padding: 10px;
            text-align: center;
        }

        .tabs-mobile {
            display: block !important;
        }

        /* .tab-sticky {
            position: fixed;
            top: 30%;
            z-index: 1000;
            padding: 10px;
            background-color: white;
        
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
            padding: 10px;
        } */
        .testmonial-header h2 {
            font-size: 32px;
        }

        .faq-header h2 {
            font-size: 32px;

        }

        .accordion-button p {
            font-size: 16px;
            padding: 10px 0px;
        }

        .product-wrapper::after {
            Width: 100%
        }

        .tab-sticky {
            width: 100%;
        }

        .faq-overlay {
            position: absolute;
            top: -35%;
            left: 0%;

        }

        .industry-left-detail img {
            width: 62%;
            height: 300px;
            border-radius: 7px;
        }

        .banner-3 .slide-content {
            position: absolute;
            top: 10%;
            left: 4%;
        }

        .hero-slide img {
            opacity: 0.4;
        }

        .about-list {
            gap: 30px;
        }

        .client-logo img {
            height: 100px;
            width: 100px;
        }

        .clients .marquee {
            display: flex;
            animation: scrol 10s linear infinite;
            white-space: nowrap;
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 30px 0;
        }

        .top-banner-12 {

            background-image: url('../image/banner/gasket-banner-responsive.png');
        }

        .inner-top-chemical {

            display: flex;
            align-items: start;
        }

        .top-banner-11 {

            background-image: url('../image/banner//ban-2.png');
        }
    }

    /* ==============================================================================
                                Mobile large
    ================================================================================ */
    @media screen and (max-width:575px) {
        .about-left p {
            font-size: 16px;
        }

        .about-left a {
            font-size: 16px;
            padding: 10px 20px;
        }

        .service-header h2 {
            font-size: 28px;
        }

        .about-left h1 {
            font-size: 34px;
        }

        .about-left h1 span {
            font-size: 34px;
        }

        .product-header h2 {
            font-size: 34px;
        }

        .faq-header h2 {
            font-size: 34px;
        }

        .service-card h4 {
            font-size: 28px;
        }

        .service-header {
            margin-top: 10px;
        }

        .sec-2 h3 {
            font-size: 24px;
        }

        .slide-content h1 {
            width: 528px;
            font-size: 32px;

        }

        .slide-content a {
            font-size: 16px;
        }

        .hero-slide img {
            width: 100%;
            height: 240px;
        }

        .slide-content {
            position: absolute;
            top: 15%;
            left: 5%;
        }

        .slide-content p {
            width: 425px;
            margin-top: 10px !important;
            margin-bottom: 16px !important;
        }

        .slide-content {
            position: absolute;
            top: 5%;
            left: 5%;
        }

        .hero-banner .owl-dot {
            width: 8px;
            height: 8px;
        }

        .hero-banner .owl-dot {
            background-color: black !important;
            width: 5px;
            height: 5px;
        }

        .hero-banner .owl-dots {
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);


        }

        .inner-top-banner {
            padding-left: 20px;
        }

        .inner-top-banner h2 {
            font-size: 38px !important;
        }

        .about-one-right .about-left h2 {
            font-size: 28px;
        }

        .about-list {
            gap: 0px;
        }

        .mission-inner {
            display: flex;
            justify-content: center;
        }

        .mission-card {
            width: 375px;
        }

        .industry-left-detail p {
            font-size: 16px;
        }

        .test-card p {
            font-size: 16px;
        }

        .test-card1 p {
            font-size: 16px;
        }

        .left-detail {
            padding: 5px;
        }

        .test-detail p {
            padding: 20px 95px;
        }

        .inner-about {
            padding: 50px 20px;
        }

        .sec-1,
        .sec-2,
        .sec-3 {
            padding: 10px 35px;
        }

        .sec-1 p {
            font-size: 16px;
        }

        .copy h3 {
            padding-bottom: 5px !important;
        }

        .about-left {
            padding-bottom: 0px;
        }

        .product-wrapper::after {
            Width: 70%
        }

        .tabs-mobile .dropdown-toggle {
            width: 97%;
            padding: 8px;
            font-size: 16px;
        }

        .tabs-mobile .dropdown-menu .dropdown-item {
            font-size: 14px;
        }

        .tab-sticky {
            width: 100%;
        }

        .faq-overlay {
            display: none;
        }

        #backToTop {
            position: fixed;
            bottom: 38px;
            right: 30px;
        }

        .industry-left-detail img {
            width: 85%;
        }

        .offcanvas {
            max-width: 50% !important;
        }

        .hero-slide img {
            opacity: 0.4;
        }

        .about-list li {
            font-size: 16px;
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 50px 0;
        }

        .top-banner-11 {
            color: var(--secondarycolor);
            padding: 25px 0;
        }


    }

    /*  */

    /* ==============================================================================
                                mobile
    ================================================================================ */
    @media screen and (max-width:425px) {
        .slide-content h1 {
            font-size: 30px;

        }

        .about-left h1 {
            font-size: 28px;
        }

        .about-left h1 span {
            font-size: 28px;
        }

        .slide-content h1 {
            font-size: 34px;
            width: 320px;
        }

        .slide-content p {
            width: 350px;
            margin-top: 0px !important;
            margin-bottom: 15px !important;
        }

        .test-detail p {
            padding: 20px 50px;
        }

        .inner-about {
            padding: 50px 15px;
        }

        .sec-1,
        .sec-2,
        .sec-3 {
            padding: 10px 25px;
        }

        .accordion-button p {
            font-size: 16px;
            padding: 0px 0px;
        }

        .offcanvas {
            max-width: 65% !important;
        }

        .client-logo {
            width: 160px;
            height: 115px;
            margin: 6px;
        }

        .popup-content {
            position: relative;
            max-width: 90%;
        }

    }

    /* ==============================================================================
                                mobile small
    ================================================================================ */
    @media screen and (max-width:375px) {
        .slide-content p {
            font-size: 16px;
            /* color: var(--thirdcolor); */
            width: 320px;
        }

        .mission-card {
            width: 300px;
        }

        .tabs-mobile .dropdown-toggle {
            font-size: 14px;
            padding: 10px;
        }

        .tabs-mobile .dropdown-menu .dropdown-item {
            font-size: 14px;
            padding: 4px 6px;
        }

        .tabs-mobile .dropdown-menu li {
            font-size: 12px;
            display: flex;
            flex-wrap: wrap;
        }

        .tab-sticky {
            width: 100%;
        }

        .about-left h1 {
            font-size: 25px;
        }

        .about-left h1 span {
            font-size: 25px;
        }
    }

    /* ==============================================================================
                                Mobile extra small
    ================================================================================ */
    @media screen and (max-width:320px) {
        .slide-content p {
            font-size: 16px;
            width: 300px;
        }

        .about-list ul {
            margin-left: 0px !important;
        }

        .about-list li {
            font-size: 16px;
        }

        .offcanvas {
            max-width: 75% !important;
        }
    }


    /* .about-section .container{
        max-width: 800px;

    } */


    @media screen and (min-width:992px) and (max-width:1100px) {

        .about-inner-left {
            padding: 9px 35px;
            padding-top: 56px !important;
        }

        .about-overlay-1 {
            left: -30px;
        }

        .about-overlay {
            left: 65px;
        }
    }

    @media screen and (min-width:767px) and (max-width:991px) {

        .container,
        .container-md,
        .container-sm {
            max-width: 880px !important;
        }

    }