@media screen and (min-width: 2050px) 
{
    :root 
    { 
    --gap-sm: 10px;
    --gap-md: 18px;
    --gap-lg: 26px;
    --gap-xl: 34px;
    --gap-xxl: 42px;
    --gap-xxxl: 50px;
    }

    body p { font-size: 22px; margin-bottom: 28px; }
    .hero--1 { font-size: 128px; }
    .hero--2 { font-size: 50px; }
    .hero--3 { font-size: 70px; }

    .h1 { font-size: 48px; }
    .h2 { font-size: 34px; }
    .h3 { font-size: 26px; }
    .h4 { font-size: 28px; }
    .h5 { font-size: 24px; }
    .h6 { font-size: 22px; }
    .h7 { font-size: 22px; }
    .h8 { font-size: 20px; }
    .h9 { font-size: 16px; }

    .form-control::-webkit-input-placeholder { font-20ze: 18px; }
    .form-control::-moz-placeholder { font-size: 20px; }
    .form-control:-ms-input-placeholder { font-size: 20px; }
    .form-control::-ms-input-placeholder { font-size: 20px; }
    .form-control::placeholder { font-size: 20px; }

    .subtitle { font-size: 22px; }
    .btn span, .read--more { font-size: 20px; }
    .container { max-width: 1700px; }
    .header .logo { margin-left: 340px; }

    .header .logo { width: 130px; }
    .header .navbar--nav li a { font-size: 15px; margin-right: 48px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p, .banner--thumbnail--section .banner--thumb .swiper-slide span { font-size: 22px; }
    .home--banner { height: 80vh; }
    .banner--slider .banner--content { top: 270px; }

    .scroll--text span { font-size: 14px; }
    .product-category--list li { padding: 32px 40px; }
    .nav-tabs li .nav-link { font-size: 22px; }
    .address--list li a { font-size: 22px; }
    .product-category--list li .overlay--div .overlay--text p { font-size: 20px; }
    .history--section .history--text { padding-right: 340px; padding-left: 120px; }
    .flag--img--container .flag--shape { height: 100%; }
    .flag--img--container .flag--bg { height: 100%; }

    .flag--img--container { height: 480px; }

    footer .footer--left .footer--title { font-size: 68px; }
    footer .footer--left .input-group { height: 60px; width: 90%; }
    footer .footer--left .input-group .input-group-text { padding: 10px 30px; font-size: 17px; }
    footer .footer--left .input-group .form-control::placeholder { font-size: 18px; }
    .footer--link li a, .footer--div p , footer .footer--left p { font-size: 18px; }
    .footer--bottom a, .footer--bottom p { font-size: 16px; }
    .footer--bottom--right .copy--text, .footer--bottom--right .copy--text a { font-size: 14px; }
    .social--link li a { width: 45px; height: 45px; }
    .social--link li a .svg { height: 22px; width: auto; }
    .footer--div .footer--title { font-size: 17px; }
    .contact--link li .svg { width: 22px; margin-right: 11px; }

    .in-banner { height: 530px; }
    .bredcrump li, .bredcrump li a { font-size: 14px; }
    .information--list li p, .information--list li a { font-size: 24px; }
    .information--list li .social--link li a .svg { width: 25px; }
    .contact--section .information--list .icon { width: 40px; height: 40px; }
    .contact--section .contact--info { padding: 130px 340px 130px 110px; }
    .contact--section .form--box { padding: 130px 110px 130px 340px }
    .information--list li .location--link { font-size: 18px; }
    .form-control { font-size: 22px; }
    .information--list li .social--link li a { width: 55px; }

    .faqs-filter-list li a { font-size: 20px; }
    .product--detail table th { font-size: 24px; }
    .product--detail table tr td { font-size: 24px; }

    .category--list li .category--list-in .hero--2 { font-size: 38px; }
    .category--list li .category--list-in .category-text-box .read--more span { font-size: 20px; }
    .category--list li .category--list-in .category-text-box p { font-size: 20px; }

    .in-banner.group--banner { padding: 100px 340px 40px 340px; }
    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { font-size: 58px; }
    .group-company-list li .img--box { margin-right: 20px; }
    .group-company-list li .mission--text .h6 { font-size: 24px; }
    .in-banner.group--banner .banner-content .bredcrump { margin-top: 70px; }
    .in-banner.group--banner .banner-content .bredcrump { padding: 60px 60px; }
    .product--section .group--product .group---product--bx .product--text .h4 { font-size: 30px; }

}

@media screen and (max-width: 1780px) 
{
    .py--lg { padding: calc(var(--gap-xxxl) * 2) 0; }
    .pb--lg { padding-bottom: calc(var(--gap-xxxl) * 2); }
    .pt--lg { padding-top: calc(var(--gap-xxxl) * 2); }
    body p { font-size: 18px; }

    .h1 { font-size: 36px; }
    .h2 { font-size: 30px; }
    .h3 { font-size: 24px; }
    .h4 { font-size: 22px; }
    .h5 { font-size: 20px; }
    .h6 { font-size: 18px; }
    .h7 { font-size: 18px; }
    .h8 { font-size: 16px; }
    .h9 { font-size: 12px; }

    .hero--1 { font-size: 75px; }
    .hero--2 { font-size: 38px; }
    .btn span { font-size: 18px; }
    .hero--3 { font-size: 56px; }

    /* .flag--img--container { width: 97%; height: 77%; } */
    .flag--img--container { height: 309px; }
    .subtitle { font-size: 18px; }
    .address--list li a { font-size: 16px; }
    .address--list li { flex: 0 0 46.5%; }

    .partner--list li .partner--bx .partner--name { min-height: 110px; }

    footer .footer--left .footer--title { font-size: 55px; }
    .footer--bottom { margin-top: calc(var(--gap-xxl)* 1.5); }
    footer { padding-top: calc(var(--gap-xxl)* 2); }
    footer .footer--left .input-group .form-control { padding: 10px 25px; }
    .home--banner { border-bottom-right-radius: 100px; }

    .group-list .group--list-lists li a { text-align: center; }
    .group-list .group--list-lists li a .image-box { height: 100px; }
    .product-category--list li { padding: 25px 30px; }

    .segment--card .segment--img { width:310px; }

    .distrubuter--company--cont { padding: 50px 60px; }
}


@media screen and (max-width: 1540px)
{
    :root
    {
    --gap-sm: 8px;
    --gap-md: 14px;
    --gap-lg: 20px;
    --gap-xl: 30px;
    --gap-xxl: 35px;
    --gap-xxxl: 40px;
    }

    body p { font-size: 16px; }
    .h1 { font-size: 24px; }
    .h2 { font-size: 30px; }
    .h3 { font-size: 22px; }
    .h4 { font-size: 22px; }
    .h5 { font-size: 20px; }
    .h6 { font-size: 18px; }
    .h7 { font-size: 18px; }
    .h8 { font-size: 16px; }
    .h9 { font-size: 12px; }

    .container { max-width: 95%; }
    .hero--1 { font-size: 74px; }
    .hero--3 { font-size: 48px; }
    .hero--2 { font-size: 34px; }

    .btn { padding: calc(var(--gap-sm) / 2* 3) var(--gap-lg); }
    .btn span { font-size: 16px; }

    .in-banner .banner-content .hero--1 { font-size: 70px; }

    .subtitle { font-size: 16px; }

    .header .logo { margin-left: 50px; }
    .header .navbar--nav li a { font-size: 12px; }
    .header .navbar--nav li a span { font-size: 12px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p, .banner--thumbnail--section .banner--thumb .swiper-slide span { font-size: 16px; }
    .banner--thumbnail--section { bottom: 40px; }
    .scroll--text { right: 30px; }
    .btn-wrap .btn { width: 55px; height: 55px; }
    .history--section .history--text { padding-right: 40px; }

    .why--section .why--text .rating--div li { padding-right: 70px; margin-right: 70px; }
    .in-banner { border-bottom-right-radius: 70px; }

    .segment--card .segment--body p:last-child { margin-bottom: 0px; }
    .business--segment .hero--2 { margin-bottom: calc(var(--gap-xl)* 1.5); }

    footer .footer--left .footer--title { font-size: 50px; }
    footer .footer--left .input-group .input-group-text { font-size: 14px; }
    .footer--link li a, .footer--div p { font-size: 14px; }
    footer .footer--left .input-group { width: 95%; }
    .footer--icon { height: 330px; }
    .footer--div .footer--title { font-size: 16px; }
    .product-category--list li .overlay--div .overlay--text p { font-size: 16px; }
    .flag--img--container { height: 270px; }

    .in-banner { height: 330px; }
    .contact--section .form--box { padding: 60px 60px 60px 50px; }
    .contact--section .contact--info { padding: 60px 50px 50px 80px; }
    .contact--section .form--box .h1, .contact--section .contact--info .h1 { margin-bottom: calc(var(--gap-xl)* 1); }

    .group-mission--list li .img--box { height: 80px; width: 80px; margin-bottom: var(--gap-md); }
    .client-logo { width: 110px; }

    .product--detail table th { font-size: 20px; }
    .product--detail table tr td { font-size: 18px; }

    .category--list li .category--list-in .category--icon--grp .category-icon { height: 70px; }
    .category--list li .category--list-in .hero--2 { font-size: 28px; }

    .category--list li .category--list-in .icon svg { width: 11px; height: 11px; }
    .category--list li .category--list-in .category-text-box .read--more span { font-size: 16px; }
    .category--list li .category--list-in .category--img { width: 250px; }
    .category--list li .category--list-in .category-image { margin-top: 35px; margin-bottom: -35px; }

    .in-banner.group--banner { padding: 100px 50px 40px 50px; }
    .in-banner .banner-content { margin-top: 40px; }
    .in-banner.group--banner .banner-content .group-banner--text { padding-left: 15px; }
    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { font-size: 42px; }

    /* .group-company-list li .img--box { width: 55px; } */
    .product--section .group--product li { padding: 10px 10px; }
    .product--section .group--product { gap: 30px; }

    .group--partner--section .parner--logo { width: 65%; }

    .group-list .group--list-lists li a .image-box { height: 90px; }
    .read--more span, .read--more  { font-size: 16px; }
    .brand--product--list { margin-top: 35px; grid-gap: 25px; }
    .brand--page .brand--product--list { margin-top: 20px; }
    .product-category--list li { padding: 25px 25px; }
    .brand--section .tab-content .tab-pane, .distrubuter--company--cont, .brand--section .tab-content .tab-pane, .group--contact--cont { padding: 50px 50px; }
    .distrubuter--company--cont { padding: 50px 70px; }
    .map--container { padding-left: 70px; }

    .group--contact--section .information--list li .icon { padding: 14px; }
    .segment--list { grid-gap: 25px; }

    .brand--detail--section .img--bx { height: 350px; }
    .product--section .group--product .group---product--bx .product--img { width: auto; height: 130px; margin: 0px auto 5px auto; }
    .category--list li .category--list-in .category-image { width: 160px; }

    .partner--list { gap: 40px 30px; }
    .partner--list li .partner--bx .partner--logo { height: 260px; }
    .partner--list li .partner--bx .partner--name { padding: 18px 10px; min-height: 80px; }
}

@media screen and (max-width: 1400px) 
{
   .flag--img--container { height: 240px; }

}

@media screen and (max-width: 1366px) 
{
    .h1 { font-size: 33px; }
    .h3 { font-size: 20px; }
    .h2 { font-size: 26px; }

    .py--lg { padding: calc(var(--gap-xxxl) * 1.5) 0; }
    .pb--lg { padding-bottom: calc(var(--gap-xxxl) * 1.5); }
    .pt--lg { padding-top: calc(var(--gap-xxxl) * 1.5); }

    .py--md { padding: calc(var(--gap-xxxl) * 1.5) 0; }
    .pb--md { padding-bottom: calc(var(--gap-xxxl) * 1.5); }
    .pt--md { padding-top: calc(var(--gap-xxxl) * 1.5); }

    .hero--1 { font-size: 82px; }
    .subtitle { margin-bottom: var(--gap-lg); }
    .banner--slider .banner--content { top: 370px; }

    .in-banner .banner-content .hero--1 { font-size: 70px; }
    .in-banner { height: 330px; }
    .home--banner { height: 930px; }

    .why--section .why--text .rating--div li { padding-right: 50px; margin-right: 50px; }
    .address--list li a { font-size: 14px; }

    footer .footer--left .input-group { width: 100%; }
    footer .footer--left { padding-right: 40px; }
    footer .footer--left .footer--title { font-size: 46px; }
    .footer--bottom { margin-top: calc(var(--gap-xl)* 2); }

    .nav-tabs li .nav-link { font-size: 18px; }
    .product-category--list li .img--box { width: auto; height: 60px; }
    .product-category--list li .img--box img { width: auto; height: 100%; object-fit: contain; }

    .in-banner .banner-content { margin-top: 40px; }
    .group-company-list li .mission--text p { max-width: 500px; }
    /* .information--list li .social--link li a .svg { width: 21px; } */
    .contact--section .information--list .icon { width: 35px; height: 35px; margin-right: 15px; }
    .information--list li p, .information--list li a { font-size: 18px; }
    .form-control { font-size: 18px; }

    .brand--section .hero--2 { margin-bottom: calc(var(--gap-xl)* 1.5); }
    .brand--grp .hero--2 { margin-bottom: var(--gap-lg); }
    .category--list li .category--list-in .icon { width: 40px; height: 40px; }
    .brand--other--product .product-category--list li a img { height: 160px; }
    .brand--section .tab-content .tab-pane, .distrubuter--company--cont, .brand--section .tab-content .tab-pane, .group--contact--cont{ padding: 50px 50px; }
    .scroll--text span { font-size: 10px; }
    .group-mission--list li .img--box { height: 60px; width: 60px; }
    .category--list li .category--list-in .category-image img { width: 480px; }
    .row.category--list { --bs-gutter-x: 25px; --bs-gutter-y: 30px; }
    .segment--card .segment--img { width: 250px; }
    .segment--card { padding: 20px; }
    .why--section .why--text { padding-left: 30px; }

    .contact--section .contact--info { padding: 60px 60px 50px 50px; }
}

@media screen and (max-width: 1280px) 
{
    :root
    {
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 26px;
    --gap-xxl: 32px;
    --gap-xxxl: 36px;
    }
    .h3 { font-size: 20px; }
    .hero--1 { font-size: 70px; }
    .hero--2 { font-size: 30px; }
    .hero--3 { font-size: 40px; }
    .h1 { font-size: 30px; }

    .btn .svg { width: 19px; height: 19px; margin-left: 2px; }
    .btn span + .svg { margin-left: 4px; }
    .btn span { font-size: 14px; }
    .btn { padding: calc(var(--gap-sm) / 2* 2) var(--gap-lg); }

    .subtitle { font-size: 16px; }
    .py--lg { padding: calc(var(--gap-xxxl) * 1.5) 0; }
    .pb--lg { padding-bottom: calc(var(--gap-xxxl) * 1.5); }
    .pt--lg { padding-top: calc(var(--gap-xxxl) * 1.5); }

    .header .navbar--nav .dropdown--menu li a { font-size: 12px; }
    .header .logo { margin-left: 30px; }

    .banner--slider { height: 100%; }
    .banner--slider .banner--content { bottom: 180px; top: unset; }
    .home--banner { height: 800px; }

    .scroll--text span { font-size: 10px; }
    .btn-wrap .btn { width: 45px; height: 45px; }

    .why--section--cont { border-radius: 15px; }

    footer .footer--left .footer--title { font-size: 46px; }
    footer .footer--left { padding-right: 10px; }
    footer .footer--left .input-group { width: 95%; }
    footer .footer--left .footer--title { font-size: 40px; }

    .in-banner { height: 340px; }
    .in-banner .hero--1 { font-size: 72px; }

    .contact--section .contact--info { padding: 60px 50px 50px 50px; }
    .group-mission--list li .img--box { width: 70px; height: 70px; }
    .group-mission--list li { padding: 0px 25px; }
    .advantage--section .why--text { padding: 0px; }

    .group-list .group--list-lists li a .image-box { width: auto; }
    .group-list .group--list-lists li a .image-box { height: 75px; }

    .product--detail table tr td ,      .product--detail table th{ padding: 10px 15px; }
    .in-banner .banner-content .hero--1 { font-size: 60px; }

    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { font-size: 35px; margin-bottom: 20px; }
    .group--contact--section .information--list li .icon { width: 35px; height: 35px; }
    .group--contact--section .information--list li .icon { padding: 8px; }

    .group-company-list li { display: flex; padding: 10px 25px 10px 0px; margin-right: 25px; }
    .product--section .group--product { gap: 30px; }
    .footer--bottom { margin-top: calc(var(--gap-xl) * 1.2); }
    footer { border-top-right-radius: 70px; }
    .home--banner { border-bottom-right-radius: 70px; }

    .product-category--list li { padding: 20px 20px; }
    .product-category--list { border-radius: 6px; }
    .map--container { padding-left: 50px; }

    .segment--card .segment--img { aspect-ratio: 1.5; }
    .header .navbar--nav li a.btn { padding: 20px 20px; }
    .header .navbar--nav li a { padding: 20px 0px; }
    .header .navbar--nav li a { margin-right: 30px; }
    .segment--card { border-radius: 6px; }


    .distrubuter--company--cont .group-list .group--list-lists { display: grid; grid: auto / repeat(5, 1fr); gap: 20px; }
    .brand--section .tab-content .tab-pane, .distrubuter--company--cont, .brand--section .tab-content .tab-pane, .group--contact--cont { padding: 30px 30px; border-radius: 15px; }
    .group--history-section .flag--img--container .flag--shape { width: 102%; height: 102%; }

    .partner--list { margin-top: 30px; }
    .partner--list li .partner--bx .partner--logo { height: 220px; }
    .group--partner--section .parner--logo { width: 100%; flex-wrap: wrap; }
    .group--partner--section .parner--logo .partner-logos, .group--partner--section .parner--logo { flex-wrap: wrap; }


    .group-mission--list { padding: 40px 0px; }

    .py--lg.group--partner--section { padding-bottom: 20px; }
    .group--contact--section { padding-top: 30px; }

    .category--list li .category--list-in .category--img { width: 200px; height: 200px; }
    .category--list li .category--list-in .hero--2 { margin-bottom: 15px; }
    .category--list li .category--list-in { padding: 20px 20px; }
    .category--list li .category--list-in .category--img { width: 150px; height: 150px; margin-right: 20px; }
    .category--list li .category--list-in .category-text-box p { font-size: 15px; margin-bottom: 10px; }

    .contact--section .information--list .icon { height: 28px; width: 28px; }
    /* .information--list li .social--link li a .svg { width: 17px; } */
    .information--list li .social--link li a { width: 38px; height: 38px; }

    .information--list li p, .information--list li a { font-size: 17px; }

    .group-list .group--list-lists { margin-top: 10px; }
    .group-company-list li .img--box { width: auto; height: 50px; }

    .map--container { border-radius: 15px; }
}


@media screen and (max-width: 1200px) 
{
    .h1 { font-size: 28px; }
    .contact--section .information--list .icon { width: 32px; height: 30px; }
    /* .information--list li .social--link li a .svg { width: 18px; } */
    .information--list li .social--link li a { width: 40px; height: 40px; }
    .form-control { font-size: 16px; }
    .information--list li p, .information--list li a { font-size: 16px; }
    .home--banner { height: 700px; }
    .header .logo { width: 80px; }

    .map--container { padding-left: 30px; }
    .partner--list li { flex: 0 0 calc(33.33% - 50px); }

    .contact--section .form--box { padding: 40px; }
    .contact--section .contact--info { padding: 40px; }

    .product--section .group--product { gap: 20px; }
    .in-banner.group--banner { padding: 100px 10px 40px 30px; }

    .flag--img--container { height: 191px; }

    .why--section--cont { padding: 35px; }
    .why--section .why--text { padding-left: 10px; }

}


@media screen and (max-width: 1024px) 
{  
    body p { font-size: 15px; }
    .subtitle span { width: 40px; }
    .h4 { font-size: 20px; }
    .container  {max-width: 96%; }
    .error-page h3 {font-size: 190px; }
    .header .navbar--nav li a { margin-right: 25px; }

    .hero--1 { font-size: 60px; }
    .hero--2 { font-size: 26px; }
    .hero--3 { font-size: 34px; }

    .read--more .svg { width: 17px; height: 17px; }
    .read--more { font-size: 15px; }

    .home--banner { border-bottom-right-radius: 70px; }
    .banner--thumbnail--section { bottom: 20px; }
    .flag--img--container { width: 100%; height: 200px; }
    .flag--img--container .flag--shape { height: 101%; }
    .why--section--cont { padding: 30px; }
    .why--section .why--text { padding-left: 20px; }
    .why--section .why--text .rating--div li { padding-right: 30px; margin-right: 30px; }
    .history--section .history--text .btn { margin-top: var(--gap-md); }

    .segment--list { grid-gap: 25px; }
    .segment--card .segment--img { width: 200px; }

    .product-category--list { display: flex; flex-wrap: wrap; justify-content: center; }
    .product-category--list li { flex: 0 0 33%; text-align: center; }
    .product-category--list li:nth-child(3) { border-right: 0px; }
    .brand--product--list { margin-top: 20px; }
    .product-category--list li:nth-child(1), .product-category--list li:nth-child(2), .product-category--list li:nth-child(3) { border-bottom: 1px solid #2f2f2f; }
    .product-category--list { border: 0px; }

    .brand--product--list { grid-gap: 10px; }
    .brand--product--list { grid-template-columns: repeat(7, 1fr); }
    .brand--section .tab-content .tab-pane, .distrubuter--company--cont, .brand--section .tab-content .tab-pane, .group--contact--cont { padding: 30px; }
    #other-partner .brand--product--list li a { height: auto; }
    #other-partner .brand--product--list { margin-top: 10px; }
    .map--container { padding-left: 30px; }

    footer .footer--left .footer--title { font-size: 35px; }
    footer .footer--left .input-group { width: 100%; }
    footer .footer--left .input-group .input-group-text { font-size: 13px; }
    footer { padding-top: calc(var(--gap-xxl) * 1.5); border-top-right-radius: 70px; }
    footer .footer--left .input-group .form-control { padding: 10px 15px; }
    .footer--div .footer--title { font-size: 14px; }
    footer .footer--left p { font-size: 14px; }
    footer .footer--left .input-group .form-control::placeholder { font-size: 14px; }

    .category--list li .category--list-in .hero--2 { font-size: 26px; margin-bottom: 12px; } 
    .product--detail table { margin-top: 20px; }

    .brand--other--product .product-category--list li { border-bottom: 0px; }

    .group--partner--section .parner--logo .partner-logos img, .group--partner--section .parner--logo img { height: 70px; }
    .group-company-list li { align-items: flex-start; }

}

@media screen and (max-width: 991px)
{
    .hero--1 { font-size: 50px; }
    .hero--2 { font-size: 24px; }
    .hero--3 { font-size: 30px; }

    .py--lg { padding: calc(var(--gap-xxxl) * 1.2) 0; }
    .pb--lg { padding-bottom: calc(var(--gap-xxxl) * 1.2); }
    .pt--lg { padding-top: calc(var(--gap-xxxl) * 1.2); }

    .py--md { padding: calc(var(--gap-xxxl) * 1.2) 0; }
    .pb--md { padding-bottom: calc(var(--gap-xxxl) * 1.2); }
    .pt--md { padding-top: calc(var(--gap-xxxl) * 1.2); }
    
    .subtitle span { width: 30px; }
    .h2 { font-size: 24px; }
    .p1 { font-size: 18px; }

    .read--more span, .read--more { font-size: 14px; }

    .hamburger--div { width: 25px; display: flex; flex-direction: column; gap: 4px; margin-right: 20px; justify-content: center; }
    .hamburger--div span { width: 100%; height: 1px; background: #ffffff; display: block; justify-content: center; }
    .navbar--nav .close--icon { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; position: absolute; right: 10px; top: 10px; width: 35px; height: 35px; padding: 10px; } 
    .navbar--nav .close--icon img { height: auto; object-fit: contain; filter: invert(1); }
    .navbar--cont { position: fixed; top: 0px; width: 350px; right: -350px; height: 100vh;  -webkit-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s; z-index: 11111; }
    .navbar--cont.active { right: 0; }
    .navbar--cont .overlay--div { position: fixed; right: 0px; z-index: -1; width: 100%; height: 100vh; top: 0px; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); pointer-events: none; -webkit-backdrop-filter: blur(5px); opacity: 0; -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); }
    .navbar--cont.active .overlay--div { opacity: 1; }

    .header .header--con--icon li .wrapper-dropdown { width: 80px; }
    .header .header--con--icon li .wrapper-dropdown { padding: 20px 6px; }
    .header .header--con--icon li .wrapper-dropdown .dropdown li { padding: 10px 10px; }
    .header .navbar--nav { background: #fff; height: 100vh; display: block; padding-top: 50px; }
    .header .navbar--nav li a, .header .navbar--nav li a.btn span { color: var(--black); margin-right: 0px; padding: 20px 20px; border-bottom: 1px solid #d3d0d0; font-size: 18px; }
    .header .navbar--nav li a.btn { padding: 0px; display: flex; width: 100%; }
    .header .navbar--nav li a.btn span { width: 100%; text-align: left; }
    .header .navbar--nav li a.active:after, .header .navbar--nav li a:after { display: none; }
    .header .navbar--nav li a.btn svg { display: none; }

    .header .navbar--nav .dropdown--menu li a { padding: 15px 20px; }
    .header .logo { margin-left: 15px; }

    .dropdown--bx .dropdown--menu { width: 100%; position: static; transition: none; opacity: 1; display: none; background:#efefef; transform: none; }
    .dropdown--bx a svg path { fill: var(--black); }
    .header .navbar--nav .dropdown--bx a svg { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 12px; height: 12px; }

    .scroll--text { right: 0px; }
    .btn-wrap .btn.next { margin-left: 10px; }
    .home--banner { height: 780px; }
    .group-company-list li .mission--text .h6 { font-size: 16px; }
    .group-company-list li .img--box { height: 40px; }

    .img--box { border-radius: 15px; }

    .flag--img--container { margin-bottom: var(--gap-xl); height: auto; }
    .flag--img--container .flag--shape { height: 100%; }
 
    .why--section--cont { padding: 20px; }
    .why--section .why--text { padding-left: 0px; }
    .why--section .why--text .rating--div { margin-top: 0px; }
    .why--section .why--text .rating--div li { padding-right: 25px; margin-right: 25px; }
    .partner--list li .partner--bx .partner--logo img { width: 50%; }

    .segment--card { flex-direction: column; }
    .segment--card .segment--img { width: 100%; margin-bottom: var(--gap-lg); }
    .segment--card .segment--body { margin-left: 0px; }
    .business--segment .hero--2 { margin-bottom: calc(var(--gap-xl) * 1.2); }

    .product--category .subtitle { text-align: center; justify-content: center; display: flex; }
    .product--category .hero--2 { text-align: center; }
    .product-category--list li .img--box { height: 48px; }
    .product-category--list li .h3 { font-size: 18px; }
    .row.category--list { --bs-gutter-y: 20px; }

    .nav-tabs li .nav-link { font-size: 16px; }
    .brand--section .tab-content .tab-pane { border-radius: 15px; }
    .map--container { padding-left: 0px; }
    .reach--section .reach--bx { padding: 30px 30px 10px 30px; }

    .group-mission--list li:after { right: 0px; }
    .group-mission--list li:nth-child(2):after, .group-mission--list li:last-child:after { display: none; }

    footer .footer--left .input-group { width: 70%; }
    footer .footer--left { margin-bottom: 40px; }
    .footer--bottom { margin-top: 0px; }

    .footer--bottom .footer--bottom--center { text-align: left; }
    .footer--bottom .footer--bottom--left { margin-bottom: 15px; }
    .footer--bottom .footer--bottom--left .footer--logo { width: 63px; margin-right: 15px; }
    .footer--div .footer--title { font-size: 14px; }

    .group-mission--list { display:  flex; justify-content: center; flex-wrap: wrap; gap: 0px; }
    .group-mission--list li { flex: 0 0 50%; border-bottom: 1px solid #d8d1d1e0; padding-bottom: 25px; }
    .group-mission--list li:last-child { margin-top: 20px; border-bottom: 0px; padding-bottom: 0px; flex: 0 0 100%; }
    .group-mission--list li:nth-child(even) { border-right: 0px; }

    .in-banner { height: 350px; }
    .advantage--section .why--text { padding: 0 0 20px 0px; }
    .distrubuter--company--cont .group-list .group--list-lists { display: grid; grid: auto / repeat(4, 1fr); gap: 20px; margin-top: 10px; }
    .group-list .group--list-lists li a .image-box { width: auto; }

    .partner--list li { flex: 0 0 calc(36% - 50px); }
    .partner--list li .partner--bx .partner--logo { height: 190px; }
    .partner--list li .partner--bx .partner--name { font-size: 16px; min-height: 75px; }

    .category--list li .category--list-in .category--img { width: 200px; height: 190px; margin-right: 25px; }

    .contact--section .contact--info { padding-bottom: 0px; }
    .contact--section li:last-child { margin-bottom: 0px; }
    .contact--section .form--box { border-left: 0px; border-right: 0px; }
    .contact--section .section--title--grp .hero--2 { margin-bottom: calc(var(--gap-xxl) * 1.2); }
    .wpcf7 form .wpcf7-response-output { margin: 25px 0px 0px 0px; }
    .btn:hover .svg, .btn:hover span + .svg { margin-left: 4px; }

    .product--detail table { white-space: nowrap; }
    .product--detail table th { font-size: 18px; }
    .product--detail table tr td { font-size: 16px; }

    .group--contact--section .information--list { padding-left: 0px; }
    .product--section .group--product { grid-template-columns: repeat(2, 1fr); gap: 30px; }

    .in-banner .banner-content { margin-top: 40px; }
    .in-banner.group--banner { padding: 80px 20px 30px 20px; }
    .group-company-list li { min-width: 220px; }
    .group-mission--list { border-radius: 10px; }
    .group-list .group--list-lists li a { padding: 12px; }

    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { margin-bottom: 10px; }
    .in-banner.group--banner .banner-content .bredcrump { margin-top: 30px; }
    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { font-size: 30px; }
    .group-company-list li .mission--text p { max-width: 350px; }

    .brand--detail--section .brand--product--info { padding-left: 0px; padding-top: 30px; }
    .brand--other--product .product-category--list { padding: 20px; }

    .table-responsive { overflow-x: scroll; -webkit-overflow-scrolling: auto; scrollbar-width: thin; scrollbar-color: #999 #f1f1f1; padding-bottom: 0px; }
    .table-responsive::-webkit-scrollbar { height: 8px; }
    .table-responsive::-webkit-scrollbar-track { background: #f1f1f1; }
    .table-responsive::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; }
    .table-responsive::-webkit-scrollbar-thumb:hover { background: #666; }

    .group--partner--section .parner--logo .partner-logos img, .group--partner--section .parner--logo img { height: 50px; margin-left: 10px; }
    .brand--section .tab-content .tab-pane, .distrubuter--company--cont, .brand--section .tab-content .tab-pane, .group--contact--cont, .map--container { border-radius: 10px; }

}



@media only screen 
  and (min-width: 930px) 
  and (max-width: 934px) 
  and (min-height: 428px) 
  and (max-height: 432px) 
  and (orientation: landscape) 
  {
    .home--banner { height: 100vh; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p:last-child { margin-bottom: 0px; }
    .banner--slider .banner--content { bottom: 140px; }
    .hero--1 { font-size: 44px; }
  }


@media screen and (max-width: 767px) 
{
    .home--banner { height: 95vh; }
    body p { margin-bottom: 15px; }
    
    .error-page {padding: 250px 0px 130px 0px; }
    .why--section .why--text { padding-top: 25px; }
    .why--section .why--text .rating--div li:after { height: 100%; }
    .container { max-width: 98%; }
    .segment--list { grid-gap: 18px; }

    .product-category--list li { padding: 20px 10px; }
    .product-category--list li:nth-child(1), .product-category--list li:nth-child(2), .product-category--list li:nth-child(3) { border-bottom: 1px solid #2f2f2f; }
    .product-category--list { border: 0px; } 
    .nav-tabs li .nav-link { padding: calc(var(--gap-sm) / 2 * 3) var(--gap-xl); }
    .brand--product--list { grid-template-columns: repeat(5, 1fr); }

    #other-brand .brand--product--list { grid-template-columns: repeat(5, 1fr); }
    #other-partner .brand--product--list { grid-template-columns: repeat(5, 1fr); margin-top: 0px; }

    .in-banner .banner-content { margin-top: 40px; }
    .in-banner { height: 300px; }
    .in-banner .banner-content .hero--1 { margin-bottom: 12px; }


    footer .footer--left .input-group { width: 90%; }
    .footer--div { margin-bottom: calc(var(--gap-lg) * 1.5); }
    footer .footer--left { padding-right: 0px; }

    .distrubuter--company--cont .group-list .group--list-lists { grid: auto / repeat(3, 1fr); }
    .group-mission--list { padding: 30px 0px; }
    .group-mission--list li .img--box { width: 55px; height: auto; }
    .in-banner .banner-content .hero--1 { font-size: 50px; }
    .history--section .history--text { padding-left: 15px; padding-right: 15px; }
    .flag--img--container { margin-top: 0px; height: 245px;  }

    .partner--list li { flex: 0 0 45%; }
    .partner--list li .partner--bx .partner--name { min-height: 60px; }

    .category--list li .category--list-in .hero--2 { font-size: 24px; }
    .brand--section .hero--2 { margin-bottom: calc(var(--gap-xl) * 1.1); }
    .brand--section .brand--grp .hero--2 { margin-bottom: 15px; }

    .faqs-filter-list li a { padding: 7px 22px; font-size: 15px; }
    .filter-faqs-tags { margin-bottom: var(--gap-lg); }
    .p1 { font-size: 16px; }

    .contact--section .form--box { padding: 40px 20px; }
    .contact--section .contact--info { padding: 40px 20px 0px 20px; }
    .contact--section .section--title--grp { padding-left: 15px; padding-right: 15px; }
    .contact--section .section--title--grp .hero--2 { margin-bottom: calc(var(--gap-xxl) * 1); }

    .in-banner.group--banner .banner-content .group-banner--text { padding-left: 0px; }
    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { font-size: 26px; }

    .group-company-list li .mission--text .h6 { font-size: 16px; }
    .group-company-list li .mission--text p { font-size: 13px; }
    .group-company-list li { min-width: 190px; }
    .group--contact--section { padding-top: 20px; }

    .product--section .group--product { padding: 30px; }
    .group--partner--section .parner--logo { width: 100%; }
    .group--partner--section .parner--logo .partner-logos, .group--partner--section .parner--logo { justify-content: flex-start; margin-top:5px; }
    .group--partner--section .parner--logo .partner-logos img, .group--partner--section .parner--logo img { margin-left: 0px; margin-right: 20px; }
    .group--contact--section .information--list { margin-top: 15px; }
    .group-company-list li .img--box { width: 36px; }
    .bredcrump li, .bredcrump li a { letter-spacing: 0.2px; }

    .brand--detail--section .brand--product--info { padding-top: 20px; gap: 20px; }
    .brand--other--product .product-category--list { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 20px; }
    .brand--other--product .product-category--list li { flex:1; }
    .brand--other--product .product-category--list li { border: 0px!important; background: #f2f2f2; border-radius: 10px; }

    .contact--section li { margin-bottom: 15px; }
    .contact--section .information--list .icon { width: 26px; height: 28px; }


}

@media screen and (max-width: 576px) 
{
    .hero--2 { font-size: 22px; }
    .h3 { font-size: 18px; }
    .h2 { font-size: 22px; }
    .h4 { font-size: 18px; }
    .subtitle { font-size: 14px; }

    .py--lg { padding: calc(var(--gap-xxxl) * 1) 0; }
    .pb--lg { padding-bottom: calc(var(--gap-xxxl) * 1); }
    .pt--lg { padding-top: calc(var(--gap-xxxl) * 1); }

    .btn .svg { width: 15px; height: auto; margin-left: 3px; }

    .error-page { padding: 280px 0px 100px 0px; }
    .error-page h3 { font-size: 100px; }
    .error--description h4 {font-size: 16px; }
    .error--description {padding-left: 30px; padding-right: 30px; }
    .scroll--text { display: none; }

    .btn-wrap .btn { width: 35px; height: 35px; }
    .hero--1 { font-size: 50px; }
   
    .selected-display { font-size: 12px; }
    .header .logo { width: 65px; }
    .header.show .logo { width: 60px; }
    .header .header--con--icon li .wrapper-dropdown { padding: 15px 6px; }
    .header .header--con--icon li .wrapper-dropdown .dropdown li a { font-size: 12px; }
    .header .header--con--icon li .wrapper-dropdown .dropdown li { padding: 10px 14px; }

    .banner--slider .banner--content .h4 { width: 100%; font-size: 18px; }
    .banner--slider .banner--content { bottom: 150px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p, .banner--thumbnail--section .banner--thumb .swiper-slide span { font-size: 14px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p { margin-bottom: 0px; }
    .banner--thumbnail--section { bottom: 30px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide.swiper-slide-thumb-active .line:after { height: 4px; }
    .btn-wrap { justify-content: flex-start; }
    .home--banner { border-bottom-right-radius: 50px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide.swiper-slide-thumb-active .line { height: 4px; }

    .history--section .history--text { padding-right: 15px; padding-left: 15px; }
    .flag--img--container { height: auto; }

    .about--bg img { width: 1000px; }
    .segment--list { display: grid; grid-template-columns: repeat(1, 1fr); }
    .product-category--list li { flex: 0 0 50%; }
    .img--box { border-radius: 10px; }

    .product-category--list li:nth-child(even) { border-right: 0px!important; }
    .product-category--list li { border-bottom: 1px solid #2f2f2f; border-right: 1px solid #2f2f2f!important; }
    .product-category--list li { border-bottom: 1px solid #2f2f2f; border-right: 1px solid #2f2f2f!important; }
    .product-category--list li:last-child { border-bottom: 0px; border-right: 0px!important; padding-bottom: 0px; }

    .product--category .hero--2 { margin-bottom: calc(var(--gap-xxl) * 1); }
    
    .brand--section .nav-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; gap: 10px; margin-bottom: 20px!important;  }
    .brand--section .nav-tabs li .nav-link { border: 1px solid #f2f2f2; border-radius: 30px; margin-bottom: 0px; }
    .nav-tabs li .nav-link { font-size: 14px; padding: 10px 20px; }

    .brand--section .tab-content .tab-pane, .distrubuter--company--cont, .brand--section .tab-content .tab-pane, .group--contact--cont { padding: 20px; }

    .brand--product--list { grid-template-columns: repeat(4, 1fr); }
    #other-brand .brand--product--list { grid-template-columns: repeat(4, 1fr); }
    #other-partner .brand--product--list { grid-template-columns: repeat(2, 1fr); }

    .reach--section .reach--bx { padding: 20px 15px 10px 15px; }
    .why--section--cont { border-radius: 15px; }
        
    footer { border-top-right-radius: 50px; }
    footer .footer--left .input-group { width: 100%; }
    footer .footer--left { margin-bottom: 35px; }
    .footer--link--products li { flex:0 0 100%; }
    .footer--div p br { display: none; }
    .footer--div p:last-child { margin-bottom: 0px; }
    .footer--div { margin-bottom: calc(var(--gap-lg) * 1.5); }
    .footer--div .footer--title { font-size: 13px; }
    .footer--div .footer--title { margin-bottom: 12px; }
    .social--link li a .svg { width: 13px; height: 13px; }
    .social--link li a { width: 25px; height: 25px; }
    footer .footer--left p { font-size: 14px; }
    footer .footer--left .footer--title { font-size: 30px; }
    .form-control { font-size: 14px; }
    ::placeholder, footer .footer--left .input-group .form-control::placeholder { font-size: 13px; }
    .form-control::-webkit-input-placeholder { font-size: 13px; }
    .form-control::-moz-placeholder { font-size: 13px; }
    .form-control:-ms-input-placeholder { font-size: 13px; }
    .form-control::-ms-input-placeholder { font-size: 13px; }
    .form-control::placeholder { font-size: 13px; }

    footer .footer--left .input-group { height: 46px; }
    .footer--bottom--right { text-align: left; margin-top: 5px; }
    .footer--bottom a, .footer--bottom p { font-size: 11px; }

    .distrubuter--company--cont .group-list .group--list-lists { grid: auto / repeat(2, 1fr); }
    .distrubuter--company--cont, .map--container { border-radius: 15px; }
    .group-list .group--list-lists li a .image-box { height: 80px; }
    .distrubuter--company--cont .group-list .group--list-lists { gap: 15px; }

    .group-mission--list li { flex: 0 0 100%; border-right: 0px; }
    .in-banner { height: 260px; border-bottom-right-radius: 50px; }
    .in-banner .banner-content .hero--1 { font-size: 38px; }
    .in-banner .banner-content { margin-top: 0px; }
    .bredcrump li, .bredcrump li a { --font-size: 11px; }
    .bredcrump li .svg { width: 8px; }
    .flag--img--container .flag--bg { top: 1px; }

    .group-mission--list { padding: 0px 0px; border-radius: 15px; }
    .group-mission--list li { padding: 30px 10px; }
    .group-mission--list li:last-child { padding-bottom: 30px; margin-top: 0px; }
    .partner--list { margin-top: 15px; }
    .partner--list li .partner--bx .partner--name { font-size: 16px; }
    .partner--list li .partner--bx .partner--logo { height: 160px; }
    .partner--list li .partner--bx .partner--name { padding: 10px 10px; }
    .partner--list { gap: 30px 20px; }

    .category--list li .category--list-in { flex-direction: column; }
    .category--list li .category--list-in .category--img { width: 100%; height: auto; margin-right: 0px; margin-bottom: 20px; }
    .category--list li .category--list-in { padding: 25px; }
    .category--list li .category--list-in .category-text-box .read--more span { font-size: 14px; }

    .contact--section .information--list .icon { width: 25px; height: 25px; }
    .information--list li .social--link li a { width: 40px; height: auto; }
    .contact--section li { margin-bottom: 20px; }

    .product--detail table tr td:nth-child(2) { width: 150px; }
    .product--detail table tr td, .product--detail table th { padding: 12px 20px; }
    .product--detail.py--lg { padding-bottom: 0px; }
    .product--detail table { margin-top: 10px; }
    .faqs-filter-list li a { font-size: 14px; }

    .product--section .group--product { padding: 20px; }
    .group-company-list { flex-direction: column; }
    .group-company-list li { border-right: 0px; padding-right: 0px; margin-right: 0px; }

    .in-banner.group--banner .banner-content .bredcrump { margin-top: 20px; }
    .in-banner.group--banner .banner-content .group-banner--text .hero--1 { font-size: 24px; }
    .in-banner.group--banner { padding: 80px 15px 30px 15px; }

    .product--section .group--product { border-radius: 15px; }
    .read--more span, .read--more { font-size: 14px; }

    .product--section .group--product .group---product--bx .product--img { height: 100px; }
    .product--section .group--product { gap: 20px; }
    .in-banner.group--banner .banner-content .group-banner--text { padding-top: 20px; }

    .group--partner--section .parner--logo .partner-logos img, .group--partner--section .parner--logo img { width: 90px; height: auto; }
    .group--partner--section .parner--logo .partner-logos { padding-top: 15px; }
    .brand--other--product .product-category--list li img { height: 150px; }

    .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { padding: 10px 12px; }
    .wpcf7-not-valid-tip { font-size: 12px; }
    .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { font-size: 12px; }

}


@media screen and (max-width: 480px) 
{
    body p { font-size: 14px; }

    .navbar--cont { width: 300px; right: -300px; }
    .header .navbar--nav li a, .header .navbar--nav li a.btn, .header .navbar--nav li a.btn span { font-size: 14px; }
    .header .navbar--nav .dropdown--menu li a { font-size: 11px; }
    .header .navbar--nav .dropdown--bx a svg { width: 10px; height: 10px; }
    .header .navbar--nav li:last-child { display: block; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p, .banner--thumbnail--section .banner--thumb .swiper-slide span { font-size: 13px; }

    .product-category--list li .h3 { font-size: 16px; }
    .advantage--section .why--text { padding: 0 0 10px 0px; }
    .group-list .group--list-lists li a .image-box { height: 70px; }
    .partner--list li { flex: 0 0 47%; }

    .category--list li .category--list-in { padding: 20px; }
    .contact--section .form--box .h1, .contact--section .contact--info .h1 { font-size: 24px; }
    .contact--section .form--box { padding: 30px 20px 40px 20px; }
    .information--list li p, .information--list li a { font-size: 15px; }

    .product--detail table th { font-size: 16px; }

    footer { padding-top: calc(var(--gap-xxl) * 1.2); }
    footer .footer--left .input-group .form-control { padding: 10px 5px 10px 15px; margin-bottom: 15px; height:50px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0px; }
    .product--section .group--product .group---product--bx .product--img { height: 70px; }

    footer .footer--left .input-group { display: block; height: auto; border: 0px; border-radius: 0px; }

}

@media screen and (max-width: 390px) 
{
    .hero--1 { font-size: 45px; }
    .information--list li .social--link li a { width: 35px; }
    .information--list li .social--link li a .svg { width: 16px; }
    footer .footer--left .input-group .input-group-text { font-size: 12px; }
    .banner--thumbnail--section .banner--thumb .swiper-slide p, .banner--thumbnail--section .banner--thumb .swiper-slide span { font-size: 12px; }
}