/*----------reponsive--------------------------------------------------------------------------*/

/*----------phone---------*/

@media (max-width: 767px) {
    :root{
        --10px: 1.5vw;
    }
    /*----menu----*/
    .w3-padding-32 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    #navbar .logo {
        position: relative;
        top: 5px;
        left: calc(50% - 70px);
    }
    #mySidebar .cus-dropdown {
        background-color: rgba(0, 0, 0, 0.9);
    }
    
    
    #mySidebar .logo img {
        padding-bottom: 8px;
    }
    #mySidebar .logo .w3-large {
        font-size: 1rem !important;
    }
    button.control_prev,
    button.control_next {
        font-size: 18px !important;
    }
    button.control_next {
        right: 0.5rem;
    }
    button.control_prev {
        left: 0.5rem;
    }
    .content-page {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    /*------------About-us----------------------*/
    .cus-title .w3-xxlarge {
        font-size: 24px !important;
    }
    .cus-title p {
        font-size: 14px !important;
    }
    .content-introduction .cus-pl-30 {
        padding-left: 0px;
    }
    .repons-center {
        position: relative;
        left: calc(50% - 90px);
    }
    .cus-number {
        font-size: 5.3rem;
        padding-left: 22px;
    }
    .cus-square {
        height: 100px;
        width: 100px;
        border: 6px solid #adadad;
    }
    .cus-experience {
        margin-left: 118px;
        line-height: 1.2;
        padding-top: 28px;
    }
    .cus-describe {
        font-size: 1.6rem;
    }
    .cus-describe {
        float: none !important;
        text-align: center;
    }
    .content-introduction .w3-large {
        font-size: 1rem !important;
    }
    .content-introduction .w3-padding-32 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    /*---------About-Us-Page-----------------------------------*/
    .bg-baner {
        height: 200px;
    }
    .cus-bnr-page h1 {
        font-size: 1rem;
    }
    .cus-bnr-page p {
        font-size: 0.7rem;
    }
    .cus-bnr-page .w3-display-middle {
        top: 60% !important;
    }
    .bg-baner .w3-display-bottommiddle {
        width: 90%;
        bottom: -24px !important;
    }
    .box-btn-bnr ul li {
        padding: 13px 5px;
        font-size: 14px;
    }
    .cus-icon-home {
        padding: 0px 20px;
    }
    .bg-half::before {
        width: 92%;
    }
    .cus-tx-center-items h2 {
        font-size: 30px !important;
    }
    .cus-tx-iner {
        font-size: 18px;
    }
    .content-about h2 {
        font-size: 24px;
    }
    .content-about .w3-large,
    .content-about-title .w3-large {
        font-size: 14px !important;
    }
    .cus-rp-ct-ab {
        padding: 0px 5px;
    }
    .cus-rp-ct-ab .cus-tx-center-items {
        display: block;
    }
    /*------News------*/
    .news {
        padding-right: 15px;
        padding-left: 10px;
    }
    .news .w3-xlarge {
        font-size: 18px !important;
    }
    .news .w3-xxlarge {
        font-size: 20px !important;
        line-height: 0.0 !important;
    }
    .news .w3-padding-16 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .news summary {
        font-size: 14px !important;
    }
    .news .cus-f-14 {
        font-size: 12px !important;
    }
    /*------Service------*/
    .service .cus-prod .img-pro img,
    .cus-hover-bg {
        height: 100%;
    }
    .service .cus-prod .w3-xlarge {
        font-size: 18px !important;
    }
    /*----------Service-Detail--------------------*/
    .slider-item-service .slider {
        width: 100%;
        height: 255px;
        left: 5px;
    }
    #slider-slideshow ul {
        height: auto;
    }
    #slider-slideshow ul li {
        height: auto;
    }
    .slider-item-service .prev {
        left: 2px;
    }
    .slider-item-service .next {
        right: 5px;
    }
    .slider-item-service .control {
        width: 30px;
        height: 30px;
    }
    .cus-service-slide .text-project {
        padding: 4px 8px;
    }
    .cus-service-slide .text-project .cus-fs-16 {
        font-size: 14px;
    }
    .content-pro-detail {
        padding: 0px 15px;
    }
    .cus-p-rp .w3-container {
        padding-left: 5px !important;
        padding-right: 15px !important;
    }
    /* -------------Error-page------------------------------------ */
    .cus-tx_error {
        font-size: 150px;
        line-height: 150px;
    }
    .error-head {
        width: 100%;
        font-size: 16px !important;
    }
    .error-page .subscribe-form {
        max-width: 100%;
        width: 100%;
    }
    /*------Project-page-----------------------*/
    .tx-head-title {
        font-size: 28px;
    }
    .cus-hv-bg-pro .cus-f-22 {
        font-size: 18px;
    }
    .cus-hv-bg-pro span {
        font-size: 12px;
    }
    .cus-sm-project {
        font-size: 10px;
        max-width: 130px;
    }
    /* -----------Contact------------------------------ */
    .address-contact .cus-plr-15 {
        padding: 20px 15px;
    }
    /*------Footer------*/
    .footer .cus-ptb-ft {
        padding-top: 24px !important;
        padding-bottom: 16px !important;
    }
    .footer .w3-border-left {
        border-left: 0px solid #ccc !important;
    }
    .footer .cus-p-30 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .footer .cus-pb-20 {
        padding-bottom: 10px !important;
    }
    /* -----------News-Detail-------------------------------- */
    .block-quote {
        padding: 4px 20px 5px 20px;
        margin: 24px 0;
        font-size: 18px;
    }
    .post-info .post-name {
        display: block;
        margin-bottom: 15px;
    }
    .comments-avatar {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
    .comment-body {
        margin-left: 14px;
    }
    .comment-body .w3-xlarge {
        font-size: 18px;
    }
    .comment-body p {
        font-size: 14px;
    }
    .comments-item .comments-feedback {
        margin-left: 30px;
    }
    .comments-post-form .add-comment .cus-pl-15,
    .comments-post-form .add-comment .cus-pr-15 {
        padding: 0px;
    }
    /*---- additional----- */
    .news-page .w3-card {
        height: auto;
    }
    .cus-grid .w3-grayscale-max {
        filter: none;
    }
    .content-title p {
        font-size: 14px;
    }
    .cus-news-home .w3-xxlarge {
        font-size: 24px !important;
    }
    .cus-news-home p {
        font-size: 14px;
    }
    .cus-mobile-main {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        display: -webkit-flex;
    }
    .cus-mobile-left {
        order: 2;
        position: relative;
        -webkit-order: 2;
    }
    .cus-mobile-right {
        order: 1;
        position: relative;
        -webkit-order: 1;
    }
    .cus-to-slides .demo {
        width: 35px;
        height: 35px;
    }
    .cus-to-slides {
        padding: 2px 4px;
    }
    .content-page .cus-pr-12 {
        padding-right: 0px;
    }
    .content-page .cus-list-detail {
        padding-top: 16px;
    }
    .content-page .w3-border-left {
        border: none !important;
    }
    .tx-on {
        margin: 0px;
        padding: 0px;
    }
    .news-head {
        font-size: 22px;
    }
    .footer-support {
        width: 100%;
        background-color: #bcbcbc !important;
    }
    .footer-support ul {
        display: flex;
    }

    .product-grid {
        grid-template-columns: 1fr 1fr;
    }
    .product-description__name {
        font-size: 2em;
    }


}
/* -----------tablet-------------*/

@media (min-width: 768px) and (max-width: 1023px) {
    .w3-container {
        width: 740px;
    }
    .w3-padding-32 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    /*----Menu----*/
    #navbar .cus-repon-m {
        position: relative;
        left: calc(50% - 177px);
    }
    #mySidebar .cus-dropdown {
        background-color: rgba(0, 0, 0, 0.9);
    }
    /*------------About-us----------------------*/
    .cus-mobile-main {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        display: -webkit-flex;
    }
    .cus-mobile-left {
        order: 2;
        position: relative;
        -webkit-order: 2;
    }
    .cus-mobile-right {
        order: 1;
        position: relative;
        -webkit-order: 1;
        right: 0px;
        width: 100%;
    }
    .cus-describe {
        float: none !important;
        text-align: center;
    }
    .repons-center {
        position: relative;
        left: calc(50% - 118px);
    }
    .bg-baner .w3-display-bottommiddle {
        width: 740px;
    }
    .cus-tx-center-items article {
        padding-top: 24px;
    }
    .content-about h2,
    .content-about-title h2 {
        font-size: 24px;
    }
    .content-about .w3-large,
    .content-about-title .w3-large {
        font-size: 14px !important;
    }
    .cus-hover-gallery .cus-f-22 {
        font-size: 18px;
    }
    .cus-hover-gallery p {
        font-size: 13px;
    }
    .st-im-bt-about .cus-display {
        display: none;
    }
    .cus-rp-ct-ab .cus-tx-center-items {
        display: block;
    }
    /*------News------*/
    .news {
        padding-right: 15px;
        padding-left: 10px;
    }
    .news .w3-xlarge {
        font-size: 20px !important;
    }
    .news .w3-xxlarge {
        font-size: 24px !important;
        line-height: 0.0 !important;
    }
    .news .w3-padding-16 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .news .cus-f-14 {
        font-size: 12px !important;
    }
    /*------Service------*/
    .service .cus-prod .img-pro img,
    .cus-hover-bg {
        height: 320px;
    }
    .service .cus-prod .w3-xlarge {
        font-size: 14px !important;
    }
    /*------Service-detail------------*/
    .slider-item-service {
        height: 175px;
    }
    .slider-item-service .slider {
        left: calc(50% - 370px);
        width: 740px;
        height: auto;
    }
    .slider-item-service .wrapper {
        height: auto;
    }
    .slider-item-service .slides {
        left: -256px;
    }
    .slide_service {
        width: 256px;
    }
    .slider-item-service .control {
        width: 30px;
        height: 30px;
    }
    .cus-service-slide .text-project {
        padding: 4px 8px;
    }
    .cus-service-slide .text-project .cus-fs-16 {
        font-size: 14px;
    }
    .slider-item-service .prev {
        left: 2px;
    }
    /*------Designs--------------------------*/
    .cus-tx-content {
        padding: 8px 16px !important;
    }
    .designs .m-padd {
        padding-bottom: 10px;
    }
    /*------Error----------------------------*/
    .cus-tx_error {
        font-size: 180px;
        line-height: 180px;
    }
    .error-head {
        width: 100%;
        font-size: 24px !important;
    }
    /*------Project-page-----------------------*/
    .tx-head-title {
        font-size: 35px;
    }
    .cus-hv-bg-pro .cus-f-22 {
        font-size: 18px;
    }
    .cus-hv-bg-pro span {
        font-size: 12px;
    }
    .cus-sm-project {
        font-size: 10px;
        max-width: 110px;
        padding: 8px 16px;
        border: 2px solid rgb(145, 174, 29);
    }
    .cus-hv-bg-pro .w3-margin-top {
        margin-top: 12px !important;
    }
    .cus-hv-bg-pro h3 {
        margin-top: 5px;
    }
    /*------Footer------*/
    .footer .cus-p-30 {
        padding: 18px 12px !important;
    }
    .footer .cus-pb-20 {
        padding-bottom: 10px !important;
    }
    .footer .w3-xlarge {
        font-size: 18px !important;
    }
    .footer .w3-medium {
        font-size: 11px !important;
    }
    .footer .w3-border-left {
        height: 125px;
    }
    .footer .w3-xxlarge {
        font-size: 24px !important;
    }
    /* ------Product-Detail-------------- */
    .content-page .cus-pr-12 {
        padding-right: 0px;
    }
    .content-page .cus-list-detail {
        padding-top: 16px;
    }
    .content-page .w3-border-left {
        border: none !important;
    }
    .news-head {
        font-size: 22px;
    }
    .tx-on {
        margin: -8px 0 0 -75px;
        padding: 8px 8px 0px 20px;
    }
    .tx-on .w3-xxlarge {
        font-size: 24px !important;
    }
    .left {
        margin: -8px -75px 0 0;
    }
    .cus-tx-content h3 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* -----------News-Detail-------------------------------- */
    .block-quote {
        padding: 4px 20px 5px 40px;
        margin: 30px 0;
    }
    .news-sec-title {
        padding-left: 10px;
        margin-top: 6px;
    }
    .cus-grid .w3-grayscale-max {
        filter: none;
    }
    .cus-news-home article {
        height: 208px;
    }
    .cus-news-home .w3-xlarge {
        font-size: 18px !important;
    }
    .cus-news-home .cus-f-14 {
        font-size: 12px;
    }
}

/* --- ipad pro --------*/

@media (min-width: 1024px) and (max-width: 1199px) {
    .w3-container {
        width: 1000px;
    }
    .w3-padding-32 {
        padding-bottom: 16px !important;
        padding-top: 16px !important;
    }
    /*----Menu----*/
    #navbar .logo {
        padding: 6px 0px;
        font-size: 21px !important;
    }
    #navbar .w3-container {
        padding: 0 !important;
    }
    .cus-menu {
        padding: 11px 5px !important;
        font-size: 14px;
    }
    .cus-menu .phone-menu i {
        font-size: 40px;
    }
    .cus-menu .phone-menu span,
    .cus-menu .phone-menu p {
        padding-left: 2px;
    }
    .cus-tx-logo span {
        top: 11px;
        font-size: 16px !important;
    }
    .cus-num-phone {
        font-size: 16px !important;
    }
    .cus-right-0 {
        right: 0px;
    }
    .searchform-wrap #searchbox {
        top: 0;
    }
    /*------------About-us----------------------*/
    .cus-number {
        font-size: 6rem;
    }
    .cus-mobile-right .w3-large {
        font-size: 1rem !important;
    }
    .cus-describe {
        font-size: 1.6rem;
    }
    .bg-baner .w3-display-bottommiddle {
        width: 1000px;
    }
    .content-about h2 {
        font-size: 24px;
    }
    .content-about .w3-large {
        font-size: 16px !important;
    }
    /*------Service------*/
    .service .cus-prod .img-pro img,
    .cus-hover-bg {
        height: 470px;
    }
    .service .cus-hover-bg .w3-xlarge {
        font-size: 20px !important;
    }
    .slider-item-service .slider {
        left: calc(50% - 500px);
        width: 1000px;
        height: auto;
    }
    .slider-item-service .wrapper {
        height: auto;
    }
    .slider-item-service .slides {
        left: -333px;
    }
    .slide_service {
        width: 333px;
    }
    .slider-item-service .prev {
        left: 2px;
    }
    .slider-item-service .next {
        right: 3px;
    }
    /*------Designs------*/
    .cus-tx-content {
        padding: 8px 18px !important;
    }
    .cus-tx-content .w3-medium {
        font-size: 13px !important;
    }
    .cus-tx-content article h3 {
        font-size: 1rem;
    }
    .cus-tx-content article summary {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    .cus-tx-content .w3-padding-32 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .cus-see-cont {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    .cus-designs h3 {
        font-size: 18px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .cus-designs p {
        font-size: 14px;
    }
    /*------Project-page-----------------------*/
    .tx-head-title {
        font-size: 35px;
    }
    .cus-hv-bg-pro .cus-f-22 {
        font-size: 18px;
    }
    .cus-hv-bg-pro span {
        font-size: 12px;
    }
    .cus-sm-project {
        font-size: 10px;
        max-width: 110px;
        padding: 8px 16px;
        border: 2px solid rgb(145, 174, 29);
    }
    .cus-hv-bg-pro .w3-margin-top {
        margin-top: 12px !important;
    }
    .cus-hv-bg-pro h3 {
        margin-top: 5px;
    }
    .cus-news-home article {
        height: 230px;
    }
}

/*---computer ----*/

@media (min-width: 1200px) {
    .w3-container {
        width: 1196px;
    }
    #slider ul {
        height: 100vh;
    }
    #slider ul li img {
        height: 100vh;
        width: 100vw;
    }
    .cus-im-detail {
        object-fit: cover;
        object-position: center;
        height: 100vh;
        width: 100vw;
    }
    
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .tx-ser-page p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .news-page .w3-card {
        height: 496px;
    }
}
   
/* Responsive sliveshow */
@keyframes progressBar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}