/* Responsive fit overrides loaded after the compiled theme CSS. */
:root {
    --fit-gutter: clamp(14px, 3vw, 32px);
    --fit-section-space: clamp(44px, 6vw, 88px);
}

html {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    body {
        overflow-x: hidden;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

img,
video {
    height: auto;
}

iframe {
    border: 0;
}

.container,
.custom-container {
    width: 100% !important;
    max-width: min(1180px, calc(100vw - (var(--fit-gutter) * 2))) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (min-width: 1600px) {
    .custom-container {
        max-width: min(1500px, calc(100vw - (var(--fit-gutter) * 2))) !important;
    }
}

.row,
[class*="col-"],
.section-wrapper,
.inner-wrapper,
.page-wrapper,
.main-wrapper,
.main-body-wrapper,
.body-wrapper,
.custom-card,
.card,
.modal-content,
.dashboard-list-area,
.dashboard-list-wrapper,
.dashboard-list-item,
.dashboard-box,
.transaction-preview,
.preview-list-wrapper,
.account-wrapper,
.table-area,
.table-wrapper,
.banner-section,
.about-section,
.service-section,
.footer-section {
    min-width: 0;
    max-width: 100%;
}

.table-responsive,
.table-area,
.table-wrapper,
.custom-table-wrapper,
.dashboard-list-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table,
.custom-table {
    width: 100%;
    max-width: 100%;
}

.table th,
.table td,
.custom-table th,
.custom-table td {
    overflow-wrap: anywhere;
}

.form--control,
.form-control,
input,
textarea,
select,
.nice-select,
.select2,
.select2-container {
    max-width: 100% !important;
}

body.public-site h1,
body.public-site .banner-content .title,
body.public-site .pago-animated-heading {
    font-size: clamp(2rem, 5vw, 3.875rem) !important;
    line-height: 1.08 !important;
}

body.public-site h2,
body.public-site .section-title,
body.public-site .content-title {
    font-size: clamp(1.5rem, 3.4vw, 2.625rem) !important;
    line-height: 1.15 !important;
}

body.public-site h3,
body.public-site .title {
    font-size: clamp(1.125rem, 2.1vw, 1.75rem);
    line-height: 1.22;
}

body.public-site p,
body.public-site .description,
body.public-site .sub-title {
    overflow-wrap: anywhere;
}

body.public-site .ptb-60,
body.public-site .pago-section,
body.public-site .modern-contact-section {
    padding-top: var(--fit-section-space) !important;
    padding-bottom: var(--fit-section-space) !important;
}

body.public-site .btn,
body.public-site .btn--base,
body.public-site .btn-active,
body.public-site .cmn--btn,
.body-wrapper .btn,
.body-wrapper .btn--base {
    max-width: 100%;
    white-space: normal;
}

body.public-site .pago-feature-grid,
body.public-site .pago-audience-grid,
body.public-site .pago-usecase-grid,
body.public-site .pago-step-grid,
body.public-site .pago-gift-grid,
body.public-site .modern-contact-grid,
body.public-site .core-service-wrapper,
body.public-site .choose-card-wrapper,
body.public-site .service-card-wrapper,
body.public-site .work-card-wrapper,
body.public-site .blog-card-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

body.public-site .pago-asset-panel,
body.public-site .pago-map-panel,
body.public-site .pago-dashboard-card,
body.public-site .pago-card-visual,
body.public-site .app-image,
body.public-site .about-thumb,
body.public-site .service-thumb,
body.public-site .banner-thumb {
    width: min(100%, 100%) !important;
    max-width: 100% !important;
}

.dashboard-header-wrapper,
.dashboard-title-part,
.dashboard-list-item,
.dashboard-list-user-wrapper,
.dashboard-list-right,
.dashboard-card-content .card-header-btn-wrapper,
.dashboard-card-content .virtual-card-btn-area,
.preview-list-item,
.modal-footer,
.card-footer {
    flex-wrap: wrap;
    min-width: 0;
}

.dashboard-card-content .card-custom,
.dashboard-card-content .front,
.dashboard-card-content .back,
.virtual-card-wrapper,
.virtual-card,
.card-wrapper {
    width: min(100%, 380px) !important;
    max-width: 100% !important;
}

@media (max-width: 1199px) {
    .navbar-wrapper,
    .navbar-wrapper.active,
    .body-wrapper,
    .body-wrapper.active {
        margin-left: 0 !important;
        padding-right: var(--fit-gutter) !important;
        padding-left: var(--fit-gutter) !important;
    }
}

@media (max-width: 991px) {
    body.public-site .pago-hero-grid,
    body.public-site .pago-section-grid,
    body.public-site .pago-split-card,
    body.public-site .modern-contact-shell,
    body.public-site .contact-wrapper,
    body.public-site .about-wrapper,
    body.public-site .service-wrapper,
    body.public-site .app-wrapper,
    body.public-site .statistics-wrapper {
        grid-template-columns: 1fr !important;
    }

    body.public-site .banner-section,
    body.public-site .pago-personal-hero {
        min-height: auto !important;
    }
}

@media (max-width: 767px) {
    .dashboard-title-part,
    .dashboard-header-wrapper,
    .dashboard-card-content .card-header-btn-wrapper,
    .dashboard-card-content .dash-payment-title-area {
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .dashboard-list-item,
    .dashboard-list-user-wrapper,
    .dashboard-list-right {
        align-items: flex-start !important;
    }

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

@media (max-width: 575px) {
    :root {
        --fit-gutter: 14px;
    }

    body.public-site .header-bottom-area,
    body.public-site .navbar-collapse {
        max-width: 100vw;
    }

    body.public-site .navbar-right,
    body.public-site .navbar-right .header-action,
    body.public-site .cookie-main-wrapper,
    .phone-verification-remark,
    .dashboard-title-part,
    .dashboard-header-wrapper,
    .modal-footer {
        width: 100% !important;
    }

    body.public-site .navbar-right .header-action,
    body.public-site .cookie-main-wrapper,
    .phone-verification-remark,
    .dashboard-title-part,
    .dashboard-header-wrapper,
    .modal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.public-site .navbar-right .header-action .btn,
    body.public-site .navbar-right .header-action a,
    body.public-site .cookie-main-wrapper button,
    .phone-verification-remark__action,
    .modal-footer .btn {
        width: 100% !important;
    }

    .body-wrapper .ptb-50,
    .main-body-wrapper .ptb-50 {
        padding: 16px 0 26px !important;
    }

    .deposit-form,
    .profile-settings-wrapper,
    .support-card,
    .payment-item,
    .gateway-item,
    .custom-card,
    .dashboard-box,
    .transaction-preview,
    .preview-list-wrapper,
    .account-wrapper,
    .security-card,
    .authorize-wrapper,
    .kyc-form,
    .contact-form,
    .card-form-wrapper {
        padding: 14px !important;
    }
}