/*--------------------------------------------------------------
>>> RESPONSIVE STYLE FOR ALL PAGES AND LAYOUTS
--------------------------------------------------------------*/

@media (max-width: 1599.98px) {}

@media (max-width: 1399.98px) {
    .admin-site-header .nav-item.dropdown:last-child .nav-link~.dropdown-menu {
        left: auto;
        right: 0;
    }
}

@media (max-width: 1199.98px) {
    .hero-title {
        font-size: 42px;
        line-height: 65px;
    }

    .top-info-bar {
        padding: 12px 0;
        font-size: 15px;
    }

    .site-logo {
        max-height: 75px;
    }

    .offcanvas-title .site-logo {
        max-height: 80px;
    }

    .ctm-outline-btn {
        font-size: 17px;
    }

    .nav-wrapper .nav-item a {
        font-size: 17px;
    }

    .header-main {
        padding: 20px 0;
    }

    .conDetail p {
        font-size: 14px;
        line-height: 22px;
    }

    /* ********************* hero-slider ******************** */
    .hero-slider {
        margin-top: -40px;
    }

    /* ****************** welcome-sec **************** */
    .wel-img img {
        max-width: 400px;
        max-height: 400px;
    }

    .wel-overlay-img img {
        max-height: 180px;
    }

    .wel-overlay-img {
        margin-top: -170px;
    }

    .wel-overlay-wrapper {
        border: 10px solid #fff;
    }

    /* **************** our services section ************* */
    .our-services-section .sec-description {
        margin-bottom: 10px;
        font-size: 18px;
    }

    /* ***************** testimonial-section *************** */
    .testimonial-slider .owl-dots {
        padding-left: 50px;
        padding-top: 0;
    }

    /* **************** faq-section **************** */
    .faq-left-card-img {
        height: auto;
    }

    .faq-section .accordion-button {
        padding: 15px 15px;
        padding-right: 40px;
    }

    /* **************** admin header **************** */
    .admin-site-header .header-main {
        padding: 10px 0;
    }

    .site-header .nav-wrapper .nav-item a {
        padding: 18px 12px !important;
        font-size: 16px;
    }

    .site-header .nav-wrapper .nav-item:last-child .dropdown-menu {
        left: auto;
        right: 0;
    }

    /* ********************* contact page ******************** */
    .form-card-body.contact-card {
        padding-right: 30px;
    }

    /* admin page */
    .printing-services-box-content {
        padding: 40px 20px;
    }

    /********************** visiting card *****************************/
    .card-order-btn {
        height: 40px;
        width: 40px;
        margin-top: 10px;
        /* margin-bottom: 10px; */
    }
}

@media (max-width: 991.98px) {

    /********************** Common *****************************/
    .py-80 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .pt-80 {
        padding-top: 50px;
    }

    .pb-80 {
        padding-bottom: 50px;
    }

    .my-80 {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .mt-80 {
        margin-top: 50px;
    }

    .mb-80 {
        margin-bottom: 50px;
    }

    .nav-wrapper .vr {
        display: none;
    }

    .ctm-btn {
        padding: 16px 32px;
        font-size: 16px;
        font-weight: 500;
    }

    .section-title {
        font-size: 38px;
        line-height: 1.4em;
    }

    .hero-section.common-hero {
        padding: 40px 0;
    }

    [aria-labelledby="offcanvasNavbarLabel"][aria-modal="true"] body {
        padding-right: 0 !important;
    }

    /********************** header  *****************************/
    .header-main {
        padding: 12px 0;
    }

    .offcanvas-header {
        border-bottom: 1px solid var(--bg-gray-light);
    }

    .offcanvas-header .btn-close {
        padding: 10px !important;
        color: var(--main-white);
        background: var(--main-primary);
        border: 0;
        font-size: 20px;
        line-height: 20px;
        margin-right: 0;
        font-weight: 600;
        border-radius: .375rem;
        opacity: 1;
        transition: all 0.4s ease-in-out;
    }

    .offcanvas-header .btn-close:focus,
    .offcanvas-header .btn-close:hover {
        color: var(--main-primary);
        background: var(--accent-color);
        box-shadow: none;
        outline: none;
    }

    .navbar-nav.nav-link {
        justify-content: start !important;
        align-items: start !important;
        row-gap: 8px;
    }

    .nav-wrapper .nav-item,
    .nav-wrapper .nav-item a {
        width: 100%;
    }

    .nav-wrapper .nav-item a {
        padding: 0;
        font-size: 16px;
        color: var(--main-primary);
    }

    .nav-wrapper .nav-item a:hover,
    .nav-wrapper .nav-item a.active {
        color: var(--accent-color);
    }

    .site-header .nav-wrapper .nav-item:first-child a {
        padding-top: 0 !important;
    }

    .site-header .nav-wrapper .nav-item a {
        padding: 13px 12px 0 !important;
        padding-left: 0 !important;
    }

    .site-header .nav-wrapper .dropdown-menu {
        position: unset;
        visibility: visible;
        opacity: 1;
        margin-top: 5px;
        border: none !important;
        padding: 0 15px !important;
        display: none;

        &.show {
            display: block;
            margin-bottom: 10px;
        }
    }

    .site-header .nav-wrapper .dropdown-menu li {
        .dropdown-item {
            padding: 10px 0 !important;
            font-size: 15px;
        }

        &:first-child .dropdown-item {
            padding-top: 0 !important;
        }

        &:last-child .dropdown-item {
            padding-bottom: 0 !important;
            border-bottom: none !important;
        }
    }

    .hero-title {
        font-size: 40px;
    }

    .sec-title {
        font-size: 30px;
    }

    /* **************** footer *************** */
    .footer-description {
        border-right: none;
    }

    .copyright-panel::after {
        display: none;
    }

    .copyright-panel p {
        padding-top: 0;
    }

    .copyright-panel {
        border-top: 12px solid #fff;
    }

    /* ******************* hero-sec ****************** */
    .hero-slider {
        margin-top: 0;
    }

    .news-letter .sec-title {
        font-size: 38px;
    }

    /* ****************** welcome-sec **************** */
    .wel-img img {
        max-width: 400px;
        max-height: 400px;
    }

    /* ************* why choose us section *********** */
    .progress-report span {
        font-size: 18px;
    }

    .progress-report h5 {
        font-size: 18px;
    }

    /* ************ widget counter section *********** */
    .counter-box {
        padding: 10px 10px;
    }

    .counter-number {
        font-size: 32px;
        margin-bottom: 0;
    }

    .counter-title {
        font-size: 16px;
        margin-top: 0;
    }

    .counter-wrapper {
        padding: 0px;
    }

    .counter-section .right-wave {
        right: -500px;

        &:nth-child(2) {
            right: -500px;
        }

        &:nth-child(3) {
            right: -500px;
        }

        &:nth-child(4) {
            right: -500px;
        }

        &:nth-child(5) {
            right: -500px;
        }

        &:nth-child(6) {
            right: -500px;
        }
    }

    /* **************** faq-section **************** */
    .faq-left-card {
        padding: 15px;
    }

    .faq-left-card::after {
        display: none;
    }

    /* **************** our-vision-section ************* */
    .our-vision-section .tab-content {
        color: var(--main-white);
        padding: 0;
    }

    /* ********************* contact page ******************** */
    .form-card-body.contact-card {
        padding-right: 0;
    }

    .contact-info-card {
        padding: 20px;
    }

    .contact-info-item {
        margin-bottom: 10px;
    }

    .contact-info-item-title {
        font-size: 18px;
    }

    .contact-info-item-text {
        font-size: 16px;
    }

    .contact-info-follow-title {
        font-size: 24px;
    }

    .contact-info-card .social-icon {
        font-size: 16px;
        padding: 6px;
        width: 35px;
        height: 35px;
    }

    .currency-input-wrapper {
        font-size: 26px;
    }

    /********************** visiting card *****************************/
    .visiting-cards-detail-section .visiting-card-type-title {
        font-size: 22px;
    }

    .visiting-card-thumbnail-img {
        height: 175px;
        max-height: 175px;
    }

    .show-processing-log {
        justify-content: space-between;
        flex: 1 1 auto;
    }

    /********************** processing log *****************************/
    .timeline-content {
        width: calc(100% - 50px);
    }

    .assets-title {
        font-size: 24px;
    }

    .assets-detail {
        font-size: 30px;
    }

    .product-detail-form {
        &::before {
            right: -30px;
            left: -30px;
        }
    }

    /* contact us new design */
    .customer-care-section .sec-title {
        font-size: 22px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {}

@media (max-width: 767.98px) {

    /********************** Common *****************************/
    .sec-title {
        font-size: 25px;
    }

    .sec-subtitle {
        font-size: 18px;
    }

    .hero-title {
        font-size: 32px;
        line-height: 48px;
    }

    .site-logo {
        max-height: 60px;
    }

    .ctm-btn {
        padding: 10px 25px;
        font-size: 15px;
    }

    .section-title {
        font-size: 32px;
        line-height: 1.4em;
    }

    .news-letter .sec-title {
        font-size: 32px;
    }

    .division-name,
    .member-count,
    .membership-type,
    .member-id,
    .account-balance,
    .user-greeting {
        font-size: 12px;
        line-height: 1.2em;
        margin-bottom: 3px;
    }

    .logout-btn {
        height: 35px;
        width: 35px;

        img {
            width: 18px;
            height: 18px
        }
    }

    /* **************** our-vision-section ******* */
    .our-vision-section .tab-content>.tab-pane {
        display: block;
        height: auto;
        opacity: 1;
    }

    /* ***************** testimonial-section *************** */
    .testimonial-img {
        min-width: 180px;
        min-height: 200px;
    }

    /* ************************** faq-section ************************ */
    .faq-section .accordion-button {
        padding-right: 38px;
        line-height: 36px;
    }

    .faq-section .accordion-button::before,
    .faq-section .accordion-button::after {
        right: 18px;
        height: 19px;
        width: 3px;
    }

    .faq-section .accordion-button::before {
        right: 10px;
        width: 19px;
        height: 3px;
    }

    /* ********************* contact page ******************** */
    .create-account-form-section.contact-section {
        padding: 0;
    }

    .contact-info-card {

        &::before,
        &::after {
            display: none;
        }
    }

    /* admin page */
    .printing-services-box-content {
        padding: 25px 15px;
    }

    .printing-services-section .section-title {
        font-size: 25px;
    }

    /****************************** add money page ******************************/
    .wallet-topup-header,
    .wallet-topup-body,
    .wallet-topup-footer {
        padding: 15px;
    }

    .wallet-topup-title {
        font-size: 22px;
    }

    .bank-details-heading {
        font-size: 16px;

        span {
            font-size: 18px;
        }
    }

    .submit-button-group {
        gap: 20px;
        padding: 25px 15px;
        text-align: center;
    }

    .bank-name-label-group,
    .bank-name-group {
        padding: 10px 15px;
        font-size: 16px;
    }

    .pay-via-qr {
        font-size: 16px;
    }

    .wallet-note-item {
        font-size: 16px;
        margin-bottom: 7px;
        line-height: 1.3em;
    }

    .currency-input-wrapper {
        font-size: 22px;
    }

    /********************** add order form *****************************/
    input[type="number"] {
        max-width: 150px !important;
    }

    .product-detail-label,
    .add-order-form-group .select2,
    .product-detail-form .select2,
    .product-detail-field {
        padding: 10px;
        min-height: 50px;
        font-size: 16px;
    }

    .select-file-opt label {
        font-size: 18px;
    }

    .select-file-opt span {
        font-size: 15px;
    }

    .product-accordion .accordion-button {
        font-size: 16px;
    }

    .product-accordion .accordion-item {
        margin-bottom: 15px;
    }

    .select2 .select2-selection .select2-selection__arrow {
        width: 14px;
    }

    .product-accordion .accordion-body .product-label {
        min-width: 140px;
        font-size: 16px;
    }

    .card-ribbon-text {
        width: 65px;
        height: 70px;
        font-size: 12px;
        line-height: 0.6;
        left: -11.7px;

        b {
            font-size: 20px;
        }
    }

    .btn-container {
        scale: 1;
        opacity: 1;
        visibility: visible;
        transition: all 0.4s ease;
    }

    /********************** processing log *****************************/
    .processing-log-timeline-title {
        margin-bottom: 0 !important;
    }

    .timeline {
        padding-top: 57px;
    }

    .timeline-item.blank-timeline {
        display: none;
    }

    .timeline-item {
        height: auto;
        margin-bottom: 70px;
        margin-left: 13px;
        min-height: 100px;
    }

    .timeline-item.timeline-circle {
        max-width: 100%;
        width: auto;
        justify-content: space-between;
    }

    .timeline-count {
        margin: 0;
    }

    .timeline-border {
        right: 29px;
        bottom: -35px;
        top: 64%;
        left: 50%;

        &::after {
            top: 100%;
            left: -33px;
            right: 95%;
            bottom: -38px;
        }
    }

    .timeline-circle {
        padding: 15px;
        padding-left: var(--rl-padding);

        &:nth-child(odd) {
            padding-left: 15px;
            padding-right: var(--rl-padding);
            margin-right: 13px;

            .timeline-count {
                margin: 0 10px 0 0;
            }

            .timeline-border {
                left: 29px;
                bottom: -35px;
                right: 50%;
            }

            &::after {
                right: 10px;
            }
        }

        &::before {
            top: 50%;
            transform: translateY(-50%);
            left: -10px;
            width: var(--before-width);
            height: var(--before-width);
        }

        &.right-circle::before {
            right: -10px;
        }

        &::after {
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
            width: var(--after-width);
            height: var(--after-width);
        }
    }

    .timeline-content-title {
        font-size: 18px;
    }

    .timeline-content-detail {
        font-size: 14px;
    }

    .slider-container {
        min-height: 250px;

        img {
            min-height: 250px;
        }
    }

    .nav-pills .custom-navtab-btn {
        padding: 11px 24px;
    }

    .order-production-card {
        .wallet-topup-form {
            padding: 0 15px;
        }
    }

    .file-details-container {
        justify-content: space-around;
        gap: 15px;
        flex-wrap: wrap;
        padding: 20px 15px;
        margin: 20px 0;
    }

    .upload-order-production-container {
        padding: 0 15px;
    }

    .file-input.form-control {
        padding: 10px 25px 12px 0;
    }

    .quantity-steps-btn-area {
        top: 10px;
        left: 127px;
    }

    /* contact us new design */
    .customer-care-section .sec-title {
        font-size: 20px;
    }
}


@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

@media (max-width: 575.98px) {

    /********************** Common *****************************/
    .sec-title {
        font-size: 20px;
        font-weight: 500;
    }

    .sec-subtitle {
        font-size: 17px;
    }

    .sec-description {
        font-size: 16px;
        line-height: 26px;
    }

    .small-head {
        font-size: 19px;
        font-weight: 500;
    }

    .ctm-btn {
        padding: 8px 16px;
        font-size: 16px;
    }

    .pb-40 {
        padding-bottom: 30px;
    }

    .pt-40 {
        padding-top: 30px;
    }

    .py-40 {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .pb-80 {
        padding-bottom: 45px;
    }

    .pt-80 {
        padding-top: 45px;
    }

    .py-80 {
        padding-bottom: 45px;
        padding-top: 45px;
    }

    .my-80 {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .mt-80 {
        margin-top: 30px;
    }

    .mb-80 {
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 26px;
    }

    .form-label,
    .form-select,
    .form-control {
        font-size: 16px;
        padding: 12px 15px;
    }

    .news-letter .ctm-btn {
        padding: 12px 15px;
    }

    /********************** header  *****************************/
    .hero-title {
        font-size: 20px;
        line-height: 32px;
    }

    .wel-img img {
        max-width: 100%;
        max-height: 100%;
    }

    .wel-overlay-img img {
        max-height: 100px;
    }

    .wel-overlay-img {
        margin-top: -100px;
    }

    .header-top-container {
        flex-wrap: wrap;
        justify-content: center !important;
        flex-direction: column;
    }

    .division-info {
        margin-bottom: 8px;
        width: 100%;
        padding-bottom: 7px;
        border-bottom: 1px solid #d5d5d578;
    }

    .user-info-section {
        gap: 20px;
        width: 100%;
    }

    .division-name,
    .member-count,
    .membership-type,
    .member-id,
    .account-balance,
    .user-greeting {
        margin-bottom: 4px;
    }

    /*
  * <=======================================>
  * => Create Account Page STYLE
  */
    .approverules-list {
        padding-left: 25px;
    }

    .approverule-item {
        font-size: 16px;
    }

    .form-card-header {
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center;
        gap: 15px;
    }

    .form-card-title {
        font-size: 24px;
    }

    .form-card-header .form-label.mb-0 {
        font-size: 16px;
        margin-right: 10px;
    }

    .form-card .form-check {
        font-size: 16px;
        line-height: 1.4em;
    }

    .login-with-otp {
        font-size: 15px;
    }

    .forget-pass-card-body .ctm-btn {
        padding: 12px 30px;
    }

    /* ************* why choose us section *********** */
    .progress-report span {
        font-size: 16px;
    }

    .progress-report h5 {
        font-size: 16px;
    }

    /* **************** our-vision-section ************* */
    .our-services-section .sec-description {
        font-size: 16px;
    }

    /* ************ widget counter section *********** */
    .counter-number {
        font-size: 26px;
    }

    .service-card .service-icon {
        height: 50px;
        width: 50px;
    }

    .service-icon img {
        height: 25px;
    }

    .counter-section .right-wave {
        right: -600px;

        &:nth-child(2) {
            right: -600px;
        }

        &:nth-child(3) {
            right: -600px;
        }

        &:nth-child(4) {
            right: -600px;
        }

        &:nth-child(5) {
            right: -600px;
        }

        &:nth-child(6) {
            right: -600px;
        }
    }

    /* ***************** testimonial-section *************** */
    .testimonial-img {
        min-width: 100px;
        min-height: 150px;
        max-width: 120px;
        max-height: 150px;
    }

    .faq-card-head {
        font-size: 20px;
        line-height: 36px;
    }

    /* ADmin Page */
    .printing-services-section .section-title {
        font-size: 20px;
        line-height: 1.2em;
    }

    .printing-services-box-text {
        font-size: 16px;
    }

    /********************** visiting card *****************************/
    .visiting-cards-detail-section .visiting-card-type-title {
        font-size: 19px;
    }

    .visiting-card-type-head .card-qty {
        font-size: 15px;
    }

    .visiting-card-type-card-content h6 {
        font-size: 17px;
    }

    .visiting-card-type-card {
        padding: 12px;
    }

    .show-processing-log {
        justify-content: center;
        flex: 1 1 auto;
    }

    .current-status {
        font-size: 16px;
    }

    .assets-title {
        font-size: 18px;
    }

    .assets-detail {
        font-size: 24px;
    }

    .file-input.form-control {
        padding: 10px 0px 12px 0;
    }

    .product-desc-title {
        margin-bottom: 8px;
    }

    .product-desc-listing .product-label-about {
        font-size: 16px;
        line-height: 1.3em;
    }

    .product-desc-listing .product-label {
        font-size: 16px;
        line-height: 1.3em;

        &:first-child {
            margin-top: 8px;
        }

        &:not(:last-child) {
            margin-bottom: 4px;
        }
    }

    .product-detail-fieldinput[type="number"] {
        max-width: 130px !important;
    }

    /* contact us new design */
    .customer-care-section .sec-title {
        font-size: 18px;
    }

    .customer-care-card h5 {
        font-size: 18px;
    }

    .customer-care-card p {
        font-size: 14px;
    }

    .customer-care-card .cc-contact-number a {
        font-size: 16px;
    }

    .customer-care-card .cc-notes {
        font-size: 12px;
    }

    .customer-care-card .cc-card-icon img {
        max-width: 30px;
        max-height: 30px;
    }

}

@media (max-width: 475.98px) {

    /********************** header  *****************************/
    .navbar-brand {
        margin: 0;
    }

    .offcanvas-title {
        display: block;
    }

    .offcanvas-header .btn-close {
        padding: 6px !important;
        font-size: 16px;
        line-height: 16px;
    }



    /********************** processing log page  *****************************/
    .timeline-item {
        margin-left: 4px;
        min-height: 70px;
        margin-bottom: 46px;

        &:nth-child(odd) {
            padding-left: 10px;
            margin-right: 4px;
        }
    }

    .timeline-content {
        width: calc(100% - 25px);
        z-index: 2;
    }

    .timeline-border {
        right: 22px;
        bottom: -23px;
        top: calc(var(--rl-padding) + -35%);
        left: 48px;
        z-index: 1;
        opacity: 0.6;

        &::after {
            left: -33px;
            right: 95%;
            bottom: -48px;
        }
    }

    .timeline-circle {
        padding: 10px;
        padding-left: var(--rl-padding);

        &:nth-child(odd) {
            .timeline-border {
                left: 21px;
                bottom: -23px;
                right: 65px;

                &::after {
                    left: 99.5%;
                    right: -50.5px;
                    /* bottom: -54px; */
                    bottom: calc(var(--rl-padding) - 270%);
                }
            }
        }
    }

    .timeline-content-title {
        font-size: 14px;
    }

    .details-btn {
        font-size: 12px;
    }

    .timeline-content-detail {
        font-size: 10px;
    }

    .timeline-count {
        height: 25px;
        width: 25px;
        line-height: 26px;
        font-size: 10px;
        position: relative;
        z-index: 2;
    }
}

@media (max-width: 380px) {
    .admin-assets-section {
        padding: 30px 0;
    }

    .assets-title {
        font-size: 15px;
    }

    .assets-detail {
        font-size: 20px;
    }
}

@media (max-width: 360px) {

    .create-account-form-section .btn-area label[for="login-btn"] {
        padding-top: 0;
    }

    .create-account-form-section .login-btn {
        width: 100%;
    }
}