```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM GLOBAL RESPONSIVE SYSTEM
   ------------------------------------------------------------
   File: /assets/css/responsive/responsive.css
   Full Path:
   /public_html/assets/css/responsive/responsive.css

   Version: 1.0

   Purpose:
   - Global Responsive Overrides
   - Desktop / Laptop / Tablet / Mobile Optimization
   - Fluid Typography
   - Responsive Containers
   - Grid Normalization
   - Section Spacing
   - Media Safety
   - Form Safety
   - Table Overflow
   - Touch Optimization
   - Accessibility
   - Print Support

   IMPORTANT:
   Load this file AFTER all base, layout, section,
   component and animation CSS files.

   Recommended:
   responsive.css = final responsive override layer.
   ============================================================ */


/* ============================================================
   01. GLOBAL RESPONSIVE SAFETY
   ============================================================ */

html {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}


/* ============================================================
   02. RESPONSIVE BOX SAFETY
   ============================================================ */

*,
*::before,
*::after {
    min-width: 0;
}


/* ============================================================
   03. RESPONSIVE MEDIA
   ============================================================ */

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}


img,
video {
    height: auto;
}


/* ============================================================
   04. RESPONSIVE EMBEDS
   ============================================================ */

iframe,
embed,
object {
    max-width: 100%;
}


/* ============================================================
   05. RESPONSIVE FORM CONTROLS
   ============================================================ */

input,
select,
textarea,
button {
    max-width: 100%;
}


/* ============================================================
   06. LONG TEXT SAFETY
   ============================================================ */

p,
li,
a,
span,
address,
td,
th {
    overflow-wrap: break-word;
}


/* ============================================================
   07. GLOBAL FLUID CONTAINER
   ============================================================ */

.container,
.site-container,
.section-container {
    width: 100%;

    margin-right: auto;
    margin-left: auto;

    padding-right:
        var(--container-padding, 24px);

    padding-left:
        var(--container-padding, 24px);
}


/* ============================================================
   08. RESPONSIVE CONTAINER WIDTHS
   ============================================================ */

@media (min-width: 576px) {

    .container,
    .site-container,
    .section-container {
        max-width: 540px;
    }

}


@media (min-width: 768px) {

    .container,
    .site-container,
    .section-container {
        max-width: 720px;
    }

}


@media (min-width: 992px) {

    .container,
    .site-container,
    .section-container {
        max-width: 960px;
    }

}


@media (min-width: 1200px) {

    .container,
    .site-container,
    .section-container {
        max-width: 1140px;
    }

}


@media (min-width: 1400px) {

    .container,
    .site-container,
    .section-container {
        max-width: 1320px;
    }

}


/* ============================================================
   09. ULTRA WIDE CONTAINER
   ============================================================ */

@media (min-width: 1600px) {

    .container,
    .site-container,
    .section-container {
        max-width: 1380px;
    }

}


/* ============================================================
   10. RESPONSIVE SECTION SPACING
   ============================================================ */

.section,
.section-padding,
.page-section {
    padding-top:
        clamp(4.5rem, 7vw, 7.5rem);

    padding-bottom:
        clamp(4.5rem, 7vw, 7.5rem);
}


/* ============================================================
   11. SMALL SECTION SPACING
   ============================================================ */

.section-sm,
.section-padding-sm {
    padding-top:
        clamp(3rem, 5vw, 5rem);

    padding-bottom:
        clamp(3rem, 5vw, 5rem);
}


/* ============================================================
   12. LARGE SECTION SPACING
   ============================================================ */

.section-lg,
.section-padding-lg {
    padding-top:
        clamp(5.5rem, 9vw, 9rem);

    padding-bottom:
        clamp(5.5rem, 9vw, 9rem);
}


/* ============================================================
   13. RESPONSIVE HEADING SAFETY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    max-width: 100%;

    text-wrap: balance;
}


/* ============================================================
   14. RESPONSIVE PARAGRAPH
   ============================================================ */

p {
    max-width: 100%;
}


/* ============================================================
   15. RESPONSIVE GRID BASE
   ============================================================ */

.responsive-grid {
    display: grid;

    grid-template-columns:
        repeat(
            var(--grid-columns, 3),
            minmax(0, 1fr)
        );

    gap:
        var(--grid-gap, 24px);
}


/* ============================================================
   16. RESPONSIVE TWO COLUMN
   ============================================================ */

.two-column-layout {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: center;
}


/* ============================================================
   17. RESPONSIVE THREE COLUMN
   ============================================================ */

.three-column-layout {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(1.25rem, 2.5vw, 2rem);
}


/* ============================================================
   18. RESPONSIVE FOUR COLUMN
   ============================================================ */

.four-column-layout {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        clamp(1rem, 2vw, 1.75rem);
}


/* ============================================================
   19. RESPONSIVE AUTO GRID
   ============================================================ */

.auto-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, var(--grid-min, 260px)),
                1fr
            )
        );

    gap:
        var(--grid-gap, 24px);
}


/* ============================================================
   20. RESPONSIVE FLEX
   ============================================================ */

.responsive-flex {
    display: flex;

    align-items:
        var(--flex-align, center);

    justify-content:
        var(--flex-justify, space-between);

    gap:
        var(--flex-gap, 24px);
}


/* ============================================================
   21. RESPONSIVE GAP
   ============================================================ */

.responsive-gap {
    gap:
        clamp(1rem, 3vw, 2.5rem);
}


/* ============================================================
   22. RESPONSIVE IMAGE WRAPPER
   ============================================================ */

.responsive-image {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.responsive-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   23. RESPONSIVE VIDEO
   ============================================================ */

.responsive-video {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;
}


.responsive-video iframe,
.responsive-video video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    object-fit: cover;
}


/* ============================================================
   24. RESPONSIVE TABLE WRAPPER
   ============================================================ */

.table-responsive,
.responsive-table {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   25. TABLE MIN WIDTH
   ============================================================ */

.table-responsive table,
.responsive-table table {
    width: 100%;

    min-width: 680px;
}


/* ============================================================
   26. RESPONSIVE FORM GRID
   ============================================================ */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--form-gap, 18px);
}


/* ============================================================
   27. FULL WIDTH FORM FIELD
   ============================================================ */

.form-grid-full,
.form-field-full {
    grid-column:
        1 / -1;
}


/* ============================================================
   28. RESPONSIVE BUTTON GROUP
   ============================================================ */

.button-group,
.btn-group-responsive {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}


/* ============================================================
   29. RESPONSIVE CARD SAFETY
   ============================================================ */

.card,
.product-card,
.info-card,
.feature-card,
.contact-card {
    max-width: 100%;
}


/* ============================================================
   30. DESKTOP ONLY
   ============================================================ */

.desktop-only {
    display: block;
}


/* ============================================================
   31. TABLET ONLY
   ============================================================ */

.tablet-only {
    display: none;
}


/* ============================================================
   32. MOBILE ONLY
   ============================================================ */

.mobile-only {
    display: none;
}


/* ============================================================
   33. LARGE DESKTOP
   1400px+
   ============================================================ */

@media (min-width: 1400px) {

    :root {
        --container-padding:
            28px;
    }


    .section-heading {
        max-width:
            760px;
    }


    .section-heading-wide {
        max-width:
            920px;
    }


    .responsive-grid {
        gap:
            var(--grid-gap-lg, 28px);
    }

}


/* ============================================================
   34. ULTRA WIDE DESKTOP
   1600px+
   ============================================================ */

@media (min-width: 1600px) {

    :root {
        --container-padding:
            30px;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            7.5rem;

        padding-bottom:
            7.5rem;
    }

}


/* ============================================================
   35. LARGE LAPTOP / SMALL DESKTOP
   <= 1399.98px
   ============================================================ */

@media (max-width: 1399.98px) {

    :root {
        --container-padding:
            24px;
    }


    .four-column-layout {
        gap:
            20px;
    }


    .two-column-layout {
        gap:
            clamp(2rem, 4vw, 4rem);
    }

}


/* ============================================================
   36. LAPTOP
   <= 1199.98px
   ============================================================ */

@media (max-width: 1199.98px) {

    :root {
        --container-padding:
            22px;
    }


    .four-column-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .responsive-grid {
        --grid-columns:
            3;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            clamp(4rem, 6vw, 6rem);

        padding-bottom:
            clamp(4rem, 6vw, 6rem);
    }


    .section-lg,
    .section-padding-lg {
        padding-top:
            clamp(5rem, 7vw, 7rem);

        padding-bottom:
            clamp(5rem, 7vw, 7rem);
    }

}


/* ============================================================
   37. TABLET LANDSCAPE
   <= 991.98px
   ============================================================ */

@media (max-width: 991.98px) {

    :root {
        --container-padding:
            20px;
    }


    .desktop-only {
        display: none !important;
    }


    .tablet-only {
        display: block;
    }


    .responsive-grid {
        --grid-columns:
            2;
    }


    .three-column-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .two-column-layout {
        gap:
            2.5rem;
    }


    .responsive-flex {
        gap:
            20px;
    }


    .section-heading {
        max-width:
            680px;
    }


    .page-hero-content {
        max-width:
            720px;
    }


    .form-grid {
        gap:
            16px;
    }

}


/* ============================================================
   38. TABLET PORTRAIT
   <= 767.98px
   ============================================================ */

@media (max-width: 767.98px) {

    :root {
        --container-padding:
            18px;

        --grid-gap:
            18px;

        --form-gap:
            15px;
    }


    html {
        scroll-padding-top:
            80px;
    }


    .tablet-only {
        display: none !important;
    }


    .mobile-only {
        display: block;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            4.25rem;

        padding-bottom:
            4.25rem;
    }


    .section-sm,
    .section-padding-sm {
        padding-top:
            3rem;

        padding-bottom:
            3rem;
    }


    .section-lg,
    .section-padding-lg {
        padding-top:
            5rem;

        padding-bottom:
            5rem;
    }


    .two-column-layout,
    .three-column-layout,
    .four-column-layout {
        grid-template-columns:
            1fr;
    }


    .responsive-grid {
        --grid-columns:
            2;
    }


    .two-column-layout {
        gap:
            2rem;
    }


    .responsive-flex {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .form-grid {
        grid-template-columns:
            1fr;
    }


    .form-grid-full,
    .form-field-full {
        grid-column:
            auto;
    }


    .section-heading,
    .section-heading-wide {
        max-width:
            100%;
    }


    .button-group,
    .btn-group-responsive {
        align-items:
            stretch;
    }


    .page-hero-content {
        max-width:
            100%;
    }


    .table-responsive,
    .responsive-table {
        margin-right:
            -18px;

        margin-left:
            -18px;

        width:
            calc(100% + 36px);

        padding-right:
            18px;

        padding-left:
            18px;
    }

}


/* ============================================================
   39. LARGE MOBILE
   <= 575.98px
   ============================================================ */

@media (max-width: 575.98px) {

    :root {
        --container-padding:
            16px;

        --grid-gap:
            16px;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            3.75rem;

        padding-bottom:
            3.75rem;
    }


    .section-sm,
    .section-padding-sm {
        padding-top:
            2.75rem;

        padding-bottom:
            2.75rem;
    }


    .section-lg,
    .section-padding-lg {
        padding-top:
            4.5rem;

        padding-bottom:
            4.5rem;
    }


    .responsive-grid {
        --grid-columns:
            1;
    }


    .auto-grid {
        grid-template-columns:
            1fr;
    }


    .button-group,
    .btn-group-responsive {
        flex-direction:
            column;

        width:
            100%;
    }


    .button-group > *,
    .btn-group-responsive > * {
        width:
            100%;
    }


    .mobile-full-width {
        width:
            100% !important;
    }


    .mobile-text-center {
        text-align:
            center !important;
    }


    .mobile-text-left {
        text-align:
            left !important;
    }


    .table-responsive,
    .responsive-table {
        margin-right:
            -16px;

        margin-left:
            -16px;

        width:
            calc(100% + 32px);

        padding-right:
            16px;

        padding-left:
            16px;
    }

}


/* ============================================================
   40. STANDARD MOBILE
   <= 479.98px
   ============================================================ */

@media (max-width: 479.98px) {

    :root {
        --container-padding:
            15px;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            3.5rem;

        padding-bottom:
            3.5rem;
    }


    .section-lg,
    .section-padding-lg {
        padding-top:
            4.15rem;

        padding-bottom:
            4.15rem;
    }


    .responsive-gap {
        gap:
            1rem;
    }


    .two-column-layout {
        gap:
            1.75rem;
    }


    .table-responsive,
    .responsive-table {
        margin-right:
            -15px;

        margin-left:
            -15px;

        width:
            calc(100% + 30px);

        padding-right:
            15px;

        padding-left:
            15px;
    }


    .table-responsive table,
    .responsive-table table {
        min-width:
            620px;
    }

}


/* ============================================================
   41. SMALL MOBILE
   <= 374.98px
   ============================================================ */

@media (max-width: 374.98px) {

    :root {
        --container-padding:
            13px;

        --grid-gap:
            14px;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            3.25rem;

        padding-bottom:
            3.25rem;
    }


    .section-sm,
    .section-padding-sm {
        padding-top:
            2.5rem;

        padding-bottom:
            2.5rem;
    }


    .section-lg,
    .section-padding-lg {
        padding-top:
            4rem;

        padding-bottom:
            4rem;
    }


    .button-group,
    .btn-group-responsive {
        gap:
            9px;
    }


    .table-responsive,
    .responsive-table {
        margin-right:
            -13px;

        margin-left:
            -13px;

        width:
            calc(100% + 26px);

        padding-right:
            13px;

        padding-left:
            13px;
    }

}


/* ============================================================
   42. EXTRA SMALL MOBILE
   <= 319.98px
   ============================================================ */

@media (max-width: 319.98px) {

    :root {
        --container-padding:
            10px;
    }


    .section,
    .section-padding,
    .page-section {
        padding-top:
            3rem;

        padding-bottom:
            3rem;
    }


    .table-responsive,
    .responsive-table {
        margin-right:
            -10px;

        margin-left:
            -10px;

        width:
            calc(100% + 20px);

        padding-right:
            10px;

        padding-left:
            10px;
    }

}


/* ============================================================
   43. MOBILE LANDSCAPE
   ============================================================ */

@media (
    max-width: 767.98px
) and (
    orientation: landscape
) {

    .section,
    .section-padding,
    .page-section {
        padding-top:
            3.25rem;

        padding-bottom:
            3.25rem;
    }


    .section-lg,
    .section-padding-lg {
        padding-top:
            4rem;

        padding-bottom:
            4rem;
    }


    .page-hero {
        min-height:
            auto;
    }

}


/* ============================================================
   44. SHORT HEIGHT DEVICES
   ============================================================ */

@media (max-height: 650px) {

    .full-screen-section,
    .min-vh-100 {
        min-height:
            auto;
    }


    .page-hero {
        min-height:
            auto;
    }

}


/* ============================================================
   45. TOUCH DEVICE OPTIMIZATION
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
        -webkit-tap-highlight-color:
            transparent;
    }


    button,
    .btn,
    [role="button"] {
        touch-action:
            manipulation;
    }


    .hover-only {
        display:
            none !important;
    }

}


/* ============================================================
   46. FINE POINTER DEVICE
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .touch-only {
        display:
            none !important;
    }

}


/* ============================================================
   47. MOBILE FORM ZOOM PREVENTION
   iOS Safari zooms inputs below 16px.
   ============================================================ */

@media (max-width: 767.98px) {

    input,
    select,
    textarea {
        font-size:
            16px;
    }

}


/* ============================================================
   48. RESPONSIVE MODAL SAFETY
   ============================================================ */

@media (max-width: 767.98px) {

    .modal-dialog,
    .custom-modal-dialog {
        width:
            calc(100% - 28px);

        max-width:
            none;

        margin-right:
            14px;

        margin-left:
            14px;
    }

}


/* ============================================================
   49. RESPONSIVE ACCORDION SAFETY
   ============================================================ */

@media (max-width: 575.98px) {

    .accordion-button,
    .faq-question {
        gap:
            12px;
    }

}


/* ============================================================
   50. RESPONSIVE CARD CONTENT
   ============================================================ */

@media (max-width: 575.98px) {

    .card-body,
    .product-card-body,
    .info-card-body,
    .feature-card-body {
        max-width:
            100%;
    }

}


/* ============================================================
   51. RESPONSIVE BREADCRUMBS
   ============================================================ */

@media (max-width: 575.98px) {

    .breadcrumb,
    .breadcrumbs,
    .breadcrumb-list {
        flex-wrap:
            wrap;
    }

}


/* ============================================================
   52. RESPONSIVE PAGINATION
   ============================================================ */

@media (max-width: 575.98px) {

    .pagination,
    .pagination-list {
        flex-wrap:
            wrap;

        justify-content:
            center;
    }

}


/* ============================================================
   53. RESPONSIVE STATS
   ============================================================ */

@media (max-width: 991.98px) {

    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 575.98px) {

    .stats-grid {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   54. RESPONSIVE TIMELINE
   ============================================================ */

@media (max-width: 767.98px) {

    .timeline {
        padding-left:
            24px;
    }


    .timeline::before {
        left:
            6px;
    }


    .timeline-item {
        width:
            100%;

        margin-left:
            0;

        padding-right:
            0;

        padding-left:
            24px;
    }

}


/* ============================================================
   55. RESPONSIVE CTA
   ============================================================ */

@media (max-width: 767.98px) {

    .cta-content,
    .cta-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            24px;
    }

}


@media (max-width: 575.98px) {

    .cta-content,
    .cta-inner {
        align-items:
            stretch;
    }

}


/* ============================================================
   56. RESPONSIVE SOCIAL LINKS
   ============================================================ */

@media (max-width: 575.98px) {

    .social-links {
        flex-wrap:
            wrap;
    }

}


/* ============================================================
   57. RESPONSIVE PRODUCT FILTER
   ============================================================ */

@media (max-width: 767.98px) {

    .product-filter,
    .product-filter-list {
        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        justify-content:
            flex-start;

        padding-bottom:
            5px;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    .product-filter::-webkit-scrollbar,
    .product-filter-list::-webkit-scrollbar {
        display:
            none;
    }


    .product-filter > *,
    .product-filter-list > * {
        flex:
            0 0 auto;
    }

}


/* ============================================================
   58. RESPONSIVE PRODUCT GRID
   ============================================================ */

@media (max-width: 991.98px) {

    .products-grid,
    .product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 575.98px) {

    .products-grid,
    .product-grid {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   59. RESPONSIVE CONTACT GRID
   ============================================================ */

@media (max-width: 991.98px) {

    .contact-grid,
    .contact-layout {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   60. RESPONSIVE ABOUT GRID
   ============================================================ */

@media (max-width: 991.98px) {

    .about-grid,
    .about-layout {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }

}


/* ============================================================
   61. RESPONSIVE PRODUCTION GRID
   ============================================================ */

@media (max-width: 991.98px) {

    .production-grid,
    .production-layout {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }

}


/* ============================================================
   62. RESPONSIVE EXPORT GRID
   ============================================================ */

@media (max-width: 991.98px) {

    .export-grid,
    .export-layout {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }

}


/* ============================================================
   63. RESPONSIVE FOUNDER GRID
   ============================================================ */

@media (max-width: 991.98px) {

    .founder-grid,
    .founder-layout {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }

}


/* ============================================================
   64. MOBILE ORDER HELPERS
   ============================================================ */

@media (max-width: 991.98px) {

    .mobile-order-first {
        order:
            -1;
    }


    .mobile-order-last {
        order:
            99;
    }

}


/* ============================================================
   65. MOBILE HIDE
   ============================================================ */

@media (max-width: 767.98px) {

    .hide-mobile {
        display:
            none !important;
    }

}


/* ============================================================
   66. TABLET HIDE
   ============================================================ */

@media (
    min-width: 768px
) and (
    max-width: 991.98px
) {

    .hide-tablet {
        display:
            none !important;
    }

}


/* ============================================================
   67. DESKTOP HIDE
   ============================================================ */

@media (min-width: 992px) {

    .hide-desktop {
        display:
            none !important;
    }

}


/* ============================================================
   68. MOBILE DISPLAY BLOCK
   ============================================================ */

@media (max-width: 767.98px) {

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


    .show-mobile-flex {
        display:
            flex !important;
    }


    .show-mobile-grid {
        display:
            grid !important;
    }

}


/* ============================================================
   69. RESPONSIVE TEXT ALIGNMENT
   ============================================================ */

@media (max-width: 767.98px) {

    .text-md-center {
        text-align:
            center !important;
    }


    .text-md-left {
        text-align:
            left !important;
    }

}


/* ============================================================
   70. MOBILE BORDER RADIUS
   ============================================================ */

@media (max-width: 575.98px) {

    .mobile-radius-md {
        border-radius:
            var(--radius-md) !important;
    }


    .mobile-radius-lg {
        border-radius:
            var(--radius-lg) !important;
    }

}


/* ============================================================
   71. MOBILE SAFE AREA
   ============================================================ */

@supports (
    padding: max(0px)
) {

    .safe-area-horizontal {
        padding-right:
            max(
                var(--container-padding, 16px),
                env(safe-area-inset-right)
            );

        padding-left:
            max(
                var(--container-padding, 16px),
                env(safe-area-inset-left)
            );
    }


    .safe-area-bottom {
        padding-bottom:
            max(
                16px,
                env(safe-area-inset-bottom)
            );
    }

}


/* ============================================================
   72. DARK MODE SYSTEM SUPPORT
   Only for native browser UI controls.
   Website theme remains brand-controlled.
   ============================================================ */

@media (prefers-color-scheme: dark) {

    input,
    textarea,
    select {
        color-scheme:
            light;
    }

}


/* ============================================================
   73. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto !important;
    }


    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;
    }

}


/* ============================================================
   74. HIGH CONTRAST SUPPORT
   ============================================================ */

@media (forced-colors: active) {

    button,
    .btn,
    input,
    textarea,
    select {
        border:
            1px solid ButtonText;
    }


    a {
        text-decoration:
            underline;
    }

}


/* ============================================================
   75. PRINT GLOBAL
   ============================================================ */

@media print {

    html,
    body {
        overflow:
            visible !important;

        width:
            auto !important;

        background:
            #ffffff !important;
    }


    body {
        color:
            #000000 !important;

        font-size:
            11pt;
    }


    .container,
    .site-container,
    .section-container {
        width:
            100% !important;

        max-width:
            none !important;

        padding-right:
            0 !important;

        padding-left:
            0 !important;
    }


    .section,
    .section-padding,
    .page-section,
    .section-sm,
    .section-padding-sm,
    .section-lg,
    .section-padding-lg {
        padding-top:
            20px !important;

        padding-bottom:
            20px !important;
    }


    .desktop-only,
    .tablet-only,
    .mobile-only {
        display:
            block !important;
    }


    .no-print,
    .mobile-menu,
    .mobile-contact-bar,
    .whatsapp-float-wrapper,
    .back-to-top,
    .page-loader {
        display:
            none !important;
    }


    a {
        color:
            #000000 !important;

        text-decoration:
            none !important;
    }


    img {
        max-width:
            100% !important;

        page-break-inside:
            avoid;
    }


    table,
    figure,
    .card,
    .product-card {
        page-break-inside:
            avoid;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM GLOBAL RESPONSIVE SYSTEM
   ============================================================ */
```