/* =========================================================
   NGP MART — CONTACT US V2
   PART 1 — FINAL RESPONSIVE CSS
   Typography adjusted to Home Page scale

   10px -> 14px
   11px -> 15px
   12px -> 16px

   Everything is uniquely scoped.
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.ngp-contact-v2-page {

    --ngp-cv2-ivory: #fbf7ef;
    --ngp-cv2-cream: #f3e8d8;
    --ngp-cv2-white: #ffffff;

    --ngp-cv2-plum: #4b2144;
    --ngp-cv2-plum-dark: #291426;
    --ngp-cv2-plum-light: #704d67;

    --ngp-cv2-gold: #c69245;
    --ngp-cv2-gold-light: #e4c486;
    --ngp-cv2-gold-soft: #f3e4c8;

    --ngp-cv2-text: #282026;
    --ngp-cv2-muted: #756b70;

    --ngp-cv2-border:
        rgba(75, 33, 68, 0.12);

    --ngp-cv2-shadow:
        0 18px 50px rgba(55, 27, 48, 0.08);

    --ngp-cv2-shadow-heavy:
        0 25px 65px rgba(55, 27, 48, 0.13);

    width: 100%;

    min-height: 100vh;

    color:
        var(--ngp-cv2-text);

    font-family:
        "DM Sans",
        sans-serif;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.ngp-contact-v2-page *,
.ngp-contact-v2-page *::before,
.ngp-contact-v2-page *::after {

    box-sizing: border-box;

}


.ngp-contact-v2-page a {

    text-decoration: none;

}


.ngp-contact-v2-page button,
.ngp-contact-v2-page input,
.ngp-contact-v2-page textarea,
.ngp-contact-v2-page select {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-container {

    width:
        min(calc(100% - 56px),
            1380px);

    margin-inline: auto;

}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--ngp-cv2-gold);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;

}


.ngp-contact-v2-page .ngp-contact-v2-eyebrow>span {

    width: 30px;

    height: 2px;

    background:
        var(--ngp-cv2-gold);

}


/* =========================================================
   01. HERO
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-hero {

    position: relative;

    min-height: 575px;

    padding:
        32px 0 75px;

    overflow: hidden;

    background:

        radial-gradient(circle at 12% 35%,
            rgba(198, 146, 69, .12),
            transparent 25%),

        radial-gradient(circle at 90% 20%,
            rgba(75, 33, 68, .08),
            transparent 28%),

        linear-gradient(135deg,
            #fffdf9 0%,
            #f8efe3 100%);

}


.ngp-contact-v2-page .ngp-contact-v2-hero::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    right: -270px;

    top: -180px;

    border:
        1px solid rgba(198, 146, 69, .17);

    border-radius: 50%;

}


.ngp-contact-v2-page .ngp-contact-v2-hero::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    left: -270px;

    bottom: -240px;

    border:
        1px solid rgba(75, 33, 68, .08);

    border-radius: 50%;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-breadcrumb {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--ngp-cv2-muted);

    font-size: 14px;

}


.ngp-contact-v2-page .ngp-contact-v2-breadcrumb a {

    color:
        var(--ngp-cv2-plum);

    font-weight: 700;

}


.ngp-contact-v2-page .ngp-contact-v2-breadcrumb span:first-of-type {

    color:
        var(--ngp-cv2-gold);

}


/* =========================================================
   HERO GRID
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-hero-grid {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(350px, .85fr);

    align-items: center;

    gap: 80px;

    min-height: 465px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-hero-content {

    max-width: 720px;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-content .ngp-contact-v2-eyebrow {

    margin-bottom: 18px;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-content h1 {

    max-width: 720px;

    margin:
        0 0 22px;

    color:
        var(--ngp-cv2-plum-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(48px,
            6vw,
            76px);

    font-weight: 600;

    line-height: 1.02;

    letter-spacing:
        -.045em;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-content h1 em {

    color:
        var(--ngp-cv2-gold);

    font-style: italic;

    font-weight: 500;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-content>p {

    max-width: 650px;

    margin:
        0 0 30px;

    color:
        var(--ngp-cv2-muted);

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


.ngp-contact-v2-page .ngp-contact-v2-btn-primary {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        0 8px 0 21px;

    border:
        1px solid var(--ngp-cv2-gold);

    border-radius: 999px;

    background:
        var(--ngp-cv2-plum);

    color:
        #ffffff;

    font-size: 15px;

    font-weight: 800;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-btn-primary>span {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--ngp-cv2-gold);

}


.ngp-contact-v2-page .ngp-contact-v2-btn-primary svg {

    width: 15px;

    height: 15px;

}


.ngp-contact-v2-page .ngp-contact-v2-btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px rgba(75, 33, 68, .18);

}


.ngp-contact-v2-page .ngp-contact-v2-btn-outline {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        0 19px;

    border:
        1px solid rgba(75, 33, 68, .17);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .62);

    color:
        var(--ngp-cv2-plum);

    font-size: 15px;

    font-weight: 800;

    transition:
        .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-btn-outline:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--ngp-cv2-gold);

    background:
        #ffffff;

}


.ngp-contact-v2-page .ngp-contact-v2-btn-outline svg {

    width: 16px;

    height: 16px;

    color:
        var(--ngp-cv2-gold);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-hero-visual {

    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   HERO CARD
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-hero-card {

    position: relative;

    width:
        min(100%, 330px);

    height: 365px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border:
        1px solid rgba(198, 146, 69, .55);

    border-radius: 30px;

    background:
        linear-gradient(145deg,
            #291426,
            #4b2144);

    box-shadow:
        0 30px 70px rgba(75, 33, 68, .20);

    transform:
        rotate(3deg);

    overflow: hidden;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(227, 193, 131, .18);

    border-radius: 50%;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card::after {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(227, 193, 131, .10);

    border-radius: 50%;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-top span {

    color:
        rgba(255, 255, 255, .8);

    font-family:
        "Playfair Display",
        serif;

    font-size: 18px;

    letter-spacing: .12em;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-top svg {

    width: 18px;

    height: 18px;

    color:
        var(--ngp-cv2-gold-light);

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-center {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-letter {

    width: 155px;

    height: 155px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(227, 193, 131, .55);

    border-radius: 50%;

    color:
        var(--ngp-cv2-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 90px;

    font-style: italic;

    box-shadow:
        inset 0 0 40px rgba(198, 146, 69, .07);

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 15px;

    border-top:
        1px solid rgba(227, 193, 131, .18);

}


.ngp-contact-v2-page .ngp-contact-v2-hero-card-bottom span {

    color:
        rgba(255, 255, 255, .48);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .10em;

}


/* =========================================================
   FLOATING HELP CARD
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-floating-tag {

    position: absolute;

    left: 5px;

    bottom: 28px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        13px 16px;

    border:
        1px solid rgba(198, 146, 69, .25);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .95);

    box-shadow:
        var(--ngp-cv2-shadow);

    backdrop-filter:
        blur(14px);

    transform:
        rotate(-2deg);

}


.ngp-contact-v2-page .ngp-contact-v2-floating-tag>i {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        rgba(198, 146, 69, .10);

    color:
        var(--ngp-cv2-gold);

}


.ngp-contact-v2-page .ngp-contact-v2-floating-tag>i svg {

    width: 18px;

    height: 18px;

}


.ngp-contact-v2-page .ngp-contact-v2-floating-tag div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ngp-contact-v2-page .ngp-contact-v2-floating-tag strong {

    color:
        var(--ngp-cv2-plum);

    font-size: 15px;

}


.ngp-contact-v2-page .ngp-contact-v2-floating-tag small {

    color:
        var(--ngp-cv2-muted);

    font-size: 14px;

}


/* =========================================================
   02. QUICK CONTACT SECTION
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-quick-section {

    position: relative;

    z-index: 8;

    margin-top: -28px;

    background-color: var(--ngp-cv2-ivory);

}


.ngp-contact-v2-page .ngp-contact-v2-quick-grid {

    display: grid;

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

    gap: 13px;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-card {

    position: relative;

    min-height: 125px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        20px;

    border:
        1px solid var(--ngp-cv2-border);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .96);

    box-shadow:
        var(--ngp-cv2-shadow);

    color:
        var(--ngp-cv2-text);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(198, 146, 69, .35);

    box-shadow:
        var(--ngp-cv2-shadow-heavy);

}


.ngp-contact-v2-page .ngp-contact-v2-quick-icon {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(198, 146, 69, .10);

    color:
        var(--ngp-cv2-gold);

}


.ngp-contact-v2-page .ngp-contact-v2-quick-icon svg {

    width: 19px;

    height: 19px;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-content span {

    color:
        var(--ngp-cv2-gold);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .12em;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-content strong {

    color:
        var(--ngp-cv2-plum);

    font-family:
        "Playfair Display",
        serif;

    font-size: 16px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-content small {

    color:
        var(--ngp-cv2-muted);

    font-size: 14px;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-arrow {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 14px;

    height: 14px;

    color:
        rgba(75, 33, 68, .3);

    transition:
        transform .3s ease,
        color .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-quick-card:hover .ngp-contact-v2-quick-arrow {

    color:
        var(--ngp-cv2-gold);

    transform:
        translate(2px, -2px);

}


/* =========================================================
   03. MAIN CONTACT SECTION
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-main-section {

    padding:
        15px 0 25px;

    background:
        var(--ngp-cv2-ivory);

}


/* =========================================================
   SECTION HEADING
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 38px;

}


.ngp-contact-v2-page .ngp-contact-v2-section-heading h2 {

    margin:
        10px 0 0;

    color:
        var(--ngp-cv2-plum-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(35px,
            4vw,
            53px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing:
        -.035em;

}


.ngp-contact-v2-page .ngp-contact-v2-section-heading h2 em {

    color:
        var(--ngp-cv2-gold);

    font-style: italic;

}


.ngp-contact-v2-page .ngp-contact-v2-section-heading>p {

    max-width: 480px;

    margin: 0;

    color:
        var(--ngp-cv2-muted);

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   CONTACT BOX
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-contact-box {

    display: grid;

    grid-template-columns:
        390px minmax(0, 1fr);

    min-height: 600px;

    overflow: hidden;

    border:
        1px solid var(--ngp-cv2-border);

    border-radius: 24px;

    background:
        #ffffff;

    box-shadow:
        var(--ngp-cv2-shadow-heavy);

}


/* =========================================================
   LEFT INFO PANEL
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-info-panel {

    position: relative;

    padding:
        42px 34px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            var(--ngp-cv2-plum-dark),
            var(--ngp-cv2-plum));

    color:
        #ffffff;

}


.ngp-contact-v2-page .ngp-contact-v2-info-panel::before {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    right: -190px;

    bottom: -190px;

    border:
        1px solid rgba(227, 193, 131, .13);

    border-radius: 50%;

}


.ngp-contact-v2-page .ngp-contact-v2-info-panel::after {

    content: "";

    position: absolute;

    width: 210px;

    height: 210px;

    left: -130px;

    top: 180px;

    border:
        1px solid rgba(227, 193, 131, .09);

    border-radius: 50%;

}


.ngp-contact-v2-page .ngp-contact-v2-info-label {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 12px;

    color:
        var(--ngp-cv2-gold-light);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .15em;

}


.ngp-contact-v2-page .ngp-contact-v2-info-panel h3 {

    position: relative;

    z-index: 2;

    max-width: 300px;

    margin:
        0 0 13px;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1.08;

}


.ngp-contact-v2-page .ngp-contact-v2-info-panel>p {

    position: relative;

    z-index: 2;

    max-width: 300px;

    margin:
        0 0 30px;

    color:
        rgba(255, 255, 255, .56);

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   INFO ITEMS
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-info-item {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 19px;

}


.ngp-contact-v2-page .ngp-contact-v2-info-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(227, 193, 131, .22);

    border-radius: 11px;

    background:
        rgba(198, 146, 69, .10);

    color:
        var(--ngp-cv2-gold-light);

}


.ngp-contact-v2-page .ngp-contact-v2-info-icon svg {

    width: 17px;

    height: 17px;

}


.ngp-contact-v2-page .ngp-contact-v2-info-item>div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;

}


.ngp-contact-v2-page .ngp-contact-v2-info-item>div:last-child>span {

    color:
        rgba(255, 255, 255, .40);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .12em;

}


.ngp-contact-v2-page .ngp-contact-v2-info-item a {

    color:
        #ffffff;

    font-size: 15px;

    font-weight: 700;

    transition:
        color .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-info-item a:hover {

    color:
        var(--ngp-cv2-gold-light);

}


.ngp-contact-v2-page .ngp-contact-v2-info-item p {

    max-width: 245px;

    margin: 0;

    color:
        rgba(255, 255, 255, .58);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   SOCIAL
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-social-wrapper {

    position: relative;

    z-index: 3;

    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, .10);

}


.ngp-contact-v2-page .ngp-contact-v2-social-wrapper>span {

    display: block;

    margin-bottom: 11px;

    color:
        rgba(255, 255, 255, .40);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .12em;

}


.ngp-contact-v2-page .ngp-contact-v2-socials {

    display: flex;

    gap: 8px;

}


.ngp-contact-v2-page .ngp-contact-v2-socials a {

    width: 34px;

    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, .14);

    border-radius: 50%;

    color:
        rgba(255, 255, 255, .62);

    transition:
        .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-socials a:hover {

    transform:
        translateY(-3px);

    background:
        var(--ngp-cv2-gold);

    border-color:
        var(--ngp-cv2-gold);

    color:
        #ffffff;

}


.ngp-contact-v2-page .ngp-contact-v2-socials svg {

    width: 14px;

    height: 14px;

}


/* =========================================================
   FORM PANEL
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-form-panel {

    padding:
        42px 46px;

    background:
        rgba(255, 255, 255, .96);

}


.ngp-contact-v2-page .ngp-contact-v2-form-heading {

    margin-bottom: 28px;

}


.ngp-contact-v2-page .ngp-contact-v2-form-heading>span {

    display: block;

    margin-bottom: 9px;

    color:
        var(--ngp-cv2-gold);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .15em;

}


.ngp-contact-v2-page .ngp-contact-v2-form-heading h3 {

    margin:
        0 0 8px;

    color:
        var(--ngp-cv2-plum-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size: 31px;

    font-weight: 600;

    line-height: 1.05;

}


.ngp-contact-v2-page .ngp-contact-v2-form-heading p {

    margin: 0;

    color:
        var(--ngp-cv2-muted);

    font-size: 15px;

}


/* =========================================================
   FORM
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-form {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.ngp-contact-v2-page .ngp-contact-v2-form-row {

    display: grid;

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

    gap: 16px;

}


.ngp-contact-v2-page .ngp-contact-v2-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.ngp-contact-v2-page .ngp-contact-v2-field label {

    color:
        var(--ngp-cv2-plum);

    font-size: 14px;

    font-weight: 800;

}


.ngp-contact-v2-page .ngp-contact-v2-field label sup {

    color:
        #b65e4c;

}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap>svg {

    position: absolute;

    left: 15px;

    width: 17px;

    height: 17px;

    z-index: 2;

    color:
        var(--ngp-cv2-gold);

    pointer-events: none;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap input,
.ngp-contact-v2-page .ngp-contact-v2-input-wrap select,
.ngp-contact-v2-page .ngp-contact-v2-input-wrap textarea {

    width: 100%;

    outline: none;

    border:
        1px solid rgba(75, 33, 68, .15);

    border-radius: 11px;

    background:
        #fffdf9;

    color:
        var(--ngp-cv2-text);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap input,
.ngp-contact-v2-page .ngp-contact-v2-input-wrap select {

    height: 50px;

    padding:
        0 14px 0 43px;

    font-size: 15px;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap select {

    appearance: none;

    cursor: pointer;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap textarea {

    min-height: 130px;

    resize: vertical;

    padding:
        14px 14px 14px 43px;

    font-size: 15px;

    line-height: 1.65;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap input::placeholder,
.ngp-contact-v2-page .ngp-contact-v2-input-wrap textarea::placeholder {

    color:
        #aaa1a5;

}


.ngp-contact-v2-page .ngp-contact-v2-input-wrap input:focus,
.ngp-contact-v2-page .ngp-contact-v2-input-wrap select:focus,
.ngp-contact-v2-page .ngp-contact-v2-input-wrap textarea:focus {

    border-color:
        var(--ngp-cv2-gold);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(198, 146, 69, .08);

}


/* =========================================================
   FORM BOTTOM
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-form-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 2px;

}


.ngp-contact-v2-page .ngp-contact-v2-form-note {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--ngp-cv2-muted);

    font-size: 14px;

}


.ngp-contact-v2-page .ngp-contact-v2-form-note svg {

    width: 17px;

    height: 17px;

    color:
        #718a61;

}


/* =========================================================
   SUBMIT
========================================================= */

.ngp-contact-v2-page .ngp-contact-v2-submit {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        0 8px 0 21px;

    border:
        1px solid var(--ngp-cv2-gold);

    border-radius: 999px;

    background:
        var(--ngp-cv2-plum);

    color:
        #ffffff;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.ngp-contact-v2-page .ngp-contact-v2-submit span {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--ngp-cv2-gold);

}


.ngp-contact-v2-page .ngp-contact-v2-submit svg {

    width: 15px;

    height: 15px;

}


.ngp-contact-v2-page .ngp-contact-v2-submit:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px rgba(75, 33, 68, .18);

}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .ngp-contact-v2-page .ngp-contact-v2-hero-grid {

        gap: 45px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-quick-grid {

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

    }


    .ngp-contact-v2-page .ngp-contact-v2-contact-box {

        grid-template-columns:
            350px minmax(0, 1fr);

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-panel {

        padding:
            40px 35px;

    }

}


/* =========================================================
   992px
========================================================= */

@media (max-width: 992px) {

    .ngp-contact-v2-page .ngp-contact-v2-container {

        width:
            min(calc(100% - 40px),
                900px);

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero {

        padding-bottom: 60px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-grid {

        grid-template-columns:
            1fr;

        gap: 35px;

        padding-top: 45px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content {

        max-width: 760px;

        text-align: center;

        margin-inline: auto;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content .ngp-contact-v2-eyebrow {

        justify-content: center;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content>p {

        margin-inline: auto;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-actions {

        justify-content: center;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-visual {

        min-height: 350px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-quick-section {

        margin-top: -15px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-contact-box {

        grid-template-columns:
            1fr;

    }


    .ngp-contact-v2-page .ngp-contact-v2-info-panel {

        min-height: auto;

    }


    .ngp-contact-v2-page .ngp-contact-v2-section-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-section-heading>p {

        max-width: 650px;

    }

}


/* =========================================================
   768px
========================================================= */

@media (max-width: 768px) {

    .ngp-contact-v2-page .ngp-contact-v2-container {

        width:
            calc(100% - 30px);

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero {

        min-height: auto;

        padding:
            25px 0 55px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-breadcrumb {

        font-size: 14px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-grid {

        padding-top: 35px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content h1 {

        font-size:
            clamp(40px,
                10vw,
                58px);

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content>p {

        font-size: 15px;

        line-height: 1.7;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-card {

        width: 290px;

        height: 330px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-card-letter {

        width: 130px;

        height: 130px;

        font-size: 76px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-floating-tag {

        left:
            calc(50% - 155px);

        bottom: 8px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-quick-grid {

        grid-template-columns:
            1fr;

    }


    .ngp-contact-v2-page .ngp-contact-v2-quick-card {

        min-height: 95px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-main-section {

        padding-bottom: 65px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-section-heading h2 {

        font-size: 39px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-info-panel {

        padding:
            35px 25px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-panel {

        padding:
            35px 25px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-row {

        grid-template-columns:
            1fr;

        gap: 17px;

    }

}


/* =========================================================
   520px
========================================================= */

@media (max-width: 520px) {

    .ngp-contact-v2-page .ngp-contact-v2-container {

        width:
            calc(100% - 24px);

    }


    .ngp-contact-v2-page .ngp-contact-v2-eyebrow {

        font-size: 14px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content h1 {

        font-size: 39px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-content>p {

        font-size: 14px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .ngp-contact-v2-page .ngp-contact-v2-btn-primary,
    .ngp-contact-v2-page .ngp-contact-v2-btn-outline {

        width: 100%;

        justify-content: center;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-visual {

        min-height: 330px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-card {

        width: 255px;

        height: 295px;

        padding: 20px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-card-letter {

        width: 110px;

        height: 110px;

        font-size: 65px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-floating-tag {

        left:
            calc(50% - 130px);

        padding:
            10px 12px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-floating-tag>i {

        width: 33px;

        height: 33px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-quick-card {

        padding:
            16px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-quick-content strong {

        font-size: 16px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-section-heading h2 {

        font-size: 35px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-contact-box {

        border-radius: 18px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-info-panel {

        padding:
            30px 20px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-info-panel h3 {

        font-size: 27px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-panel {

        padding:
            30px 20px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-heading h3 {

        font-size: 27px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-bottom {

        align-items: stretch;

        flex-direction: column;

    }


    .ngp-contact-v2-page .ngp-contact-v2-submit {

        width: 100%;

        justify-content: center;

    }

}


/* =========================================================
   380px
========================================================= */

@media (max-width: 380px) {

    .ngp-contact-v2-page .ngp-contact-v2-hero-content h1 {

        font-size: 34px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-card {

        width: 230px;

        height: 275px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-hero-card-letter {

        width: 95px;

        height: 95px;

        font-size: 55px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-floating-tag {

        left:
            calc(50% - 115px);

    }


    .ngp-contact-v2-page .ngp-contact-v2-info-panel h3 {

        font-size: 25px;

    }


    .ngp-contact-v2-page .ngp-contact-v2-form-heading h3 {

        font-size: 25px;

    }

}





















/* =========================================================
   NGP MART — CONTACT MAP
   COMPLETE SCOPED CSS
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.ngpmart-contact-map-section {

    position: relative;

    width: 100%;

    padding:
        30px 0 30px;

    background:
        #fbf7ef;

    overflow: hidden;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.ngpmart-contact-map-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -250px;

    top: -230px;

    border:
        1px solid rgba(198, 146, 69, .10);

    border-radius: 50%;

    pointer-events: none;

}


.ngpmart-contact-map-section::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    left: -190px;

    bottom: -170px;

    border:
        1px solid rgba(75, 33, 68, .07);

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.ngpmart-contact-map-container {

    position: relative;

    z-index: 2;

    width:
        min(calc(100% - 56px),
            1380px);

    margin:
        0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.ngpmart-contact-map-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 35px;

}


/* =========================================================
   TITLE WRAPPER
========================================================= */

.ngpmart-contact-map-title-wrap {

    max-width: 720px;

}


/* =========================================================
   EYEBROW
========================================================= */

.ngpmart-contact-map-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        #c69245;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.ngpmart-contact-map-eyebrow>span {

    width: 32px;

    height: 2px;

    display: inline-block;

    background:
        #c69245;

}


/* =========================================================
   TITLE
========================================================= */

.ngpmart-contact-map-title {

    margin:
        11px 0 12px;

    color:
        #291426;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(38px,
            4.5vw,
            58px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing:
        -.035em;

}


.ngpmart-contact-map-title em {

    color:
        #c69245;

    font-style: italic;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.ngpmart-contact-map-description {

    max-width: 610px;

    margin: 0;

    color:
        #756b70;

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   GET DIRECTIONS BUTTON
========================================================= */

.ngpmart-contact-map-direction {

    flex-shrink: 0;

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding:
        0 21px;

    border:
        1px solid rgba(75, 33, 68, .15);

    border-radius: 999px;

    background:
        #ffffff;

    color:
        #4b2144;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(55, 27, 48, .05);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.ngpmart-contact-map-direction:hover {

    transform:
        translateY(-4px);

    border-color:
        #c69245;

    box-shadow:
        0 15px 35px rgba(55, 27, 48, .11);

}


.ngpmart-contact-map-direction svg {

    width: 17px;

    height: 17px;

    color:
        #c69245;

    transition:
        transform .3s ease;

}


.ngpmart-contact-map-direction:hover svg {

    transform:
        translate(2px, -2px);

}


/* =========================================================
   MAP BOX
========================================================= */

.ngpmart-contact-map-box {

    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

    border:
        1px solid rgba(75, 33, 68, .12);

    border-radius: 28px;

    background:
        #ffffff;

    box-shadow:
        0 25px 65px rgba(55, 27, 48, .13);

}


/* =========================================================
   MAP FRAME
========================================================= */

.ngpmart-contact-map-frame {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}


.ngpmart-contact-map-frame iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    filter:
        saturate(.82) contrast(.96);

}


/* =========================================================
   LOCATION CARD
========================================================= */

.ngpmart-contact-map-location {

    position: absolute;

    left: 28px;

    bottom: 28px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 320px;

    max-width: 430px;

    padding:
        16px 18px;

    border:
        1px solid rgba(198, 146, 69, .28);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .96);

    box-shadow:
        0 18px 45px rgba(40, 20, 35, .17);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


/* =========================================================
   LOCATION ICON
========================================================= */

.ngpmart-contact-map-location-icon {

    width: 46px;

    height: 46px;

    flex:
        0 0 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        #4b2144;

    color:
        #e4c486;

}


.ngpmart-contact-map-location-icon svg {

    width: 20px;

    height: 20px;

}


/* =========================================================
   LOCATION CONTENT
========================================================= */

.ngpmart-contact-map-location-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ngpmart-contact-map-location-label {

    color:
        #c69245;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .13em;

}


.ngpmart-contact-map-location-content strong {

    color:
        #4b2144;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 600;

}


.ngpmart-contact-map-location-content p {

    margin: 0;

    color:
        #756b70;

    font-size: 14px;

    line-height: 1.45;

}


/* =========================================================
   LOCATION ARROW
========================================================= */

.ngpmart-contact-map-small-arrow {

    width: 38px;

    height: 38px;

    flex:
        0 0 38px;

    margin-left: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(75, 33, 68, .12);

    border-radius: 50%;

    background:
        #fbf7ef;

    color:
        #4b2144;

    transition:
        .3s ease;

}


.ngpmart-contact-map-small-arrow:hover {

    transform:
        translate(2px, -2px);

    background:
        #c69245;

    border-color:
        #c69245;

    color:
        #ffffff;

}


.ngpmart-contact-map-small-arrow svg {

    width: 16px;

    height: 16px;

}


/* =========================================================
   MAP BADGE
========================================================= */

.ngpmart-contact-map-badge {

    position: absolute;

    top: 24px;

    right: 24px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid rgba(198, 146, 69, .24);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .94);

    color:
        #4b2144;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 10px 30px rgba(40, 20, 35, .10);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.ngpmart-contact-map-badge svg {

    width: 16px;

    height: 16px;

    color:
        #c69245;

}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .ngpmart-contact-map-container {

        width:
            min(calc(100% - 44px),
                1100px);

    }


    .ngpmart-contact-map-box {

        height: 460px;

    }

}


/* =========================================================
   992px
========================================================= */

@media (max-width: 992px) {

    .ngpmart-contact-map-section {

        padding:
            70px 0 80px;

    }


    .ngpmart-contact-map-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 20px;

    }


    .ngpmart-contact-map-direction {

        align-self:
            flex-start;

    }


    .ngpmart-contact-map-box {

        height:
            430px;

    }

}


/* =========================================================
   768px
========================================================= */

@media (max-width: 768px) {

    .ngpmart-contact-map-section {

        padding:
            60px 0 70px;

    }


    .ngpmart-contact-map-container {

        width:
            calc(100% - 30px);

    }


    .ngpmart-contact-map-title {

        font-size:
            40px;

    }


    .ngpmart-contact-map-description {

        font-size:
            15px;

    }


    .ngpmart-contact-map-direction {

        width:
            100%;

    }


    .ngpmart-contact-map-box {

        height:
            390px;

        border-radius:
            21px;

    }


    .ngpmart-contact-map-badge {

        top:
            15px;

        right:
            15px;

    }


    .ngpmart-contact-map-location {

        left:
            15px;

        right:
            15px;

        bottom:
            15px;

        min-width:
            0;

        max-width:
            none;

    }

}


/* =========================================================
   520px
========================================================= */

@media (max-width: 520px) {

    .ngpmart-contact-map-section {

        padding:
            50px 0 60px;

    }


    .ngpmart-contact-map-container {

        width:
            calc(100% - 24px);

    }


    .ngpmart-contact-map-eyebrow {

        font-size:
            14px;

    }


    .ngpmart-contact-map-title {

        font-size:
            35px;

    }


    .ngpmart-contact-map-description {

        font-size:
            14px;

        line-height:
            1.7;

    }


    .ngpmart-contact-map-box {

        height:
            350px;

        border-radius:
            18px;

    }


    .ngpmart-contact-map-location {

        gap:
            10px;

        padding:
            12px;

    }


    .ngpmart-contact-map-location-icon {

        width:
            39px;

        height:
            39px;

        flex-basis:
            39px;

        border-radius:
            10px;

    }


    .ngpmart-contact-map-location-icon svg {

        width:
            17px;

        height:
            17px;

    }


    .ngpmart-contact-map-location-label {

        font-size:
            14px;

    }


    .ngpmart-contact-map-location-content strong {

        font-size:
            16px;

    }


    .ngpmart-contact-map-location-content p {

        font-size:
            14px;

    }


    .ngpmart-contact-map-small-arrow {

        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

    }


    .ngpmart-contact-map-badge {

        display:
            none;

    }

}


/* =========================================================
   380px
========================================================= */

@media (max-width: 380px) {

    .ngpmart-contact-map-container {

        width:
            calc(100% - 20px);

    }


    .ngpmart-contact-map-title {

        font-size:
            32px;

    }


    .ngpmart-contact-map-box {

        height:
            320px;

    }


    .ngpmart-contact-map-location {

        left:
            10px;

        right:
            10px;

        bottom:
            10px;

    }


    .ngpmart-contact-map-location-content p {

        max-width:
            170px;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

    }

}



















/********************************ABOUT PAGE**************************************/


.ngp-about-page {
    --ngp-about-plum: #291321;
    --ngp-about-plum-2: #3b192f;
    --ngp-about-gold: #c18a45;
    --ngp-about-gold-light: #e2c27d;
    --ngp-about-cream: #fbf6ee;
    --ngp-about-white: #fffdf9;
    --ngp-about-text: #382333;
    --ngp-about-muted: #756a71;

    width: 100%;
    overflow: hidden;
}

.ngp-about-page *,
.ngp-about-page *::before,
.ngp-about-page *::after {
    box-sizing: border-box;
}

.ngp-about-page a {
    text-decoration: none;
}

.ngp-about-container {
    width: calc(100% - 40px);
    max-width: 1380px;
    margin: 0 auto;
}


/* =========================================================
   LABEL
========================================================= */

.ngp-about-section-label,
.ngp-about-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--ngp-about-gold);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .15em;
}


/* =========================================================
   BUTTONS
========================================================= */

.ngp-about-hero-buttons,
.ngp-about-final-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ngp-about-btn-primary,
.ngp-about-btn-secondary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 21px;

    border-radius: 27px;

    font-size: 14px;
    font-weight: 800;

    transition: .25s ease;
}

.ngp-about-btn-primary {
    background: var(--ngp-about-plum);
    color: #fff;
}

.ngp-about-btn-primary:hover {
    transform: translateY(-3px);
    background: #4a203e;
    color: #fff;
    box-shadow: 0 12px 25px rgba(41, 19, 33, .18);
}

.ngp-about-btn-secondary {
    border: 1px solid rgba(41, 19, 33, .14);
    background: #fff;
    color: var(--ngp-about-plum);
}

.ngp-about-btn-secondary:hover {
    transform: translateY(-3px);
    border-color: var(--ngp-about-gold);
    color: var(--ngp-about-gold);
}

.ngp-about-btn-primary svg,
.ngp-about-btn-secondary svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   HERO
========================================================= */

.ngp-about-hero {
    position: relative;
    padding: 85px 0 0px;

    background:
        radial-gradient(circle at 85% 35%,
            rgba(193, 138, 69, .11),
            transparent 30%),
        #fffdf9;
}

.ngp-about-hero-grid {
    display: grid;

    grid-template-columns:
        1fr .9fr;

    align-items: center;

    gap: 70px;
}

.ngp-about-hero-content h1 {
    max-width: 700px;

    margin: 0 0 20px;

    color: var(--ngp-about-text);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 70px);

    line-height: 1.02;
}

.ngp-about-hero-content h1 span {
    display: block;

    color: var(--ngp-about-gold);

    font-style: italic;
}

.ngp-about-hero-content>p {
    max-width: 650px;

    margin: 0 0 27px;

    color: var(--ngp-about-muted);

    font-size: 16px;

    line-height: 1.8;
}

.ngp-about-hero-trust {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 28px;
}

.ngp-about-trust-box {
    display: flex;

    align-items: center;

    gap: 10px;
}

.ngp-about-trust-box>span {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-trust-box svg {
    width: 17px;
    height: 17px;
}

.ngp-about-trust-box div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ngp-about-trust-box strong {
    color: var(--ngp-about-text);
    font-size: 14px;
}

.ngp-about-trust-box small {
    color: var(--ngp-about-muted);
    font-size: 14px;
}


/* HERO VISUAL */

.ngp-about-hero-visual {
    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.ngp-about-hero-ring {
    position: absolute;

    border: 1px solid rgba(193, 138, 69, .18);

    border-radius: 50%;
}

.ngp-about-ring-one {
    width: 430px;
    height: 430px;
}

.ngp-about-ring-two {
    width: 340px;
    height: 340px;
}

.ngp-about-brand-card {
    position: relative;
    z-index: 2;

    width: 330px;
    height: 330px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #291321,
            #4a203e);

    border: 1px solid rgba(226, 194, 125, .32);

    box-shadow:
        0 35px 70px rgba(41, 19, 33, .22);
}

.ngp-about-brand-mark {
    width: 67px;
    height: 67px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border: 1px solid var(--ngp-about-gold-light);

    border-radius: 50%;

    color: var(--ngp-about-gold-light);

    font-family: Georgia, serif;

    font-size: 31px;
}

.ngp-about-brand-small {
    color: var(--ngp-about-gold-light);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .12em;
}

.ngp-about-brand-card h2 {
    margin: 8px 0;

    color: #fff;

    font-family: Georgia, serif;

    font-size: 32px;
}

.ngp-about-brand-card p {
    margin: 0;

    color: rgba(255, 255, 255, .65);

    font-size: 14px;
}

.ngp-about-brand-card p span {
    color: var(--ngp-about-gold-light);
    margin: 0 4px;
}


/* FLOATING */

.ngp-about-floating-card {
    position: absolute;
    z-index: 4;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border: 1px solid rgba(193, 138, 69, .22);

    border-radius: 13px;

    background: rgba(255, 255, 255, .95);

    box-shadow: 0 18px 35px rgba(41, 19, 33, .12);
}

.ngp-about-floating-card>span {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-floating-card svg {
    width: 16px;
    height: 16px;
}

.ngp-about-floating-card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ngp-about-floating-card strong {
    color: var(--ngp-about-text);
    font-size: 14px;
}

.ngp-about-floating-card small {
    color: var(--ngp-about-muted);
    font-size: 14px;
}

.ngp-about-float-one {
    top: 65px;
    right: 0;
}

.ngp-about-float-two {
    bottom: 55px;
    left: 0;
}


/* =========================================================
   STORY
========================================================= */

.ngp-about-story {
    padding: 50px 0;

    background: var(--ngp-about-cream);
}

.ngp-about-story-grid {
    display: grid;

    grid-template-columns: .82fr 1.18fr;

    align-items: center;

    gap: 75px;
}

.ngp-about-story-card {
    position: relative;

    min-height: 420px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 35px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(145deg,
            #2a1421,
            #4a203e);

    box-shadow:
        0 25px 55px rgba(41, 19, 33, .17);
}

.ngp-about-story-card::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    top: -190px;
    right: -160px;

    border: 1px solid rgba(226, 194, 125, .16);

    border-radius: 50%;
}

.ngp-about-story-number {
    position: absolute;

    top: 25px;
    left: 28px;

    color: var(--ngp-about-gold-light);

    font-size: 14px;
    font-weight: 800;
}

.ngp-about-story-card>span {
    color: var(--ngp-about-gold-light);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .14em;
}

.ngp-about-story-card h2 {
    max-width: 430px;

    margin: 12px 0 17px;

    color: #fff;

    font-family: Georgia, serif;

    font-size: 39px;

    line-height: 1.1;
}

.ngp-about-story-divider {
    width: 55px;
    height: 1px;

    margin-bottom: 18px;

    background: var(--ngp-about-gold-light);
}

.ngp-about-story-card p {
    max-width: 420px;

    margin: 0;

    color: rgba(255, 255, 255, .62);

    font-size: 14px;

    line-height: 1.75;
}

.ngp-about-story-content h2 {
    max-width: 650px;

    margin: 0 0 20px;

    color: var(--ngp-about-text);

    font-family: Georgia, serif;

    font-size: 43px;

    line-height: 1.1;
}

.ngp-about-story-content>p {
    max-width: 720px;

    margin: 0 0 14px;

    color: var(--ngp-about-muted);

    font-size: 15px;

    line-height: 1.85;
}

.ngp-about-highlight {
    display: flex;

    gap: 14px;

    margin-top: 25px;

    padding: 17px;

    border: 1px solid rgba(193, 138, 69, .18);

    border-radius: 14px;

    background: #fff;
}

.ngp-about-highlight>span {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f8eee0;

    color: var(--ngp-about-gold);
}

.ngp-about-highlight svg {
    width: 18px;
    height: 18px;
}

.ngp-about-highlight strong {
    color: var(--ngp-about-text);

    font-size: 14px;
}

.ngp-about-highlight p {
    margin: 5px 0 0;

    color: var(--ngp-about-muted);

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   RANGE
========================================================= */

.ngp-about-range {
    padding: 50px 0;

    background: #fffdf9;
}

.ngp-about-heading-row {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 38px;
}

.ngp-about-heading-row h2 {
    margin: 0;

    color: var(--ngp-about-text);

    font-family: Georgia, serif;

    font-size: 42px;

    line-height: 1.1;
}

.ngp-about-heading-row h2 span {
    color: var(--ngp-about-gold);

    font-style: italic;
}

.ngp-about-heading-row>p {
    max-width: 520px;

    margin: 0;

    color: var(--ngp-about-muted);

    font-size: 15px;

    line-height: 1.8;
}

.ngp-about-range-grid {
    display: grid;

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

    gap: 14px;
}

.ngp-about-range-card {
    min-height: 190px;

    padding: 24px;

    border: 1px solid rgba(67, 34, 55, .10);

    border-radius: 17px;

    background: #fff;

    transition: .3s ease;
}

.ngp-about-range-card:hover {
    transform: translateY(-5px);

    border-color: rgba(193, 138, 69, .32);

    box-shadow: 0 18px 38px rgba(41, 19, 33, .08);
}

.ngp-about-range-card>span {
    width: 47px;
    height: 47px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-range-card svg {
    width: 20px;
    height: 20px;
}

.ngp-about-range-card strong {
    display: block;

    margin-bottom: 7px;

    color: var(--ngp-about-text);

    font-size: 17px;
}

.ngp-about-range-card p {
    margin: 0;

    color: var(--ngp-about-muted);

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   WHY
========================================================= */

.ngp-about-why {
    padding: 50px 0;

    background: var(--ngp-about-cream);
}

.ngp-about-why-grid {
    display: grid;

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

    gap: 14px;
}

.ngp-about-why-card {
    position: relative;

    min-height: 310px;

    padding: 23px;

    border: 1px solid rgba(67, 34, 55, .10);

    border-radius: 18px;

    background: #fff;

    transition: .3s ease;
}

.ngp-about-why-card:hover {
    transform: translateY(-6px);

    border-color: rgba(193, 138, 69, .35);

    box-shadow: 0 20px 40px rgba(41, 19, 33, .09);
}

.ngp-about-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 38px;
}

.ngp-about-card-top>span {
    color: var(--ngp-about-gold);

    font-size: 14px;
    font-weight: 800;
}

.ngp-about-card-top>svg {
    width: 21px;
    height: 21px;

    padding: 13px;

    box-sizing: content-box;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-why-card h3 {
    margin: 0 0 12px;

    color: var(--ngp-about-text);

    font-size: 18px;
}

.ngp-about-why-card p {
    margin: 0;

    color: var(--ngp-about-muted);

    font-size: 14px;

    line-height: 1.75;
}

.ngp-about-why-card>a {
    position: absolute;

    left: 23px;
    right: 23px;
    bottom: 21px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    color: #805333;

    font-size: 14px;

    font-weight: 800;
}

.ngp-about-why-card>a svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   PROMISE
========================================================= */

.ngp-about-promise {
    padding: 50px 0;

    background: #fffdf9;
}

.ngp-about-promise-card {
    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    padding: 55px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(135deg,
            #291321,
            #4a203e);

    box-shadow: 0 25px 60px rgba(41, 19, 33, .15);
}

.ngp-about-promise-icon {
    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(226, 194, 125, .3);

    border-radius: 50%;

    color: var(--ngp-about-gold-light);
}

.ngp-about-promise-icon svg {
    width: 25px;
    height: 25px;
}

.ngp-about-promise-label {
    display: block;

    margin-bottom: 10px;

    color: var(--ngp-about-gold-light);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .14em;
}

.ngp-about-promise-card h2 {
    max-width: 750px;

    margin: 0 0 18px;

    color: #fff;

    font-family: Georgia, serif;

    font-size: 38px;

    line-height: 1.15;
}

.ngp-about-promise-card p {
    max-width: 850px;

    margin: 0 0 12px;

    color: rgba(255, 255, 255, .64);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   STATS
========================================================= */

.ngp-about-stats {
    padding: 0 0 30px;

    background: #fffdf9;
}

.ngp-about-stats-grid {
    display: grid;

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

    overflow: hidden;

    border: 5px solid rgba(90, 38, 71, 0.1);

    border-radius: 17px;

    background: #fff;
}

.ngp-about-stats-grid>div {
    min-height: 135px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    padding: 15px;
}

.ngp-about-stats-grid>div+div {
    border-left: 1px solid rgba(67, 34, 55, .10);
}

.ngp-about-stats-grid span {
    width: 37px;
    height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-stats-grid svg {
    width: 16px;
    height: 16px;
}

.ngp-about-stats-grid strong {
    color: var(--ngp-about-text);

    font-family: Georgia, serif;

    font-size: 21px;
}

.ngp-about-stats-grid small {
    margin-top: 4px;

    color: var(--ngp-about-muted);

    font-size: 14px;
}


/* =========================================================
   VALUES
========================================================= */

.ngp-about-values {
    padding: 40px 0;

    background: var(--ngp-about-cream);
}

.ngp-about-values-heading {
    max-width: 700px;

    margin-bottom: 40px;
}

.ngp-about-values-heading h2 {
    margin: 0 0 12px;

    color: var(--ngp-about-text);

    font-family: Georgia, serif;

    font-size: 42px;
}

.ngp-about-values-heading h2 span {
    color: var(--ngp-about-gold);

    font-style: italic;
}

.ngp-about-values-heading p {
    margin: 0;

    color: var(--ngp-about-muted);

    font-size: 15px;

    line-height: 1.8;
}

.ngp-about-values-grid {
    display: grid;

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

    gap: 14px;
}

.ngp-about-value-card {
    display: grid;

    grid-template-columns:
        35px 55px 1fr;

    align-items: center;

    gap: 16px;

    min-height: 140px;

    padding: 20px 23px;

    border: 1px solid rgba(67, 34, 55, .10);

    border-radius: 16px;

    background: #fff;

    transition: .3s ease;
}

.ngp-about-value-card:hover {
    transform: translateY(-4px);

    border-color: rgba(193, 138, 69, .3);

    box-shadow: 0 15px 35px rgba(41, 19, 33, .08);
}

.ngp-about-value-card>span {
    align-self: flex-start;

    color: var(--ngp-about-gold);

    font-size: 14px;

    font-weight: 800;
}

.ngp-about-value-card>svg {
    width: 55px;
    height: 55px;

    padding: 17px;

    box-sizing: content-box;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-value-card h3 {
    margin: 0 0 7px;

    color: var(--ngp-about-text);

    font-size: 17px;
}

.ngp-about-value-card p {
    margin: 0;

    color: var(--ngp-about-muted);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   JOURNEY
========================================================= */

.ngp-about-journey {
    padding: 50px 0;

    background: #fffdf9;
}

.ngp-about-journey-grid {
    display: grid;

    grid-template-columns:
        1fr .9fr;

    align-items: center;

    gap: 70px;
}

.ngp-about-journey-content h2 {
    margin: 0 0 20px;

    color: var(--ngp-about-text);

    font-family: Georgia, serif;

    font-size: 45px;

    line-height: 1.1;
}

.ngp-about-journey-content h2 span {
    color: var(--ngp-about-gold);

    font-style: italic;
}

.ngp-about-journey-content>p {
    max-width: 650px;

    margin: 0 0 13px;

    color: var(--ngp-about-muted);

    font-size: 15px;

    line-height: 1.8;
}

.ngp-about-journey-points {
    display: grid;

    gap: 12px;

    margin: 25px 0;
}

.ngp-about-journey-points>div {
    display: flex;

    align-items: center;

    gap: 10px;
}

.ngp-about-journey-points span {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-journey-points svg {
    width: 14px;
    height: 14px;
}

.ngp-about-journey-points strong {
    color: var(--ngp-about-text);

    font-size: 14px;
}

.ngp-about-journey-visual {
    min-height: 430px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.ngp-about-journey-card {
    width: min(100%, 500px);

    min-height: 410px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: space-between;

    padding: 28px;

    text-align: center;

    border: 1px solid rgba(226, 194, 125, .27);

    border-radius: 25px;

    background:
        linear-gradient(145deg,
            #291321,
            #4b2140);

    box-shadow:
        0 30px 60px rgba(41, 19, 33, .18);
}

.ngp-about-journey-card>span {
    align-self: flex-start;

    color: var(--ngp-about-gold-light);

    font-family: Georgia, serif;

    font-size: 18px;

    letter-spacing: .1em;
}

.ngp-about-journey-card>div {
    display: flex;

    align-items: center;

    flex-direction: column;
}

.ngp-about-journey-card>div>svg {
    width: 55px;
    height: 55px;

    margin-bottom: 18px;

    color: var(--ngp-about-gold-light);
}

.ngp-about-journey-card h3 {
    margin: 0 0 13px;

    color: #fff;

    font-family: Georgia, serif;

    font-size: 39px;
}

.ngp-about-journey-card h3 em {
    color: var(--ngp-about-gold-light);

    font-style: italic;
}

.ngp-about-journey-card p {
    max-width: 340px;

    margin: 0;

    color: rgba(255, 255, 255, .6);

    font-size: 14px;

    line-height: 1.7;
}

.ngp-about-journey-card>small {
    width: 100%;

    padding-top: 15px;

    border-top: 1px solid rgba(226, 194, 125, .14);

    color: rgba(255, 255, 255, .5);

    font-size: 14px;
}


/* =========================================================
   CATEGORIES
========================================================= */

.ngp-about-categories {
    padding: 50px 0;

    background: var(--ngp-about-cream);
}

.ngp-about-view-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #593245;

    font-size: 14px;

    font-weight: 800;
}

.ngp-about-view-link:hover {
    color: var(--ngp-about-gold);
}

.ngp-about-view-link svg {
    width: 16px;
    height: 16px;
}

.ngp-about-category-grid {
    display: grid;

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

    gap: 14px;
}

.ngp-about-category-card {
    position: relative;

    min-height: 230px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 22px;

    overflow: hidden;

    border: 1px solid rgba(67, 34, 55, .10);

    border-radius: 17px;

    background: #fff;

    transition: .3s ease;
}

.ngp-about-category-card:hover {
    transform: translateY(-5px);

    border-color: rgba(193, 138, 69, .35);

    box-shadow: 0 18px 40px rgba(41, 19, 33, .08);
}

.ngp-about-category-card>span {
    position: absolute;

    top: 17px;
    left: 18px;

    color: var(--ngp-about-gold);

    font-size: 14px;

    font-weight: 800;
}

.ngp-about-category-card>i {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 45px;
    height: 45px;

    padding: 13px;

    box-sizing: content-box;

    border-radius: 50%;

    background: #f7eddf;

    color: var(--ngp-about-gold);
}

.ngp-about-category-card h3 {
    margin: 0 0 8px;

    color: var(--ngp-about-text);

    font-size: 17px;
}

.ngp-about-category-card p {
    margin: 0;

    color: var(--ngp-about-muted);

    font-size: 14px;

    line-height: 1.65;
}

.ngp-about-category-card b {
    position: absolute;

    right: 18px;
    bottom: 18px;

    color: var(--ngp-about-gold);
}

.ngp-about-category-card b svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   FINAL
========================================================= */

.ngp-about-final {
    padding: 50px 0;

    background: #fffdf9;
}

.ngp-about-final-card {
    position: relative;

    padding: 70px 35px;

    text-align: center;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(145deg,
            #291321,
            #4a203e);

    box-shadow:
        0 25px 60px rgba(41, 19, 33, .17);
}

.ngp-about-final-card::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -210px;
    top: -250px;

    border: 1px solid rgba(226, 194, 125, .11);

    border-radius: 50%;
}

.ngp-about-final-card::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -170px;
    bottom: -220px;

    border: 1px solid rgba(226, 194, 125, .10);

    border-radius: 50%;
}

.ngp-about-final-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    border: 1px solid rgba(226, 194, 125, .28);

    border-radius: 50%;

    color: var(--ngp-about-gold-light);
}

.ngp-about-final-icon svg {
    width: 22px;
    height: 22px;
}

.ngp-about-final-card>span {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 12px;

    color: var(--ngp-about-gold-light);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .14em;
}

.ngp-about-final-card h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #fff;

    font-family: Georgia, serif;

    font-size: 47px;

    line-height: 1.1;
}

.ngp-about-final-card h2 em {
    display: block;

    color: var(--ngp-about-gold-light);

    font-style: italic;
}

.ngp-about-final-card>p {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin: 0 auto 27px;

    color: rgba(255, 255, 255, .62);

    font-size: 15px;

    line-height: 1.8;
}

.ngp-about-final-buttons {
    position: relative;
    z-index: 2;

    justify-content: center;
}

.ngp-about-final-buttons .ngp-about-btn-primary {
    background: var(--ngp-about-gold-light);

    color: var(--ngp-about-plum);
}

.ngp-about-final-buttons .ngp-about-btn-primary:hover {
    background: #efd591;

    color: var(--ngp-about-plum);
}

.ngp-about-final-buttons .ngp-about-btn-secondary {
    border-color: rgba(226, 194, 125, .28);

    background: rgba(255, 255, 255, .03);

    color: rgba(255, 255, 255, .85);
}

.ngp-about-final-buttons .ngp-about-btn-secondary:hover {
    border-color: var(--ngp-about-gold-light);

    color: var(--ngp-about-gold-light);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ngp-about-hero-grid {
        gap: 35px;
    }

    .ngp-about-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ngp-about-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ngp-about-range-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .ngp-about-hero-grid {
        grid-template-columns: 1fr;
    }

    .ngp-about-hero-content {
        text-align: center;
    }

    .ngp-about-hero-content>p {
        margin-left: auto;
        margin-right: auto;
    }

    .ngp-about-hero-buttons,
    .ngp-about-final-buttons {
        justify-content: center;
    }

    .ngp-about-hero-trust {
        justify-content: center;
    }

    .ngp-about-story-grid,
    .ngp-about-journey-grid {
        grid-template-columns: 1fr;
    }

    .ngp-about-story-visual {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .ngp-about-promise-card {
        grid-template-columns: 1fr;
    }

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

    .ngp-about-stats-grid>div:nth-child(3),
    .ngp-about-stats-grid>div:nth-child(4) {
        border-top: 1px solid rgba(67, 34, 55, .10);
    }

    .ngp-about-stats-grid>div:nth-child(3) {
        border-left: 0;
    }

    .ngp-about-heading-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ngp-about-container {
        width: calc(100% - 26px);
    }

    .ngp-about-hero {
        padding: 60px 0 65px;
    }

    .ngp-about-hero-content h1 {
        font-size: 42px;
    }

    .ngp-about-hero-content>p {
        font-size: 14px;
    }

    .ngp-about-hero-buttons {
        flex-direction: column;
    }

    .ngp-about-hero-buttons a {
        width: 100%;
    }

    .ngp-about-hero-trust {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .ngp-about-hero-visual {
        min-height: 390px;
    }

    .ngp-about-brand-card {
        width: 270px;
        height: 270px;
    }

    .ngp-about-brand-small {
        font-size: 14px;
    }

    .ngp-about-brand-card h2 {
        font-size: 27px;
    }

    .ngp-about-floating-card {
        padding: 8px 10px;
    }

    .ngp-about-floating-card strong,
    .ngp-about-floating-card small {
        font-size: 14px;
    }

    .ngp-about-float-one {
        right: -5px;
        top: 45px;
    }

    .ngp-about-float-two {
        left: -5px;
        bottom: 35px;
    }

    .ngp-about-story,
    .ngp-about-range,
    .ngp-about-why,
    .ngp-about-promise,
    .ngp-about-values,
    .ngp-about-journey,
    .ngp-about-categories,
    .ngp-about-final {
        padding: 65px 0;
    }

    .ngp-about-story-card {
        min-height: 340px;
        padding: 27px;
    }

    .ngp-about-story-card h2,
    .ngp-about-story-content h2,
    .ngp-about-heading-row h2,
    .ngp-about-values-heading h2,
    .ngp-about-journey-content h2 {
        font-size: 32px;
    }

    .ngp-about-story-content>p,
    .ngp-about-heading-row>p {
        font-size: 14px;
    }

    .ngp-about-range-grid,
    .ngp-about-why-grid,
    .ngp-about-values-grid,
    .ngp-about-category-grid {
        grid-template-columns: 1fr;
    }

    .ngp-about-range-card {
        min-height: 165px;
    }

    .ngp-about-why-card {
        min-height: 285px;
    }

    .ngp-about-promise-card {
        padding: 32px 24px;
        border-radius: 18px;
    }

    .ngp-about-promise-card h2 {
        font-size: 29px;
    }

    .ngp-about-promise-card p {
        font-size: 14px;
    }

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

    .ngp-about-stats-grid>div {
        min-height: 120px;
    }

    .ngp-about-stats-grid>div:nth-child(odd) {
        border-left: 0;
    }

    .ngp-about-stats-grid>div:nth-child(3),
    .ngp-about-stats-grid>div:nth-child(4) {
        border-top: 1px solid rgba(67, 34, 55, .10);
    }

    .ngp-about-value-card {
        grid-template-columns: 28px 48px 1fr;
        gap: 10px;
        padding: 17px;
    }

    .ngp-about-value-card>svg {
        width: 48px;
        height: 48px;
        padding: 14px;
    }

    .ngp-about-value-card h3 {
        font-size: 16px;
    }

    .ngp-about-journey-visual {
        min-height: 380px;
    }

    .ngp-about-journey-card {
        min-height: 350px;
        padding: 22px;
    }

    .ngp-about-journey-card h3 {
        font-size: 31px;
    }

    .ngp-about-category-card {
        min-height: 210px;
    }

    .ngp-about-final-card {
        padding: 45px 22px;
        border-radius: 18px;
    }

    .ngp-about-final-card h2 {
        font-size: 34px;
    }

    .ngp-about-final-card>p {
        font-size: 14px;
    }

    .ngp-about-final-buttons {
        flex-direction: column;
    }

    .ngp-about-final-buttons a {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .ngp-about-hero-content h1 {
        font-size: 36px;
    }

    .ngp-about-brand-card {
        width: 245px;
        height: 245px;
    }

    .ngp-about-brand-card h2 {
        font-size: 24px;
    }

    .ngp-about-floating-card {
        max-width: 175px;
    }

    .ngp-about-floating-card>span {
        width: 31px;
        height: 31px;
    }

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

    .ngp-about-stats-grid>div+div {
        border-left: 0;
        border-top: 1px solid rgba(67, 34, 55, .10);
    }

    .ngp-about-journey-card h3 {
        font-size: 28px;
    }

}

































/* =====================================================
   NGPMART PRIVACY POLICY
   COMPLETE CSS PART 1
===================================================== */


/* ===============================
   ROOT VARIABLES
================================ */

.ngp-privacy-page {

    --ngp-plum: #321526;
    --ngp-plum-light: #512842;

    --ngp-gold: #c18a45;
    --ngp-gold-light: #e5c982;

    --ngp-bg: #fffaf4;
    --ngp-white: #ffffff;

    --ngp-text: #382333;
    --ngp-muted: #766a72;

    --ngp-border: rgba(56, 35, 51, .12);

    background:
        radial-gradient(circle at top left,
            rgba(193, 138, 69, .12),
            transparent 28%),
        var(--ngp-bg);


    color: var(--ngp-text);

    font-size: 14px;

    overflow: hidden;

}



.ngp-privacy-container {

    width: min(1240px, calc(100% - 50px));

    margin: auto;

}





/* =====================================================
   HERO SECTION
===================================================== */


.ngp-privacy-hero {

    min-height: 430px;

    display: grid;

    grid-template-columns: 1fr .75fr;

    align-items: center;

    gap: 45px;

    padding: 65px 0 55px;

}





.ngp-privacy-tag {

    display: inline-flex;

    align-items: center;

    padding: 8px 18px;

    border-radius: 50px;

    background: #fbefdc;

    color: var(--ngp-gold);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .15em;

}





.ngp-privacy-hero h1 {


    margin: 22px 0 18px;


    font-family: Georgia,
        "Times New Roman",
        serif;


    font-size: clamp(52px, 6vw, 78px);


    line-height: .95;


    font-weight: 500;


    letter-spacing: -.03em;


}




.ngp-privacy-hero h1 em {


    display: block;

    color: var(--ngp-gold);

    font-style: italic;


}





.ngp-privacy-hero p {


    max-width: 560px;

    margin: 0;


    color: var(--ngp-muted);


    font-size: 15px;


    line-height: 1.8;


}






/* HERO BADGES */


.ngp-privacy-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;


}



.ngp-privacy-meta div {


    display: flex;

    align-items: center;

    gap: 8px;


    padding: 10px 16px;


    border-radius: 50px;


    background: #fff;


    border: 1px solid var(--ngp-border);


    font-size: 13px;


    font-weight: 700;


}



.ngp-privacy-meta svg {


    width: 16px;

    height: 16px;

    color: var(--ngp-gold);

}





/* =====================================================
   HERO VISUAL
===================================================== */


.ngp-privacy-hero-image {

    position: relative;

    height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.ngp-privacy-circle {


    position: absolute;


    width: 320px;


    height: 320px;


    border-radius: 50%;


    border: 1px solid rgba(193, 138, 69, .25);


}



.ngp-privacy-circle::before {


    content: "";


    position: absolute;


    inset: 35px;


    border-radius: 50%;


    border: 1px dashed rgba(193, 138, 69, .25);


}






.ngp-privacy-shield-card {


    position: relative;


    width: 210px;


    height: 240px;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    border-radius: 120px 120px 80px 80px;



    background:

        linear-gradient(145deg,
            var(--ngp-plum),
            var(--ngp-plum-light));



    color: white;



    box-shadow:

        0 25px 60px rgba(50, 21, 38, .25);


}




.ngp-privacy-shield-card svg {


    width: 42px;

    height: 42px;


    color: var(--ngp-gold-light);


    margin-bottom: 15px;


}



.ngp-privacy-shield-card h3 {


    margin: 0;


    font-family: Georgia, serif;


    font-size: 26px;


    font-weight: 500;


}



.ngp-privacy-shield-card span {


    margin-top: 5px;


    color: var(--ngp-gold-light);


    font-weight: 700;


}







/* =====================================================
   MAIN LAYOUT
===================================================== */


.ngp-privacy-layout {


    display: grid;


    grid-template-columns: 260px 1fr;


    gap: 45px;


    padding-bottom: 90px;


}







/* =====================================================
   SIDEBAR
===================================================== */


.ngp-privacy-sidebar-box {


    position: sticky;


    top: 100px;


    padding: 22px;


    background: #fff;


    border-radius: 18px;


    border: 1px solid var(--ngp-border);


    box-shadow:

        0 15px 35px rgba(50, 21, 38, .05);


}




.ngp-privacy-sidebar-box h3 {


    margin: 0 0 18px;


    font-family: Georgia, serif;


    font-size: 22px;


}





.ngp-privacy-sidebar-box ul {


    list-style: none;

    padding: 0;

    margin: 0;


}





.ngp-privacy-sidebar-box li {


    margin-bottom: 6px;


}




.ngp-privacy-sidebar-box a {


    display: block;


    padding: 9px 10px;


    border-radius: 8px;


    text-decoration: none;


    color: var(--ngp-muted);


    font-size: 13px;


    transition: .3s ease;


}




.ngp-privacy-sidebar-box a:hover,
.ngp-privacy-sidebar-box a.active {


    background: #fbf1df;


    color: var(--ngp-text);


    font-weight: 700;


}







/* =====================================================
   CONTENT SECTIONS
===================================================== */


.ngp-privacy-section {


    display: grid;


    grid-template-columns: 40px 1fr;


    gap: 18px;


    margin-bottom: 55px;


    scroll-margin-top: 100px;


}




.ngp-privacy-number {


    color: var(--ngp-gold);


    font-size: 14px;


    font-weight: 800;


}





.ngp-privacy-label {


    display: block;


    margin-bottom: 8px;


    color: #a57a4a;


    font-size: 12px;


    font-weight: 800;


    letter-spacing: .14em;


}





.ngp-privacy-section h2 {


    margin: 0 0 15px;


    font-family: Georgia,
        "Times New Roman",
        serif;


    font-size: 38px;


    line-height: 1.1;


    font-weight: 500;


}



.ngp-privacy-section h2 em {


    color: var(--ngp-gold);


    font-style: italic;


}




.ngp-privacy-section p {


    margin: 0 0 12px;


    color: var(--ngp-muted);


    line-height: 1.8;


}







/* =====================================================
   INFORMATION CARDS
===================================================== */


.ngp-privacy-data-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 12px;


    margin: 22px 0;


}




.ngp-privacy-data-card {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 16px;


    background: #fff;


    border-radius: 14px;


    border: 1px solid var(--ngp-border);


    transition: .3s ease;


}




.ngp-privacy-data-card:hover {


    transform: translateY(-4px);


    box-shadow:

        0 15px 30px rgba(0, 0, 0, .05);


}




.ngp-privacy-data-card svg {


    width: 19px;


    color: var(--ngp-gold);


}



.ngp-privacy-data-card span {


    font-weight: 700;


}






/* =====================================================
   HIGHLIGHT BOX
===================================================== */


.ngp-privacy-highlight-box {


    display: flex;


    align-items: center;


    gap: 15px;


    padding: 18px;


    margin-top: 20px;


    border-radius: 14px;


    background: #fbf1df;


    border-left: 4px solid var(--ngp-gold);


}



.ngp-privacy-highlight-box svg {


    width: 22px;


    color: var(--ngp-gold);


}



.ngp-privacy-highlight-box p {


    margin: 0;


}





/* =====================================================
   SERVICE GRID
===================================================== */


.ngp-privacy-service-grid {


    display: grid;


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


    gap: 15px;


    margin-top: 25px;


}





.ngp-privacy-service-grid div {


    padding: 22px;


    text-align: center;


    background: white;


    border-radius: 16px;


    border: 1px solid var(--ngp-border);


    transition: .3s ease;


}




.ngp-privacy-service-grid div:hover {


    transform: translateY(-5px);


}



.ngp-privacy-service-grid svg {


    width: 25px;


    color: var(--ngp-gold);


    margin-bottom: 12px;


}



.ngp-privacy-service-grid h4 {


    margin: 0;


    font-size: 14px;


}






/* =====================================================
   NGPMART PRIVACY POLICY
   COMPLETE CSS PART 2
===================================================== */



/* =====================================================
   SECURITY CARD
===================================================== */


.ngp-privacy-security-card {


    display: flex;

    align-items: flex-start;

    gap: 20px;


    padding: 28px;


    margin-top: 25px;


    border-radius: 22px;



    background:

        linear-gradient(135deg,
            var(--ngp-plum),
            var(--ngp-plum-light));



    color: white;


    position: relative;

    overflow: hidden;


}




.ngp-privacy-security-card::after {


    content: "";


    position: absolute;


    width: 220px;


    height: 220px;


    right: -90px;


    top: -100px;


    border-radius: 50%;


    border: 1px solid rgba(255, 255, 255, .15);


}



.ngp-privacy-security-card svg {


    width: 35px;

    height: 35px;


    flex-shrink: 0;


    color: var(--ngp-gold-light);


}



.ngp-privacy-security-card h3 {


    margin: 0 0 10px;


    font-family: Georgia, serif;


    font-size: 26px;


    font-weight: 500;


}




.ngp-privacy-security-card p {


    margin: 0;


    color: rgba(255, 255, 255, .7);


    line-height: 1.7;


}





/* =====================================================
   FAQ SECTION
===================================================== */


.ngp-privacy-faq {


    margin-top: 80px;


    margin-bottom: 70px;


}



.ngp-privacy-faq h2 {


    margin: 10px 0 30px;


    font-family: Georgia, serif;


    font-size: 38px;


    font-weight: 500;


}




.ngp-privacy-faq h2 em {


    color: var(--ngp-gold);


    font-style: italic;


}





.ngp-privacy-faq-wrapper {


    border-top: 1px solid var(--ngp-border);


}



.ngp-privacy-faq-item {


    border-bottom: 1px solid var(--ngp-border);


}



.ngp-privacy-faq-item button {


    width: 100%;


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 20px 0;


    background: none;


    border: none;


    cursor: pointer;


    text-align: left;


    color: var(--ngp-text);


    font-size: 15px;


    font-weight: 700;


}




.ngp-privacy-faq-item button svg {


    width: 18px;


    height: 18px;


    color: var(--ngp-gold);


    transition: .3s ease;


}



.ngp-privacy-faq-item.active button svg {


    transform: rotate(45deg);


}





.ngp-privacy-faq-answer {


    display: none;


    padding: 0 0 20px;


}



.ngp-privacy-faq-item.active .ngp-privacy-faq-answer {


    display: block;


}



.ngp-privacy-faq-answer p {


    margin: 0;


    color: var(--ngp-muted);


    line-height: 1.8;


}






/* =====================================================
   CONTACT CTA
===================================================== */


.ngp-privacy-contact {


    position: relative;


    display: flex;


    justify-content: space-between;


    align-items: center;


    gap: 35px;



    padding: 40px 45px;


    margin-bottom: 80px;


    border-radius: 28px;



    overflow: hidden;


    background:


        linear-gradient(135deg,

            var(--ngp-plum),

            var(--ngp-plum-light));



    color: white;


}





.ngp-privacy-contact::after {


    content: "";


    position: absolute;


    width: 300px;


    height: 300px;


    right: -120px;


    top: -120px;


    border-radius: 50%;


    border: 1px solid rgba(229, 201, 130, .18);


}




.ngp-privacy-contact span {


    color: var(--ngp-gold-light);


    font-size: 12px;


    font-weight: 800;


    letter-spacing: .15em;


}



.ngp-privacy-contact h2 {


    margin: 10px 0;


    font-family: Georgia, serif;


    font-size: 40px;


    font-weight: 500;


}



.ngp-privacy-contact h2 em {


    color: var(--ngp-gold-light);


    font-style: italic;


}




.ngp-privacy-contact p {


    margin: 0;


    max-width: 500px;


    color: rgba(255, 255, 255, .7);


}




.ngp-privacy-contact a {


    position: relative;


    z-index: 2;


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 14px 25px;


    border-radius: 50px;


    background: var(--ngp-gold-light);


    color: var(--ngp-plum);


    text-decoration: none;


    font-weight: 800;


    transition: .3s ease;


}



.ngp-privacy-contact a:hover {


    transform: translateY(-3px);


    background: white;


}




.ngp-privacy-contact a svg {


    width: 16px;


}







/* =====================================================
   ACTIVE MENU
===================================================== */


.ngp-privacy-sidebar-box a.active {


    background: #fbf1df;


    color: var(--ngp-text);


    font-weight: 800;


}






/* =====================================================
   ANIMATION SUPPORT
===================================================== */


.ngp-privacy-section,
.ngp-privacy-data-card,
.ngp-privacy-service-grid div,
.ngp-privacy-security-card {


    transition: .5s ease;


}






/* =====================================================
   TABLET RESPONSIVE
===================================================== */


@media(max-width:1050px) {



    .ngp-privacy-hero {


        grid-template-columns: 1fr;


        text-align: center;


    }



    .ngp-privacy-hero p {


        margin: auto;


    }



    .ngp-privacy-meta {


        justify-content: center;


    }




    .ngp-privacy-hero-image {


        height: 330px;


    }



    .ngp-privacy-layout {


        grid-template-columns: 1fr;


    }



    .ngp-privacy-sidebar-box {


        position: relative;


        top: auto;


    }



    .ngp-privacy-service-grid {


        grid-template-columns: 1fr 1fr;


    }



}







/* =====================================================
   MOBILE RESPONSIVE
===================================================== */


@media(max-width:700px) {



    .ngp-privacy-container {


        width: calc(100% - 25px);


    }




    .ngp-privacy-hero {


        padding: 45px 0;


    }



    .ngp-privacy-hero h1 {


        font-size: 50px;


    }




    .ngp-privacy-meta {


        flex-direction: column;


    }



    .ngp-privacy-meta div {


        justify-content: center;


    }



    .ngp-privacy-circle {


        width: 250px;


        height: 250px;


    }




    .ngp-privacy-shield-card {


        width: 170px;


        height: 200px;


    }



    .ngp-privacy-layout {


        padding-bottom: 50px;


    }



    .ngp-privacy-section {


        grid-template-columns: 1fr;


        margin-bottom: 40px;


    }



    .ngp-privacy-section h2 {


        font-size: 30px;


    }



    .ngp-privacy-data-grid {


        grid-template-columns: 1fr;


    }




    .ngp-privacy-service-grid {


        grid-template-columns: 1fr;


    }




    .ngp-privacy-security-card {


        flex-direction: column;


        padding: 22px;


    }



    .ngp-privacy-faq h2 {


        font-size: 30px;


    }



    .ngp-privacy-contact {


        flex-direction: column;


        align-items: flex-start;


        padding: 30px 22px;


    }



    .ngp-privacy-contact h2 {


        font-size: 32px;


    }



    .ngp-privacy-contact a {


        width: 100%;


        justify-content: center;


    }



}




















/**--------------------------TERM AND CONDITION----------------------------**/


/* =====================================================
   NGPMART TERMS & CONDITIONS
   PART 2 : COMPLETE CSS
===================================================== */


.ngp-terms-page {


    --terms-plum: #321526;

    --terms-plum-light: #512842;

    --terms-gold: #c18a45;

    --terms-gold-light: #e5c982;

    --terms-bg: #fffaf4;

    --terms-text: #382333;

    --terms-muted: #766a72;

    --terms-border: rgba(56, 35, 51, .12);



    background:

        radial-gradient(circle at top left,
            rgba(193, 138, 69, .12),
            transparent 30%),

        var(--terms-bg);


    color: var(--terms-text);

}





.ngp-terms-container {


    width: min(1240px, calc(100% - 50px));


    margin: auto;


}






/* =====================================================
   HERO SECTION
===================================================== */


.ngp-terms-hero {


    min-height: 430px;


    display: grid;


    grid-template-columns: 1fr .8fr;


    align-items: center;


    gap: 50px;


    padding: 70px 0 55px;


}




.ngp-terms-tag {


    display: inline-flex;


    padding: 8px 18px;


    border-radius: 50px;


    background: #fbefdc;


    color: var(--terms-gold);


    font-size: 12px;


    font-weight: 800;


    letter-spacing: .15em;


}





.ngp-terms-hero h1 {


    margin: 25px 0 20px;


    font-family: Georgia, serif;


    font-size: clamp(50px, 6vw, 78px);


    line-height: .95;


    font-weight: 500;


}



.ngp-terms-hero h1 em {


    display: block;


    color: var(--terms-gold);


    font-style: italic;


}





.ngp-terms-hero p {


    max-width: 560px;


    color: var(--terms-muted);


    line-height: 1.8;


}





.ngp-terms-meta {


    display: flex;


    gap: 12px;


    margin-top: 25px;


    flex-wrap: wrap;


}




.ngp-terms-meta div {


    display: flex;


    align-items: center;


    gap: 8px;


    padding: 10px 18px;


    background: white;


    border-radius: 50px;


    border: 1px solid var(--terms-border);


    font-weight: 700;


}



.ngp-terms-meta svg {


    width: 17px;


    color: var(--terms-gold);


}








/* =====================================================
   HERO CARD
===================================================== */



.ngp-terms-hero-visual {


    height: 350px;


    display: flex;


    align-items: center;


    justify-content: center;


    position: relative;


}





.ngp-terms-circle {


    position: absolute;


    width: 320px;


    height: 320px;


    border-radius: 50%;


    border: 1px solid rgba(193, 138, 69, .25);


}





.ngp-terms-circle::before {


    content: "";


    position: absolute;


    inset: 35px;


    border-radius: 50%;


    border: 1px dashed rgba(193, 138, 69, .25);


}






.ngp-terms-card {


    position: relative;


    width: 220px;


    height: 240px;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    border-radius: 120px 120px 80px 80px;



    background:

        linear-gradient(145deg,
            var(--terms-plum),
            var(--terms-plum-light));



    color: white;



    box-shadow:

        0 25px 60px rgba(50, 21, 38, .25);


}





.ngp-terms-card svg {


    width: 45px;


    height: 45px;


    color: var(--terms-gold-light);


    margin-bottom: 15px;


}





.ngp-terms-card h3 {


    margin: 0;


    font-family: Georgia, serif;


    font-size: 28px;


    font-weight: 500;


}




.ngp-terms-card span {


    color: var(--terms-gold-light);


    margin-top: 5px;


    font-weight: 700;


}










/* =====================================================
   MAIN LAYOUT
===================================================== */


.ngp-terms-layout {


    display: grid;


    grid-template-columns: 260px 1fr;


    gap: 45px;


    padding-bottom: 90px;


}








/* =====================================================
   SIDEBAR
===================================================== */


.ngp-terms-sidebar-box {


    position: sticky;


    top: 100px;


    background: white;


    padding: 22px;


    border-radius: 18px;


    border: 1px solid var(--terms-border);


}





.ngp-terms-sidebar-box h3 {


    margin: 0 0 20px;


    font-family: Georgia, serif;


    font-size: 22px;


}





.ngp-terms-sidebar-box ul {


    list-style: none;


    padding: 0;


    margin: 0;


}





.ngp-terms-sidebar-box li {


    margin-bottom: 7px;


}





.ngp-terms-sidebar-box a {


    display: block;


    padding: 9px;


    color: var(--terms-muted);


    text-decoration: none;


    border-radius: 8px;


    font-size: 13px;


    transition: .3s;


}





.ngp-terms-sidebar-box a:hover,
.ngp-terms-sidebar-box a.active {


    background: #fbf1df;


    color: var(--terms-text);


    font-weight: 700;


}









/* =====================================================
   CONTENT
===================================================== */


.ngp-terms-section {


    display: grid;


    grid-template-columns: 40px 1fr;


    gap: 18px;


    margin-bottom: 55px;


    scroll-margin-top: 100px;


}





.ngp-terms-number {


    color: var(--terms-gold);


    font-weight: 800;


}





.ngp-terms-label {


    display: block;


    color: #a57a4a;


    font-size: 12px;


    font-weight: 800;


    letter-spacing: .14em;


    margin-bottom: 10px;


}





.ngp-terms-section h2 {


    margin: 0 0 15px;


    font-family: Georgia, serif;


    font-size: 38px;


    font-weight: 500;


}



.ngp-terms-section h2 em {


    color: var(--terms-gold);


    font-style: italic;


}




.ngp-terms-section p {


    color: var(--terms-muted);


    line-height: 1.8;


    margin-bottom: 12px;


}









/* =====================================================
   POINT BOXES
===================================================== */


.ngp-terms-points {


    display: grid;


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


    gap: 12px;


    margin-top: 25px;


}





.ngp-terms-points div {


    padding: 16px;


    background: white;


    border-radius: 14px;


    border: 1px solid var(--terms-border);


    display: flex;


    align-items: center;


    gap: 10px;


    font-weight: 700;


}





.ngp-terms-points svg {


    width: 18px;


    color: var(--terms-gold);


}









/* =====================================================
   FEATURE GRID
===================================================== */


.ngp-terms-feature-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 15px;


    margin-top: 25px;


}





.ngp-terms-feature-grid div {


    padding: 22px;


    background: white;


    border-radius: 16px;


    border: 1px solid var(--terms-border);


}





.ngp-terms-feature-grid svg {


    width: 25px;


    color: var(--terms-gold);


}



.ngp-terms-feature-grid h4 {


    margin: 15px 0 5px;


    font-size: 17px;


}





.ngp-terms-feature-grid p {


    margin: 0;


    font-size: 14px;


}








/* =====================================================
   PAYMENT BOX
===================================================== */


.ngp-terms-payment-box {


    display: flex;


    gap: 18px;


    align-items: center;


    padding: 25px;


    border-radius: 20px;


    background:

        linear-gradient(135deg,
            var(--terms-plum),
            var(--terms-plum-light));


    color: white;


    margin-top: 25px;


}





.ngp-terms-payment-box svg {


    width: 35px;


    color: var(--terms-gold-light);


}



.ngp-terms-payment-box h3 {


    margin: 0 0 8px;


    font-family: Georgia, serif;


    font-size: 24px;


}



.ngp-terms-payment-box p {


    margin: 0;


    color: rgba(255, 255, 255, .7);


}









/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1000px) {


    .ngp-terms-hero {


        grid-template-columns: 1fr;

        text-align: center;


    }


    .ngp-terms-hero p {


        margin: auto;


    }



    .ngp-terms-meta {


        justify-content: center;


    }



    .ngp-terms-layout {


        grid-template-columns: 1fr;


    }



    .ngp-terms-sidebar-box {


        position: relative;


    }



}



@media(max-width:700px) {


    .ngp-terms-container {


        width: calc(100% - 25px);


    }



    .ngp-terms-hero {


        padding: 45px 0;


    }



    .ngp-terms-hero h1 {


        font-size: 50px;


    }




    .ngp-terms-section {


        grid-template-columns: 1fr;


    }



    .ngp-terms-points {


        grid-template-columns: 1fr;


    }



    .ngp-terms-feature-grid {


        grid-template-columns: 1fr;


    }



    .ngp-terms-payment-box {


        flex-direction: column;


        align-items: flex-start;


    }


}





/* =====================================================
   NGPMART TERMS & CONDITIONS
   MOBILE OPTIMIZATION CSS
===================================================== */



@media(max-width:768px) {



    /* CONTAINER */

    .ngp-terms-container {

        width: calc(100% - 30px);

    }




    /* HERO */

    .ngp-terms-hero {

        min-height: auto;

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px 0 35px;

        text-align: center;

    }



    .ngp-terms-tag {

        font-size: 11px;

        padding: 7px 14px;

    }



    .ngp-terms-hero h1 {

        font-size: 45px;

        line-height: 1;

        margin: 18px 0;

    }



    .ngp-terms-hero p {

        font-size: 14px;

        line-height: 1.7;

    }



    .ngp-terms-meta {

        justify-content: center;

        flex-direction: column;

        align-items: center;

    }



    .ngp-terms-meta div {

        width: 100%;

        justify-content: center;

        padding: 12px;

    }




    /* HERO VISUAL */

    .ngp-terms-hero-visual {

        height: 270px;

    }



    .ngp-terms-circle {

        width: 240px;

        height: 240px;

    }



    .ngp-terms-circle::before {

        inset: 25px;

    }



    .ngp-terms-card {

        width: 160px;

        height: 185px;

    }



    .ngp-terms-card svg {

        width: 35px;

    }



    .ngp-terms-card h3 {

        font-size: 22px;

    }





    /* MAIN LAYOUT */


    .ngp-terms-layout {

        display: block;

        padding-bottom: 50px;

    }



    /* SIDEBAR */


    .ngp-terms-sidebar {

        margin-bottom: 30px;

    }



    .ngp-terms-sidebar-box {

        position: relative;

        top: auto;

        padding: 18px;

    }



    .ngp-terms-sidebar-box h3 {

        font-size: 20px;

    }



    .ngp-terms-sidebar-box a {

        font-size: 13px;

        padding: 8px;

    }







    /* CONTENT */


    .ngp-terms-section {

        display: block;

        margin-bottom: 40px;

    }



    .ngp-terms-number {

        display: block;

        margin-bottom: 10px;

    }



    .ngp-terms-section h2 {

        font-size: 30px;

        line-height: 1.2;

    }



    .ngp-terms-section p {

        font-size: 14px;

        line-height: 1.7;

    }






    /* POINT CARDS */


    .ngp-terms-points {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .ngp-terms-points div {

        padding: 14px;

    }




    /* ACCOUNT FEATURE CARDS */


    .ngp-terms-feature-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .ngp-terms-feature-grid div {

        padding: 18px;

    }





    /* PAYMENT BOX */


    .ngp-terms-payment-box {

        padding: 20px;

        gap: 15px;

    }



    .ngp-terms-payment-box h3 {

        font-size: 20px;

    }



    .ngp-terms-payment-box p {

        font-size: 13px;

    }







    /* FAQ */


    .ngp-terms-faq {

        margin-top: 50px;

    }



    .ngp-terms-faq h2 {

        font-size: 30px;

    }



    .ngp-terms-faq-item button {

        font-size: 14px;

        gap: 15px;

        padding: 18px 0;

    }





    /* CTA */


    .ngp-terms-contact {

        flex-direction: column;

        align-items: flex-start;

        padding: 30px 20px;

        gap: 25px;

        margin-bottom: 40px;

    }



    .ngp-terms-contact h2 {

        font-size: 30px;

    }



    .ngp-terms-contact p {

        font-size: 14px;

    }



    .ngp-terms-contact a {

        width: 100%;

        justify-content: center;

        padding: 14px;

    }



}







/* SMALL MOBILE */

@media(max-width:420px) {



    .ngp-terms-hero h1 {

        font-size: 38px;

    }



    .ngp-terms-section h2 {

        font-size: 26px;

    }



    .ngp-terms-card {

        width: 145px;

        height: 170px;

    }



    .ngp-terms-circle {

        width: 210px;

        height: 210px;

    }



    .ngp-terms-contact h2 {

        font-size: 26px;

    }


}



















/**----------------------   PRODUCTS  ------------------------**/
/* =====================================================
   NGPMART PRODUCT LISTING PAGE
   PART 2 : COMPLETE CSS
===================================================== */


.ngp-shop-page {

    --shop-plum: #321526;
    --shop-plum-light: #512842;
    --shop-gold: #c18a45;
    --shop-gold-light: #e5c982;
    --shop-bg: #fffaf4;
    --shop-text: #382333;
    --shop-muted: #766a72;
    --shop-border: rgba(56, 35, 51, .12);


    background:

        radial-gradient(circle at top left,
            rgba(193, 138, 69, .12),
            transparent 25%),

        var(--shop-bg);


    padding: 70px 0;

}



.ngp-shop-container {

    width: min(1300px, calc(100% - 50px));

    margin: auto;

}






/* ==========================
   HEADER
========================== */


.ngp-shop-header {


    display: flex;

    justify-content: space-between;

    align-items: center;


    gap: 30px;

    margin-bottom: 45px;


}



.ngp-shop-tag {


    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #fbefdc;

    color: var(--shop-gold);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .15em;


}



.ngp-shop-heading h1 {


    margin: 20px 0 15px;


    font-family: Georgia, serif;


    font-size: 65px;


    line-height: 1;


    font-weight: 500;


}



.ngp-shop-heading h1 em {


    color: var(--shop-gold);

    font-style: italic;

}




.ngp-shop-heading p {


    max-width: 550px;

    color: var(--shop-muted);

    line-height: 1.8;

}




.ngp-shop-total {


    width: 140px;

    height: 140px;


    border-radius: 50%;


    background: white;


    border: 1px solid var(--shop-border);


    display: flex;

    flex-direction: column;


    justify-content: center;

    align-items: center;


}



.ngp-shop-total strong {


    font-family: Georgia, serif;

    font-size: 40px;

    color: var(--shop-gold);


}



.ngp-shop-total span {


    font-weight: 700;

    color: var(--shop-muted);


}








/* ==========================
   MAIN LAYOUT
========================== */


.ngp-shop-layout {


    display: grid;


    grid-template-columns: 260px 1fr;


    gap: 35px;


}







/* ==========================
   FILTER
========================== */


.ngp-shop-filter {


    background: white;


    padding: 25px;


    border-radius: 22px;


    border: 1px solid var(--shop-border);


    height: max-content;


    position: sticky;


    top: 100px;


}





.ngp-shop-filter-head {


    display: flex;

    justify-content: space-between;

    align-items: center;


    margin-bottom: 25px;


}




.ngp-shop-filter-head h3 {


    margin: 0;

    font-family: Georgia, serif;

    font-size: 24px;


}




.ngp-shop-filter-close {


    display: none;

    border: 0;

    background: none;

}




.ngp-shop-filter-group {


    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--shop-border);


}




.ngp-shop-filter-group h4 {


    margin: 0 0 15px;

    font-size: 15px;


}



.ngp-shop-filter-group label {


    display: flex;


    align-items: center;


    gap: 10px;


    margin-bottom: 12px;


    cursor: pointer;


    color: var(--shop-muted);


    font-size: 14px;


}




.ngp-shop-filter-group input {


    width: 16px;

    height: 16px;

    accent-color: var(--shop-gold);


}






/* COLOR */


.ngp-shop-colors {


    display: flex;

    gap: 10px;


}



.ngp-shop-colors span {


    width: 25px;

    height: 25px;

    border-radius: 50%;


    background: #321526;


    border: 2px solid white;


    box-shadow: 0 0 0 1px #ddd;


}


.ngp-shop-colors span:nth-child(2) {

    background: #c18a45;

}


.ngp-shop-colors span:nth-child(3) {

    background: #222;

}


.ngp-shop-colors span:nth-child(4) {

    background: #eee;

}









/* ==========================
   MOBILE FILTER BUTTON
========================== */


.ngp-shop-mobile-filter {


    display: none;

}







/* ==========================
   TOOLBAR
========================== */


.ngp-shop-toolbar {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 16px 20px;


    background: white;


    border-radius: 15px;


    border: 1px solid var(--shop-border);


    margin-bottom: 25px;


}



.ngp-shop-toolbar strong {


    color: var(--shop-gold);


}



.ngp-shop-sort {


    padding: 10px 15px;


    border-radius: 8px;


    border: 1px solid var(--shop-border);


}









/* ==========================
   PRODUCT GRID
========================== */


.ngp-shop-grid {


    display: grid;


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


    gap: 22px;


}








/* PRODUCT CARD */


.ngp-shop-card {


    background: white;


    border-radius: 20px;


    overflow: hidden;


    border: 1px solid var(--shop-border);


    transition: .35s ease;


}



.ngp-shop-card:hover {


    transform: translateY(-8px);


    box-shadow:

        0 25px 50px rgba(50, 21, 38, .10);


}







/* IMAGE */


.ngp-shop-image {


    height: 240px;


    background: #f8f1e7;


    position: relative;


    overflow: hidden;


}



.ngp-shop-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    transition: .5s;


}




.ngp-shop-card:hover .ngp-shop-image img {


    transform: scale(1.08);


}







.ngp-shop-wishlist {


    position: absolute;


    top: 15px;


    right: 15px;


    width: 38px;


    height: 38px;


    border-radius: 50%;


    background: white;


    border: 0;


    display: flex;


    justify-content: center;


    align-items: center;


}



.ngp-shop-wishlist svg {


    width: 18px;


}









/* INFO */


.ngp-shop-info {


    padding: 18px;


}



.ngp-shop-info span {


    color: var(--shop-gold);


    font-size: 12px;


    font-weight: 800;


}



.ngp-shop-info h3 {


    font-family: Georgia, serif;


    font-size: 19px;


    font-weight: 500;


    margin: 10px 0;


    line-height: 1.3;


}






/* PRICE */


.ngp-shop-price {


    display: flex;


    gap: 10px;


    align-items: center;


}



.ngp-shop-price strong {


    font-size: 20px;


    color: var(--shop-plum);


}


.ngp-shop-price del {


    color: #999;

    font-size: 13px;

}








/* ACTION */


.ngp-shop-action {


    margin-top: 15px;


    display: flex;


    justify-content: space-between;


    align-items: center;


}



.ngp-shop-rating {


    color: #d39a3c;


    font-size: 13px;


}



.ngp-shop-action button {


    border: 0;


    background: var(--shop-plum);


    color: white;


    padding: 9px 15px;


    border-radius: 50px;


    font-size: 12px;


}








/* ==========================
   PAGINATION
========================== */


.ngp-shop-pagination {


    display: flex;


    justify-content: center;


    gap: 10px;


    margin-top: 45px;


}



.ngp-shop-pagination button {


    width: 40px;


    height: 40px;


    border-radius: 50%;


    border: 1px solid var(--shop-border);


    background: white;


}



.ngp-shop-pagination button.active {


    background: var(--shop-plum);


    color: white;


}










/* ==========================
   RESPONSIVE
========================== */



@media(max-width:1200px) {


    .ngp-shop-grid {


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


    }


}







@media(max-width:900px) {



    .ngp-shop-header {


        flex-direction: column;

        align-items: flex-start;


    }



    .ngp-shop-heading h1 {


        font-size: 50px;


    }



    .ngp-shop-layout {


        display: block;


    }



    .ngp-shop-filter {


        position: fixed;


        left: -320px;


        top: 0;


        width: 300px;


        height: 100vh;


        z-index: 999;


        transition: .4s;


        overflow-y: auto;


    }



    .ngp-shop-filter.active {


        left: 0;


    }



    .ngp-shop-filter-close {


        display: block;


    }



    .ngp-shop-mobile-filter {


        display: flex;


        align-items: center;


        gap: 8px;


        border: 0;


        background: var(--shop-plum);


        color: white;


        padding: 12px 20px;


        border-radius: 50px;


        margin-bottom: 25px;


    }




    .ngp-shop-grid {


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


    }



}






@media(max-width:600px) {



    .ngp-shop-container {


        width: calc(100% - 25px);


    }



    .ngp-shop-heading h1 {


        font-size: 40px;


    }




    .ngp-shop-grid {


        grid-template-columns: 1fr;


    }



    .ngp-shop-toolbar {


        flex-direction: column;


        align-items: flex-start;


        gap: 15px;


    }


    .ngp-shop-image {


        height: 230px;


    }



}






.ngp-shop-wishlist.active {

    background: #321526;

    color: #e5c982;

}


.ngp-shop-wishlist.active svg {

    fill: #e5c982;

}


.ngp-shop-pagination {


    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 45px;


}



.ngp-shop-pagination button {


    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 1px solid var(--shop-border);

    background: white;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .3s;


}




.ngp-shop-pagination button:hover {


    background: #fbefdc;

    color: #321526;


}



.ngp-shop-pagination button.active {


    background: #321526;

    color: white;

}




.ngp-shop-pagination button:disabled {


    opacity: .4;

    cursor: not-allowed;


}



.ngp-page-numbers {


    display: flex;

    gap: 10px;


}



.ngp-shop-pagination svg {


    width: 18px;

}



























/**-----------------   SHIPPING POLICY  -------------------------**/

/* =====================================================
   NGPMART SHIPPING POLICY PAGE
   PART 2 : COMPLETE CSS
===================================================== */


.ngp-shipping-page {


    --ship-plum: #321526;

    --ship-plum-light: #512842;

    --ship-gold: #c18a45;

    --ship-gold-light: #e5c982;

    --ship-bg: #fffaf4;

    --ship-text: #382333;

    --ship-muted: #766a72;

    --ship-border: rgba(56, 35, 51, .12);



    background:

        radial-gradient(circle at top left,
            rgba(193, 138, 69, .12),
            transparent 30%),

        var(--ship-bg);



    color: var(--ship-text);

    padding: 70px 0;

}




.ngp-shipping-container {


    width: min(1240px, calc(100% - 50px));

    margin: auto;


}






/* =====================================================
   HERO SECTION
===================================================== */


.ngp-shipping-hero {


    display: grid;


    grid-template-columns: 1fr .8fr;


    align-items: center;


    gap: 50px;


    min-height: 430px;


    padding-bottom: 60px;


}




.ngp-shipping-tag {


    display: inline-block;


    padding: 8px 18px;


    border-radius: 50px;


    background: #fbefdc;


    color: var(--ship-gold);


    font-size: 12px;


    font-weight: 800;


    letter-spacing: .15em;


}





.ngp-shipping-hero h1 {


    margin: 25px 0 18px;


    font-family: Georgia, serif;


    font-size: 75px;


    font-weight: 500;


    line-height: .95;


}





.ngp-shipping-hero h1 em {


    display: block;


    color: var(--ship-gold);


    font-style: italic;


}





.ngp-shipping-hero p {


    max-width: 560px;


    color: var(--ship-muted);


    line-height: 1.8;


}





/* META */


.ngp-shipping-meta {


    display: flex;


    gap: 12px;


    flex-wrap: wrap;


    margin-top: 25px;


}



.ngp-shipping-meta div {


    display: flex;


    align-items: center;


    gap: 8px;


    background: white;


    padding: 10px 16px;


    border-radius: 50px;


    border: 1px solid var(--ship-border);


    font-weight: 700;


    font-size: 13px;


}




.ngp-shipping-meta svg {


    width: 17px;


    color: var(--ship-gold);


}








/* HERO VISUAL */


.ngp-shipping-hero-visual {


    height: 360px;


    display: flex;


    justify-content: center;


    align-items: center;


    position: relative;


}





.ngp-shipping-circle {


    position: absolute;


    width: 320px;


    height: 320px;


    border-radius: 50%;


    border: 1px solid rgba(193, 138, 69, .25);


}




.ngp-shipping-circle::before {


    content: "";


    position: absolute;


    inset: 35px;


    border-radius: 50%;


    border: 1px dashed rgba(193, 138, 69, .25);


}





.ngp-shipping-card {


    position: relative;


    width: 220px;


    height: 240px;


    display: flex;


    justify-content: center;


    align-items: center;


    flex-direction: column;



    border-radius: 120px 120px 80px 80px;



    background:


        linear-gradient(145deg,

            var(--ship-plum),

            var(--ship-plum-light));



    color: white;


    box-shadow:

        0 25px 60px rgba(50, 21, 38, .25);


}





.ngp-shipping-card svg {


    width: 45px;


    color: var(--ship-gold-light);


    margin-bottom: 15px;


}




.ngp-shipping-card h3 {


    margin: 0;


    font-family: Georgia, serif;


    font-size: 30px;


}



.ngp-shipping-card span {


    color: var(--ship-gold-light);


    font-weight: 700;


}









/* =====================================================
   MAIN LAYOUT
===================================================== */


.ngp-shipping-layout {


    display: grid;


    grid-template-columns: 260px 1fr;


    gap: 45px;


}








/* SIDEBAR */


.ngp-shipping-sidebar-box {


    background: white;


    padding: 22px;


    border-radius: 18px;


    border: 1px solid var(--ship-border);


    position: sticky;


    top: 100px;


}



.ngp-shipping-sidebar-box h3 {


    margin: 0 0 18px;


    font-family: Georgia, serif;


    font-size: 22px;


}





.ngp-shipping-sidebar-box ul {


    padding: 0;


    margin: 0;


    list-style: none;


}



.ngp-shipping-sidebar-box li {


    margin-bottom: 7px;


}




.ngp-shipping-sidebar-box a {


    display: block;


    padding: 9px;


    text-decoration: none;


    color: var(--ship-muted);


    border-radius: 8px;


    font-size: 13px;


    transition: .3s;


}




.ngp-shipping-sidebar-box a:hover,
.ngp-shipping-sidebar-box a.active {


    background: #fbf1df;


    color: var(--ship-text);


    font-weight: 700;


}








/* =====================================================
   CONTENT SECTION
===================================================== */


.ngp-shipping-section {


    display: grid;


    grid-template-columns: 40px 1fr;


    gap: 18px;


    margin-bottom: 60px;


    scroll-margin-top: 100px;


}





.ngp-shipping-number {


    color: var(--ship-gold);


    font-weight: 800;


}





.ngp-shipping-label {


    display: block;


    color: #a57a4a;


    font-size: 12px;


    font-weight: 800;


    letter-spacing: .14em;


    margin-bottom: 10px;


}




.ngp-shipping-section h2,


.ngp-shipping-faq h2 {


    margin: 0 0 18px;


    font-family: Georgia, serif;


    font-size: 38px;


    font-weight: 500;


}



.ngp-shipping-section h2 em,


.ngp-shipping-faq h2 em {


    color: var(--ship-gold);


    font-style: italic;


}




.ngp-shipping-section p {


    color: var(--ship-muted);


    line-height: 1.8;


}








/* =====================================================
   DELIVERY TIME CARDS
===================================================== */


.ngp-shipping-time-grid {


    display: grid;


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


    gap: 15px;


    margin-top: 25px;


}





.ngp-shipping-time-grid div {


    background: white;


    padding: 22px;


    border-radius: 16px;


    border: 1px solid var(--ship-border);


}





.ngp-shipping-time-grid svg {


    width: 25px;


    color: var(--ship-gold);


}




.ngp-shipping-time-grid h4 {


    margin: 15px 0 8px;


}





.ngp-shipping-time-grid p {


    margin: 0;


    font-size: 14px;


}








/* =====================================================
   PROCESS
===================================================== */


.ngp-shipping-process {


    display: grid;


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


    gap: 15px;


    margin-top: 30px;


}



.ngp-shipping-process div {


    padding: 20px;


    background: white;


    border-radius: 18px;


    border: 1px solid var(--ship-border);


}




.ngp-shipping-process span {


    display: flex;


    width: 35px;


    height: 35px;


    border-radius: 50%;


    justify-content: center;


    align-items: center;


    background: #fbefdc;


    color: var(--ship-gold);


    font-weight: 800;


}



.ngp-shipping-process h4 {


    margin: 15px 0 8px;


}



.ngp-shipping-process p {


    font-size: 13px;


    margin: 0;


}









/* FEATURE BOX */


.ngp-shipping-feature-box,


.ngp-shipping-charge-card {


    display: flex;


    gap: 18px;


    align-items: center;


    padding: 25px;


    margin-top: 25px;


    border-radius: 20px;


    background: white;


    border: 1px solid var(--ship-border);


}




.ngp-shipping-feature-box svg,
.ngp-shipping-charge-card svg {


    width: 35px;


    color: var(--ship-gold);


}



.ngp-shipping-feature-box h3,
.ngp-shipping-charge-card h3 {


    margin: 0 0 8px;


}





.ngp-shipping-feature-box p,
.ngp-shipping-charge-card p {


    margin: 0;


}



/* =====================================================
   NGPMART SHIPPING POLICY
   COMPLETE RESPONSIVE FIX
===================================================== */


/* ================================
   LARGE TABLET
================================ */

@media (max-width:1100px) {

    .ngp-shipping-container {
        width: calc(100% - 40px);
    }

    .ngp-shipping-hero {
        grid-template-columns: 1fr .75fr;
        gap: 30px;
    }

    .ngp-shipping-hero h1 {
        font-size: 60px;
    }

    .ngp-shipping-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 30px;
    }

    .ngp-shipping-time-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ngp-shipping-time-grid div:last-child {
        grid-column: 1 / -1;
    }

    .ngp-shipping-process {
        grid-template-columns: repeat(2, 1fr);
    }

}



/* ================================
   TABLET / SMALL LAPTOP
================================ */

@media (max-width:900px) {

    .ngp-shipping-page {
        padding: 50px 0 65px;
    }

    .ngp-shipping-container {
        width: calc(100% - 30px);
    }


    /* HERO */

    .ngp-shipping-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
        min-height: auto;
        padding: 20px 0 50px;
    }

    .ngp-shipping-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ngp-shipping-hero h1 {
        font-size: 58px;
    }

    .ngp-shipping-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .ngp-shipping-meta {
        justify-content: center;
    }


    /* HERO VISUAL */

    .ngp-shipping-hero-visual {
        height: 290px;
    }

    .ngp-shipping-circle {
        width: 260px;
        height: 260px;
    }

    .ngp-shipping-circle::before {
        inset: 28px;
    }

    .ngp-shipping-card {
        width: 175px;
        height: 195px;
    }

    .ngp-shipping-card svg {
        width: 36px;
        height: 36px;
    }

    .ngp-shipping-card h3 {
        font-size: 24px;
    }


    /* MAIN LAYOUT */

    .ngp-shipping-layout {
        display: block;
    }


    /* SIDEBAR */

    .ngp-shipping-sidebar {
        margin-bottom: 35px;
    }

    .ngp-shipping-sidebar-box {
        position: relative;
        top: auto;
    }


    /* CONTENT */

    .ngp-shipping-section {
        grid-template-columns: 40px minmax(0, 1fr);
        margin-bottom: 50px;
    }


    .ngp-shipping-section h2 {
        font-size: 34px;
    }


    /* PROCESS */

    .ngp-shipping-process {
        grid-template-columns: repeat(2, 1fr);
    }

}



/* ================================
   MOBILE
================================ */

@media (max-width:600px) {

    .ngp-shipping-page {
        padding: 40px 0 55px;
    }

    .ngp-shipping-container {
        width: calc(100% - 24px);
    }


    /* HERO */

    .ngp-shipping-hero {
        padding-top: 10px;
        padding-bottom: 35px;
    }

    .ngp-shipping-tag {
        font-size: 10px;
        padding: 7px 14px;
    }

    .ngp-shipping-hero h1 {
        font-size: 44px;
        line-height: 1;
        letter-spacing: -1px;
        margin: 20px 0 15px;
    }

    .ngp-shipping-hero p {
        font-size: 13px;
        line-height: 1.75;
    }


    /* META */

    .ngp-shipping-meta {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .ngp-shipping-meta div {
        justify-content: center;
        width: 100%;
        padding: 11px 14px;
    }


    /* HERO VISUAL */

    .ngp-shipping-hero-visual {
        height: 240px;
    }

    .ngp-shipping-circle {
        width: 210px;
        height: 210px;
    }

    .ngp-shipping-circle::before {
        inset: 23px;
    }

    .ngp-shipping-card {
        width: 145px;
        height: 165px;
    }

    .ngp-shipping-card svg {
        width: 30px;
        height: 30px;
        margin-bottom: 9px;
    }

    .ngp-shipping-card h3 {
        font-size: 21px;
    }

    .ngp-shipping-card span {
        font-size: 12px;
    }


    /* SIDEBAR */

    .ngp-shipping-sidebar-box {
        padding: 17px;
        border-radius: 16px;
    }

    .ngp-shipping-sidebar-box h3 {
        font-size: 20px;
    }

    .ngp-shipping-sidebar-box a {
        font-size: 11px;
        padding: 9px;
    }


    /* CONTENT */

    .ngp-shipping-section {
        display: block;
        margin-bottom: 45px;
        scroll-margin-top: 30px;
    }

    .ngp-shipping-number {
        display: block;
        margin-bottom: 10px;
    }

    .ngp-shipping-label {
        font-size: 10px;
    }

    .ngp-shipping-section h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .ngp-shipping-section p {
        font-size: 13px;
        line-height: 1.75;
    }


    /* DELIVERY CARDS */

    .ngp-shipping-time-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .ngp-shipping-time-grid div:last-child {
        grid-column: auto;
    }

    .ngp-shipping-time-grid div {
        padding: 18px;
    }


    /* PROCESS */

    .ngp-shipping-process {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .ngp-shipping-process div {
        padding: 18px;
    }


    /* FEATURE / CHARGE */

    .ngp-shipping-feature-box,
    .ngp-shipping-charge-card {
        padding: 19px;
        gap: 14px;
        align-items: flex-start;
    }

    .ngp-shipping-feature-box svg,
    .ngp-shipping-charge-card svg {
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
    }

    .ngp-shipping-feature-box h3,
    .ngp-shipping-charge-card h3 {
        font-size: 18px;
    }

    .ngp-shipping-feature-box p,
    .ngp-shipping-charge-card p {
        font-size: 12px;
    }


    /* FAQ */

    .ngp-shipping-faq {
        margin-top: 20px;
        scroll-margin-top: 30px;
    }

    .ngp-shipping-faq h2 {
        font-size: 29px;
    }

    .ngp-shipping-faq-item button {
        font-size: 13px;
        gap: 15px;
        padding: 17px 0;
        text-align: left;
    }

    .ngp-shipping-faq-answer p {
        font-size: 13px;
        line-height: 1.7;
    }


    /* CONTACT */

    .ngp-shipping-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding: 26px 20px;
        border-radius: 20px;
    }

    .ngp-shipping-contact h2 {
        font-size: 28px;
    }

    .ngp-shipping-contact p {
        font-size: 13px;
    }

    .ngp-shipping-contact a {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}



/* ================================
   SMALL MOBILE
================================ */

@media (max-width:400px) {

    .ngp-shipping-container {
        width: calc(100% - 20px);
    }

    .ngp-shipping-hero h1 {
        font-size: 38px;
    }

    .ngp-shipping-section h2 {
        font-size: 25px;
    }

    .ngp-shipping-circle {
        width: 190px;
        height: 190px;
    }

    .ngp-shipping-card {
        width: 132px;
        height: 150px;
    }

    .ngp-shipping-card h3 {
        font-size: 19px;
    }

    .ngp-shipping-contact h2 {
        font-size: 25px;
    }

}


































/*--------------  RETURN POLICY  -----------------------------------------------------*/


/* =====================================================
   NGPMART RETURN POLICY PAGE
   PART 2 : COMPLETE CSS
===================================================== */

.ngp-return-page {

    --return-plum: #321526;
    --return-plum-light: #512842;
    --return-gold: #c18a45;
    --return-gold-light: #e5c982;

    --return-bg: #fffaf4;
    --return-white: #ffffff;

    --return-text: #382333;
    --return-muted: #766a72;

    --return-border: rgba(56, 35, 51, .12);

    background:
        radial-gradient(circle at 8% 5%,
            rgba(193, 138, 69, .12),
            transparent 28%),
        radial-gradient(circle at 95% 35%,
            rgba(81, 40, 66, .06),
            transparent 25%),
        var(--return-bg);

    color: var(--return-text);

    padding: 70px 0 90px;

    overflow: hidden;
}


.ngp-return-container {

    width: min(1240px, calc(100% - 50px));

    margin: 0 auto;

}



/* =====================================================
   HERO
===================================================== */

.ngp-return-hero {

    min-height: 450px;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);

    align-items: center;

    gap: 55px;

    padding: 20px 0 70px;

}



.ngp-return-tag {

    display: inline-flex;

    align-items: center;

    padding: 8px 18px;

    border-radius: 50px;

    background: #fbefdc;

    color: var(--return-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15em;

}



.ngp-return-hero h1 {

    margin: 24px 0 20px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(52px, 6.5vw, 78px);

    line-height: .95;

    font-weight: 500;

    letter-spacing: -2px;

}



.ngp-return-hero h1 em {

    display: block;

    color: var(--return-gold);

    font-style: italic;

}



.ngp-return-hero p {

    max-width: 590px;

    margin: 0;

    color: var(--return-muted);

    font-size: 15px;

    line-height: 1.85;

}



.ngp-return-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 27px;

}



.ngp-return-meta div {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    background: var(--return-white);

    border: 1px solid var(--return-border);

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

}



.ngp-return-meta svg {

    width: 17px;

    height: 17px;

    color: var(--return-gold);

}






/* =====================================================
   HERO VISUAL
===================================================== */

.ngp-return-hero-visual {

    min-height: 360px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}



.ngp-return-circle {

    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    border: 1px solid rgba(193, 138, 69, .28);

}



.ngp-return-circle::before {

    content: "";

    position: absolute;

    inset: 38px;

    border-radius: 50%;

    border: 1px dashed rgba(193, 138, 69, .28);

}



.ngp-return-circle::after {

    content: "";

    position: absolute;

    width: 14px;

    height: 14px;

    top: 24px;

    right: 58px;

    border-radius: 50%;

    background: var(--return-gold);

}



.ngp-return-card {

    position: relative;

    z-index: 2;

    width: 225px;

    height: 245px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 120px 120px 80px 80px;

    background:

        linear-gradient(145deg,

            var(--return-plum),

            var(--return-plum-light));

    color: white;

    box-shadow:

        0 28px 65px rgba(50, 21, 38, .24);

}



.ngp-return-card svg {

    width: 46px;

    height: 46px;

    color: var(--return-gold-light);

    margin-bottom: 16px;

}



.ngp-return-card h3 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    font-weight: 500;

}



.ngp-return-card span {

    margin-top: 5px;

    color: var(--return-gold-light);

    font-size: 14px;

    font-weight: 700;

}






/* =====================================================
   MAIN LAYOUT
===================================================== */

.ngp-return-layout {

    display: grid;

    grid-template-columns: 260px minmax(0, 1fr);

    gap: 48px;

    align-items: start;

}



/* =====================================================
   SIDEBAR
===================================================== */

.ngp-return-sidebar-box {

    position: sticky;

    top: 100px;

    padding: 22px;

    background: var(--return-white);

    border: 1px solid var(--return-border);

    border-radius: 20px;

    box-shadow: 0 12px 35px rgba(50, 21, 38, .04);

}



.ngp-return-sidebar-box h3 {

    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 23px;

    font-weight: 500;

}



.ngp-return-sidebar-box ul {

    padding: 0;

    margin: 0;

    list-style: none;

}



.ngp-return-sidebar-box li {

    margin-bottom: 6px;

}



.ngp-return-sidebar-box a {

    display: block;

    padding: 10px 11px;

    border-radius: 9px;

    color: var(--return-muted);

    text-decoration: none;

    font-size: 12px;

    line-height: 1.4;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}



.ngp-return-sidebar-box a:hover,

.ngp-return-sidebar-box a.active {

    background: #fbf1df;

    color: var(--return-text);

    font-weight: 700;

    transform: translateX(3px);

}






/* =====================================================
   CONTENT SECTION
===================================================== */

.ngp-return-section {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 18px;

    margin-bottom: 65px;

    scroll-margin-top: 100px;

}



.ngp-return-number {

    color: var(--return-gold);

    font-size: 13px;

    font-weight: 800;

    padding-top: 4px;

}



.ngp-return-label {

    display: block;

    margin-bottom: 10px;

    color: #a57a4a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;

}



.ngp-return-section h2 {

    margin: 0 0 17px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(30px, 4vw, 40px);

    line-height: 1.15;

    font-weight: 500;

}



.ngp-return-section h2 em {

    color: var(--return-gold);

    font-style: italic;

}



.ngp-return-section p {

    max-width: 800px;

    margin: 0 0 12px;

    color: var(--return-muted);

    font-size: 14px;

    line-height: 1.85;

}






/* =====================================================
   ELIGIBILITY CARDS
===================================================== */

.ngp-return-eligibility-grid {

    display: grid;

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

    gap: 14px;

    margin-top: 28px;

}



.ngp-return-eligibility-grid div {

    padding: 22px 18px;

    background: var(--return-white);

    border: 1px solid var(--return-border);

    border-radius: 17px;

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}



.ngp-return-eligibility-grid div:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 40px rgba(50, 21, 38, .08);

}



.ngp-return-eligibility-grid svg {

    width: 27px;

    height: 27px;

    color: var(--return-gold);

}



.ngp-return-eligibility-grid h4 {

    margin: 15px 0 7px;

    font-size: 16px;

}



.ngp-return-eligibility-grid p {

    margin: 0;

    font-size: 12px;

    line-height: 1.7;

}






/* =====================================================
   EXCLUSION BOX
===================================================== */

.ngp-return-exclusion-box {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 25px;

}



.ngp-return-exclusion-box div {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;

    border-radius: 13px;

    background: #fff5f1;

    border: 1px solid rgba(150, 70, 55, .10);

    color: var(--return-muted);

    font-size: 13px;

}



.ngp-return-exclusion-box svg {

    flex: 0 0 auto;

    width: 18px;

    color: #a85b50;

}






/* =====================================================
   RETURN PROCESS
===================================================== */

.ngp-return-process {

    display: grid;

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

    gap: 13px;

    margin-top: 30px;

}



.ngp-return-process div {

    position: relative;

    padding: 20px 17px;

    background: var(--return-white);

    border: 1px solid var(--return-border);

    border-radius: 18px;

    overflow: hidden;

}



.ngp-return-process span {

    display: flex;

    width: 35px;

    height: 35px;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fbefdc;

    color: var(--return-gold);

    font-size: 11px;

    font-weight: 800;

}



.ngp-return-process>div>svg {

    width: 24px;

    height: 24px;

    margin-top: 20px;

    color: var(--return-gold);

}



.ngp-return-process h4 {

    margin: 13px 0 7px;

    font-size: 15px;

}



.ngp-return-process p {

    margin: 0;

    font-size: 12px;

    line-height: 1.65;

}






/* =====================================================
   RESOLUTION CARDS
===================================================== */

.ngp-return-resolution-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 25px;

}



.ngp-return-resolution-grid div {

    padding: 24px;

    background: var(--return-white);

    border: 1px solid var(--return-border);

    border-radius: 18px;

}



.ngp-return-resolution-grid svg {

    width: 28px;

    height: 28px;

    color: var(--return-gold);

}



.ngp-return-resolution-grid h4 {

    margin: 15px 0 7px;

    font-size: 17px;

}



.ngp-return-resolution-grid p {

    margin: 0;

    font-size: 13px;

}






/* =====================================================
   REFUND CARD
===================================================== */

.ngp-return-refund-card {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 25px;

    padding: 25px;

    border-radius: 20px;

    color: white;

    background:

        linear-gradient(135deg,

            var(--return-plum),

            var(--return-plum-light));

    box-shadow: 0 18px 40px rgba(50, 21, 38, .12);

}



.ngp-return-refund-card>svg {

    flex: 0 0 auto;

    width: 35px;

    height: 35px;

    color: var(--return-gold-light);

}



.ngp-return-refund-card h3 {

    margin: 0 0 7px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 23px;

    font-weight: 500;

}



.ngp-return-refund-card p {

    margin: 0;

    color: rgba(255, 255, 255, .72);

    font-size: 13px;

    line-height: 1.7;

}






/* =====================================================
   ALERT BOX
===================================================== */

.ngp-return-alert-box {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-top: 25px;

    padding: 23px;

    border-radius: 18px;

    background: #fff7e9;

    border: 1px solid rgba(193, 138, 69, .20);

}



.ngp-return-alert-box>svg {

    flex: 0 0 auto;

    width: 28px;

    height: 28px;

    color: var(--return-gold);

}



.ngp-return-alert-box h3 {

    margin: 0 0 7px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    font-weight: 500;

}



.ngp-return-alert-box p {

    margin: 0;

    font-size: 13px;

}






/* =====================================================
   FAQ
===================================================== */

.ngp-return-faq {

    scroll-margin-top: 100px;

    margin-bottom: 55px;

}



.ngp-return-faq h2 {

    margin: 0 0 25px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 40px;

    font-weight: 500;

}



.ngp-return-faq h2 em {

    color: var(--return-gold);

    font-style: italic;

}



.ngp-return-faq-wrapper {

    border-top: 1px solid var(--return-border);

}



.ngp-return-faq-item {

    border-bottom: 1px solid var(--return-border);

}



.ngp-return-faq-item button {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 21px 0;

    border: 0;

    background: transparent;

    color: var(--return-text);

    text-align: left;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

}



.ngp-return-faq-item button svg {

    flex: 0 0 auto;

    width: 18px;

    height: 18px;

    color: var(--return-gold);

    transition: transform .3s ease;

}



.ngp-return-faq-item.active button svg {

    transform: rotate(45deg);

}



.ngp-return-faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows .3s ease;

}



.ngp-return-faq-answer p {

    min-height: 0;

    overflow: hidden;

    margin: 0;

    color: var(--return-muted);

    font-size: 13px;

    line-height: 1.8;

}



.ngp-return-faq-item.active .ngp-return-faq-answer {

    grid-template-rows: 1fr;

}



.ngp-return-faq-item.active .ngp-return-faq-answer p {

    padding-bottom: 20px;

}






/* =====================================================
   CONTACT CTA
===================================================== */

.ngp-return-contact {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 35px;

    border-radius: 24px;

    background:

        linear-gradient(135deg,

            var(--return-plum),

            var(--return-plum-light));

    color: white;

    overflow: hidden;

    position: relative;

}



.ngp-return-contact::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -80px;

    top: -90px;

    border-radius: 50%;

    border: 1px solid rgba(229, 201, 130, .18);

}



.ngp-return-contact>div {

    position: relative;

    z-index: 1;

}



.ngp-return-contact span {

    color: var(--return-gold-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;

}



.ngp-return-contact h2 {

    margin: 10px 0 8px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;

    font-weight: 500;

}



.ngp-return-contact h2 em {

    color: var(--return-gold-light);

    font-style: italic;

}



.ngp-return-contact p {

    max-width: 570px;

    margin: 0;

    color: rgba(255, 255, 255, .68);

    font-size: 13px;

    line-height: 1.7;

}



.ngp-return-contact a {

    position: relative;

    z-index: 2;

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 20px;

    border-radius: 50px;

    background: var(--return-gold-light);

    color: var(--return-plum);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition:

        transform .25s ease,

        background .25s ease;

}



.ngp-return-contact a:hover {

    transform: translateY(-3px);

    background: #f0d998;

}



.ngp-return-contact a svg {

    width: 16px;

}






/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px) {

    .ngp-return-container {

        width: min(100% - 40px, 1000px);

    }


    .ngp-return-hero {

        grid-template-columns: 1fr .7fr;

        gap: 30px;

    }


    .ngp-return-layout {

        grid-template-columns: 220px minmax(0, 1fr);

        gap: 30px;

    }


    .ngp-return-process {

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

    }


    .ngp-return-eligibility-grid {

        grid-template-columns: 1fr 1fr;

    }


    .ngp-return-eligibility-grid div:last-child {

        grid-column: 1 / -1;

    }

}






/* =====================================================
   MOBILE FILTER / CONTENT
===================================================== */

@media(max-width:850px) {

    .ngp-return-page {

        padding: 45px 0 60px;

    }


    .ngp-return-container {

        width: calc(100% - 30px);

    }


    .ngp-return-hero {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 15px 0 45px;

        text-align: center;

    }


    .ngp-return-hero p {

        margin: 0 auto;

    }


    .ngp-return-meta {

        justify-content: center;

    }


    .ngp-return-hero-visual {

        min-height: 285px;

    }


    .ngp-return-circle {

        width: 250px;

        height: 250px;

    }


    .ngp-return-circle::before {

        inset: 28px;

    }


    .ngp-return-card {

        width: 170px;

        height: 195px;

    }


    .ngp-return-card svg {

        width: 37px;

        height: 37px;

    }


    .ngp-return-card h3 {

        font-size: 24px;

    }


    .ngp-return-layout {

        display: block;

    }


    .ngp-return-sidebar {

        margin-bottom: 35px;

    }


    .ngp-return-sidebar-box {

        position: relative;

        top: auto;

    }


    .ngp-return-section {

        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 48px;

    }


    .ngp-return-number {

        margin-bottom: 10px;

    }


    .ngp-return-eligibility-grid {

        grid-template-columns: 1fr;

    }


    .ngp-return-eligibility-grid div:last-child {

        grid-column: auto;

    }


    .ngp-return-exclusion-box {

        grid-template-columns: 1fr;

    }


    .ngp-return-resolution-grid {

        grid-template-columns: 1fr;

    }


    .ngp-return-contact {

        align-items: flex-start;

        flex-direction: column;

        padding: 28px 22px;

    }


    .ngp-return-contact a {

        width: 100%;

    }

}






/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:600px) {

    .ngp-return-container {

        width: calc(100% - 24px);

    }


    .ngp-return-hero h1 {

        font-size: 45px;

        letter-spacing: -1.5px;

    }


    .ngp-return-hero p {

        font-size: 13px;

    }


    .ngp-return-meta {

        flex-direction: column;

        align-items: stretch;

    }


    .ngp-return-meta div {

        justify-content: center;

    }


    .ngp-return-hero-visual {

        min-height: 245px;

    }


    .ngp-return-circle {

        width: 215px;

        height: 215px;

    }


    .ngp-return-circle::before {

        inset: 24px;

    }


    .ngp-return-card {

        width: 145px;

        height: 168px;

    }


    .ngp-return-card svg {

        width: 32px;

        height: 32px;

        margin-bottom: 10px;

    }


    .ngp-return-card h3 {

        font-size: 21px;

    }


    .ngp-return-card span {

        font-size: 12px;

    }


    .ngp-return-sidebar-box {

        padding: 18px;

    }


    .ngp-return-sidebar-box h3 {

        font-size: 20px;

    }


    .ngp-return-sidebar-box a {

        font-size: 11px;

        padding: 9px;

    }


    .ngp-return-section h2 {

        font-size: 28px;

    }


    .ngp-return-section p {

        font-size: 13px;

    }


    .ngp-return-eligibility-grid div {

        padding: 19px 16px;

    }


    .ngp-return-process {

        grid-template-columns: 1fr;

    }


    .ngp-return-process div {

        padding: 18px;

    }


    .ngp-return-refund-card {

        align-items: flex-start;

        padding: 20px;

    }


    .ngp-return-refund-card h3 {

        font-size: 20px;

    }


    .ngp-return-alert-box {

        padding: 18px;

    }


    .ngp-return-alert-box h3 {

        font-size: 18px;

    }


    .ngp-return-faq h2 {

        font-size: 29px;

    }


    .ngp-return-faq-item button {

        padding: 18px 0;

        font-size: 13px;

    }


    .ngp-return-contact h2 {

        font-size: 27px;

    }

}






/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:380px) {

    .ngp-return-hero h1 {

        font-size: 39px;

    }


    .ngp-return-section h2 {

        font-size: 25px;

    }


    .ngp-return-circle {

        width: 195px;

        height: 195px;

    }


    .ngp-return-card {

        width: 132px;

        height: 155px;

    }


    .ngp-return-contact {

        padding: 24px 18px;

    }

}

/**------------------  PRODUCT DESCRIPTION  -----------------------**/


/* =====================================================
    NGPMART PRODUCT DETAIL PAGE
    PART 2 : COMPLETE CSS
    ===================================================== */

.ngp-detail-page {

    --detail-plum: #321526;
    --detail-plum-light: #4b243d;

    --detail-gold: #c18a45;
    --detail-gold-light: #e5c982;

    --detail-bg: #fffaf4;
    --detail-white: #ffffff;

    --detail-text: #382333;
    --detail-muted: #766a72;

    --detail-border: rgba(56, 35, 51, .12);

    background:

        radial-gradient(circle at 8% 5%,
            rgba(193, 138, 69, .10),
            transparent 28%),

        var(--detail-bg);

    color: var(--detail-text);

    padding: 35px 0 80px;

    overflow: hidden;
}


/* =====================================================
    CONTAINER
    ===================================================== */

.ngp-detail-container {

    width: min(1320px, calc(100% - 40px));

    margin: 0 auto;

}


/* =====================================================
    BREADCRUMB
    ===================================================== */

.ngp-detail-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 28px;

    font-size: 12px;

    color: var(--detail-muted);

}

.ngp-detail-breadcrumb a {

    color: var(--detail-muted);

    text-decoration: none;

    transition: .25s ease;

}

.ngp-detail-breadcrumb a:hover {

    color: var(--detail-gold);

}

.ngp-detail-breadcrumb svg {

    width: 14px;

    height: 14px;

    color: #ad9ca4;

}

.ngp-detail-breadcrumb span {

    color: var(--detail-text);

    font-weight: 700;

}


/* =====================================================
    MAIN PRODUCT AREA
    ===================================================== */

.ngp-detail-main {

    display: grid;

    grid-template-columns: minmax(0, 1.3fr) minmax(360px, .8fr);

    gap: 55px;

    align-items: start;

}


/* =====================================================
    GALLERY
    ===================================================== */

.ngp-detail-gallery {

    display: grid;

    grid-template-columns: 78px minmax(0, 1fr);

    gap: 20px;

    min-width: 0;

}


/* =====================================================
    THUMBNAILS
    ===================================================== */

.ngp-detail-thumbnails {

    display: flex;

    flex-direction: column;

    gap: 13px;

    padding-top: 5px;

}


.ngp-detail-thumb {

    width: 70px;

    height: 78px;

    padding: 5px;

    border: 1px solid var(--detail-border);

    border-radius: 12px;

    background: var(--detail-white);

    cursor: pointer;

    overflow: hidden;

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        transform .25s ease;

}


.ngp-detail-thumb:hover {

    transform: translateY(-2px);

    border-color: rgba(193, 138, 69, .55);

}


.ngp-detail-thumb.active {

    border-color: var(--detail-gold);

    box-shadow:

        0 0 0 2px rgba(193, 138, 69, .12);

}


.ngp-detail-thumb img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}


/* =====================================================
    MAIN IMAGE AREA
    ===================================================== */

.ngp-detail-main-image {

    position: relative;

    min-width: 0;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--detail-white);

    border: 1px solid var(--detail-border);

    border-radius: 24px;

    overflow: hidden;

}


.ngp-detail-image-wrapper {

    width: 100%;

    height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px;

}


.ngp-detail-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition:

        opacity .25s ease,

        transform .35s ease;

}


.ngp-detail-main-image:hover .ngp-detail-image-wrapper img {

    transform: scale(1.025);

}


/* =====================================================
    GALLERY ARROWS
    ===================================================== */

.ngp-detail-gallery-prev,
.ngp-detail-gallery-next {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--detail-border);

    border-radius: 50%;

    background: rgba(255, 255, 255, .94);

    color: var(--detail-text);

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow: 0 8px 25px rgba(50, 21, 38, .08);

    transition: .25s ease;

}


.ngp-detail-gallery-prev {

    left: 15px;

}


.ngp-detail-gallery-next {

    right: 15px;

}


.ngp-detail-gallery-prev:hover,
.ngp-detail-gallery-next:hover {

    background: var(--detail-plum);

    color: white;

    border-color: var(--detail-plum);

}


.ngp-detail-gallery-prev svg,
.ngp-detail-gallery-next svg {

    width: 19px;

    height: 19px;

}


/* =====================================================
    WISHLIST
    ===================================================== */

.ngp-detail-wishlist {

    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 6;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--detail-border);

    border-radius: 50%;

    background: rgba(255, 255, 255, .95);

    color: var(--detail-text);

    cursor: pointer;

    transition: .25s ease;

}


.ngp-detail-wishlist:hover,
.ngp-detail-wishlist.active {

    background: var(--detail-plum);

    color: white;

}


.ngp-detail-wishlist.active svg {

    fill: currentColor;

}


.ngp-detail-wishlist svg {

    width: 19px;

    height: 19px;

}


/* =====================================================
    PRODUCT INFORMATION
    ===================================================== */

.ngp-detail-info {

    padding-top: 8px;

}


.ngp-detail-category {

    display: inline-flex;

    padding: 7px 12px;

    border-radius: 50px;

    background: #fbefdc;

    color: var(--detail-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .12em;

    margin-bottom: 18px;

}


/* =====================================================
    PRICE
    ===================================================== */

.ngp-detail-price-row {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

}


.ngp-detail-price-label {

    font-size: 14px;

    color: var(--detail-text);

}


.ngp-detail-price {

    color: var(--detail-plum);

    font-size: 23px;

    font-weight: 800;

}


/* =====================================================
    MOQ
    ===================================================== */

.ngp-detail-moq {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 10px;

    color: var(--detail-muted);

    font-size: 13px;

}


.ngp-detail-moq strong {

    color: var(--detail-plum);

    font-weight: 800;

}


/* =====================================================
    PRODUCT TITLE
    ===================================================== */

.ngp-detail-title {

    margin: 0 0 15px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 500;

    color: var(--detail-text);

}


.ngp-detail-short-description {

    max-width: 590px;

    margin: 0 0 28px;

    color: var(--detail-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* =====================================================
    PRODUCT OPTIONS
    ===================================================== */

.ngp-detail-option {

    margin-bottom: 23px;

}


.ngp-detail-option-title {

    margin-bottom: 10px;

    color: var(--detail-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .04em;

}


.ngp-detail-option-title small {

    font-size: 10px;

}


/* =====================================================
    VARIANTS
    ===================================================== */

.ngp-detail-variants {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}


.ngp-detail-variant {

    min-width: 62px;

    padding: 8px 14px;

    border: 1px solid var(--detail-plum);

    border-radius: 5px;

    background: white;

    color: var(--detail-text);

    font-size: 12px;

    cursor: pointer;

    transition: .25s ease;

}


.ngp-detail-variant:hover {

    background: #fbf3e7;

}


.ngp-detail-variant.active {

    background: var(--detail-plum);

    color: white;

}


/* =====================================================
    QUANTITY
    ===================================================== */

.ngp-detail-quantity {

    display: flex;

    align-items: center;

    width: max-content;

    border: 1px solid var(--detail-plum);

    border-radius: 5px;

    overflow: hidden;

}


.ngp-detail-quantity button {

    width: 38px;

    height: 34px;

    border: 0;

    background: white;

    color: var(--detail-plum);

    font-size: 17px;

    cursor: pointer;

    transition: .2s ease;

}


.ngp-detail-quantity button:hover {

    background: #f6ecdf;

}


.ngp-detail-quantity input {

    width: 52px;

    height: 34px;

    padding: 0;

    border: 0;

    border-left: 1px solid var(--detail-plum);

    border-right: 1px solid var(--detail-plum);

    outline: none;

    text-align: center;

    color: var(--detail-text);

    font-size: 13px;

    background: white;

}


.ngp-detail-quantity input::-webkit-inner-spin-button,
.ngp-detail-quantity input::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}


/* =====================================================
    ACTION BUTTONS
    ===================================================== */

.ngp-detail-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 8px;

}


.ngp-detail-cart-btn,
.ngp-detail-buy-btn {

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .03em;

    cursor: pointer;

    transition: .25s ease;

}


.ngp-detail-cart-btn {

    border: 1px solid var(--detail-plum);

    background: var(--detail-plum);

    color: white;

}


.ngp-detail-cart-btn:hover {

    background: var(--detail-plum-light);

    transform: translateY(-2px);

}


.ngp-detail-buy-btn {

    border: 1px solid var(--detail-gold);

    background: transparent;

    color: var(--detail-plum);

}


.ngp-detail-buy-btn:hover {

    background: #fbefdc;

    transform: translateY(-2px);

}


.ngp-detail-actions svg {

    width: 17px;

    height: 17px;

}


/* =====================================================
    SERVICE INFORMATION
    ===================================================== */

.ngp-detail-service-info {

    margin-top: 28px;

    border-top: 1px solid var(--detail-border);

}


.ngp-detail-service-info>div {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid var(--detail-border);

}


.ngp-detail-service-info>div>svg {

    flex: 0 0 auto;

    width: 22px;

    height: 22px;

    color: var(--detail-gold);

}


.ngp-detail-service-info strong {

    display: block;

    margin-bottom: 3px;

    font-size: 13px;

}


.ngp-detail-service-info span {

    display: block;

    color: var(--detail-muted);

    font-size: 11px;

}


/* =====================================================
    PRODUCT INFORMATION TABS
    ===================================================== */

.ngp-detail-information {

    margin-top: 75px;

    padding: 0 0 20px;

    border-top: 1px solid var(--detail-border);

}


.ngp-detail-tabs {

    display: flex;

    align-items: center;

    gap: 32px;

    border-bottom: 1px solid var(--detail-border);

}


.ngp-detail-tab {

    position: relative;

    padding: 19px 2px;

    border: 0;

    background: transparent;

    color: var(--detail-muted);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

}


.ngp-detail-tab::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 2px;

    background: var(--detail-gold);

    transform: scaleX(0);

    transition: .25s ease;

}


.ngp-detail-tab.active {

    color: var(--detail-text);

}


.ngp-detail-tab.active::after {

    transform: scaleX(1);

}


.ngp-detail-tab-content {

    display: none;

    padding: 30px 0;

}


.ngp-detail-tab-content.active {

    display: block;

}


.ngp-detail-tab-content h2 {

    margin: 0 0 15px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 27px;

    font-weight: 500;

}


.ngp-detail-tab-content p {

    max-width: 900px;

    margin: 0 0 12px;

    color: var(--detail-muted);

    font-size: 14px;

    line-height: 1.85;

}


/* =====================================================
    SPECIFICATIONS
    ===================================================== */

.ngp-detail-specifications {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border: 1px solid var(--detail-border);

    border-radius: 15px;

    overflow: hidden;

}


.ngp-detail-specifications div {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 15px 18px;

    background: white;

    border-bottom: 1px solid var(--detail-border);

}


.ngp-detail-specifications div:nth-child(odd) {

    border-right: 1px solid var(--detail-border);

}


.ngp-detail-specifications span {

    color: var(--detail-muted);

    font-size: 12px;

}


.ngp-detail-specifications strong {

    color: var(--detail-text);

    font-size: 12px;

    text-align: right;

}


/* =====================================================
    REVIEWS
    ===================================================== */

.ngp-detail-review-summary {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 25px;

    padding: 25px;

    border: 1px solid var(--detail-border);

    border-radius: 18px;

    background: white;

}


.ngp-detail-review-score {

    padding-right: 25px;

    border-right: 1px solid var(--detail-border);

}


.ngp-detail-review-score strong {

    display: block;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 45px;

    font-weight: 500;

}


.ngp-detail-review-score div {

    margin: 4px 0;

    color: var(--detail-gold);

    letter-spacing: 2px;

}


.ngp-detail-review-score span {

    color: var(--detail-muted);

    font-size: 11px;

}


.ngp-detail-review-message {

    display: flex;

    align-items: center;

    color: var(--detail-muted);

    font-size: 13px;

    line-height: 1.8;

}


/* =====================================================
    RELATED PRODUCTS
    ===================================================== */

.ngp-detail-related {

    margin-top: 55px;

}


.ngp-detail-section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

}


.ngp-detail-section-heading span {

    display: block;

    margin-bottom: 7px;

    color: var(--detail-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;

}


.ngp-detail-section-heading h2 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;

    font-weight: 500;

}


.ngp-detail-section-heading h2 em {

    color: var(--detail-gold);

    font-style: italic;

}


/* =====================================================
    RELATED CONTROLS
    ===================================================== */

.ngp-detail-related-controls {

    display: flex;

    gap: 8px;

}


.ngp-detail-related-controls button {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--detail-border);

    border-radius: 50%;

    background: white;

    color: var(--detail-text);

    cursor: pointer;

    transition: .25s ease;

}


.ngp-detail-related-controls button:hover {

    background: var(--detail-plum);

    color: white;

    border-color: var(--detail-plum);

}


.ngp-detail-related-controls svg {

    width: 17px;

    height: 17px;

}


/* =====================================================
    RELATED TRACK
    ===================================================== */

.ngp-detail-related-wrapper {

    position: relative;

    overflow: hidden;

}


.ngp-detail-related-track {

    display: flex;

    gap: 14px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 3px 2px 15px;

}


.ngp-detail-related-track::-webkit-scrollbar {

    display: none;

}


/* =====================================================
    RELATED CARD
    ===================================================== */

.ngp-detail-related-card {

    flex: 0 0 calc((100% - 42px) / 4);

    min-width: 0;

    background: white;

    border: 1px solid var(--detail-border);

    border-radius: 16px;

    overflow: hidden;

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.ngp-detail-related-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 35px rgba(50, 21, 38, .09);

}


.ngp-detail-related-image {

    position: relative;

    height: 230px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

    background: #fff;

    overflow: hidden;

}


.ngp-detail-related-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition: .3s ease;

}


.ngp-detail-related-card:hover .ngp-detail-related-image img {

    transform: scale(1.04);

}


.ngp-detail-related-wishlist {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--detail-border);

    border-radius: 50%;

    background: white;

    color: var(--detail-text);

    cursor: pointer;

}


.ngp-detail-related-wishlist:hover,
.ngp-detail-related-wishlist.active {

    background: var(--detail-plum);

    color: white;

}


.ngp-detail-related-wishlist.active svg {

    fill: currentColor;

}


.ngp-detail-related-wishlist svg {

    width: 15px;

    height: 15px;

}


.ngp-detail-related-info {

    padding: 14px;

}


.ngp-detail-related-info>span {

    color: var(--detail-gold);

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

}


.ngp-detail-related-info h3 {

    min-height: 40px;

    margin: 7px 0 8px;

    color: var(--detail-text);

    font-size: 14px;

    line-height: 1.4;

}


.ngp-detail-related-info>strong {

    display: block;

    margin-bottom: 11px;

    color: var(--detail-plum);

    font-size: 16px;

}


.ngp-detail-related-cart {

    width: 100%;

    min-height: 36px;

    border: 0;

    border-radius: 5px;

    background: var(--detail-plum);

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s ease;

}


.ngp-detail-related-cart:hover {

    background: var(--detail-plum-light);

}


/* =====================================================
    TABLET
    ===================================================== */

@media (max-width:1100px) {

    .ngp-detail-container {

        width: calc(100% - 32px);

    }

    .ngp-detail-main {

        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);

        gap: 30px;

    }

    .ngp-detail-gallery {

        grid-template-columns: 65px minmax(0, 1fr);

        gap: 12px;

    }

    .ngp-detail-thumb {

        width: 58px;

        height: 66px;

    }

    .ngp-detail-main-image {

        min-height: 500px;

    }

    .ngp-detail-image-wrapper {

        height: 500px;

        padding: 25px;

    }

    .ngp-detail-title {

        font-size: 28px;

    }

    .ngp-detail-related-card {

        flex-basis: calc((100% - 28px) / 3);

    }

}


/* =====================================================
    TABLET / SMALL LAPTOP
    ===================================================== */

@media (max-width:850px) {

    .ngp-detail-page {

        padding: 25px 0 60px;

    }

    .ngp-detail-main {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .ngp-detail-gallery {

        width: 100%;

    }

    .ngp-detail-main-image {

        min-height: 520px;

    }

    .ngp-detail-image-wrapper {

        height: 520px;

    }

    .ngp-detail-info {

        padding: 0 5px;

    }

    .ngp-detail-title {

        font-size: 32px;

    }

    .ngp-detail-short-description {

        max-width: 100%;

    }

    .ngp-detail-related-card {

        flex-basis: calc((100% - 14px) / 2);

    }

}


/* =====================================================
    MOBILE
    ===================================================== */

@media (max-width:600px) {

    .ngp-detail-page {

        padding: 20px 0 50px;

    }

    .ngp-detail-container {

        width: calc(100% - 22px);

    }

    .ngp-detail-breadcrumb {

        margin-bottom: 18px;

        font-size: 10px;

    }


    /* GALLERY */

    .ngp-detail-gallery {

        grid-template-columns: 1fr;

        gap: 10px;

    }

    .ngp-detail-main-image {

        order: 1;

        min-height: 360px;

        border-radius: 18px;

    }

    .ngp-detail-image-wrapper {

        height: 360px;

        padding: 20px 35px;

    }

    .ngp-detail-thumbnails {

        order: 2;

        flex-direction: row;

        width: 100%;

        overflow-x: auto;

        scrollbar-width: none;

        padding: 2px 0 5px;

    }

    .ngp-detail-thumbnails::-webkit-scrollbar {

        display: none;

    }

    .ngp-detail-thumb {

        flex: 0 0 62px;

        width: 62px;

        height: 65px;

    }

    .ngp-detail-gallery-prev,
    .ngp-detail-gallery-next {

        width: 36px;

        height: 36px;

    }

    .ngp-detail-gallery-prev {

        left: 10px;

    }

    .ngp-detail-gallery-next {

        right: 10px;

    }

    .ngp-detail-wishlist {

        width: 37px;

        height: 37px;

        top: 12px;

        right: 12px;

    }


    /* INFO */

    .ngp-detail-category {

        margin-top: 5px;

        font-size: 9px;

    }

    .ngp-detail-price {

        font-size: 21px;

    }

    .ngp-detail-title {

        font-size: 27px;

        line-height: 1.25;

    }

    .ngp-detail-short-description {

        font-size: 13px;

        line-height: 1.75;

    }


    /* ACTIONS */

    .ngp-detail-actions {

        grid-template-columns: 1fr;

    }

    .ngp-detail-cart-btn,
    .ngp-detail-buy-btn {

        min-height: 46px;

    }


    /* TABS */

    .ngp-detail-information {

        margin-top: 50px;

    }

    .ngp-detail-tabs {

        gap: 20px;

        overflow-x: auto;

        scrollbar-width: none;

    }

    .ngp-detail-tabs::-webkit-scrollbar {

        display: none;

    }

    .ngp-detail-tab {

        flex: 0 0 auto;

        font-size: 12px;

    }

    .ngp-detail-tab-content {

        padding: 25px 0;

    }

    .ngp-detail-tab-content h2 {

        font-size: 24px;

    }

    .ngp-detail-tab-content p {

        font-size: 13px;

    }


    /* SPECIFICATION */

    .ngp-detail-specifications {

        grid-template-columns: 1fr;

    }

    .ngp-detail-specifications div {

        border-right: 0 !important;

    }


    /* REVIEWS */

    .ngp-detail-review-summary {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 20px;

    }

    .ngp-detail-review-score {

        padding-right: 0;

        padding-bottom: 18px;

        border-right: 0;

        border-bottom: 1px solid var(--detail-border);

    }


    /* RELATED */

    .ngp-detail-related {

        margin-top: 35px;

    }

    .ngp-detail-section-heading {

        align-items: center;

    }

    .ngp-detail-section-heading h2 {

        font-size: 28px;

    }

    .ngp-detail-related-controls {

        display: none;

    }

    .ngp-detail-related-track {

        overflow-x: auto;

        scroll-snap-type: x mandatory;

    }

    .ngp-detail-related-card {

        flex: 0 0 calc(78%);

        scroll-snap-align: start;

    }

    .ngp-detail-related-image {

        height: 210px;

    }

}


/* =====================================================
    SMALL MOBILE
    ===================================================== */

@media (max-width:400px) {

    .ngp-detail-container {

        width: calc(100% - 18px);

    }

    .ngp-detail-main-image {

        min-height: 310px;

    }

    .ngp-detail-image-wrapper {

        height: 310px;

        padding: 15px 32px;

    }

    .ngp-detail-title {

        font-size: 24px;

    }

    .ngp-detail-variant {

        padding: 8px 11px;

        min-width: 55px;

        font-size: 11px;

    }

    .ngp-detail-quantity input {

        width: 48px;

    }

    .ngp-detail-related-card {

        flex-basis: 84%;

    }

    .ngp-detail-related-image {

        height: 190px;

    }

}



















/* =====================   COLLECTION PAGE  ====================== */


.ngp-collection-page {


    --ngp-bg: #fffaf4;

    --ngp-card: #ffffff;

    --ngp-primary: #35182a;

    --ngp-secondary: #c7924b;

    --ngp-light-gold: #e8cb8b;

    --ngp-text: #392433;

    --ngp-muted: #786d73;

    --ngp-border: #eadfd4;


    background: var(--ngp-bg);

    padding: 70px 0 100px;

    color: var(--ngp-text);

}




.ngp-collection-container {


    width: min(1320px, calc(100% - 40px));

    margin: auto;


}








/* =====================================================
   HERO SECTION
===================================================== */


.ngp-collection-hero {


    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 90px;


}





.ngp-collection-tag {


    display: inline-block;

    padding: 8px 18px;

    background: #f8ead6;

    border-radius: 50px;

    color: var(--ngp-secondary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;


}





.ngp-collection-hero h1 {


    margin: 25px 0 15px;

    font-family: Georgia, serif;

    font-size: 68px;

    font-weight: 500;

    line-height: 1.1;


}





.ngp-collection-hero h1 em {


    color: var(--ngp-secondary);

    display: block;

    font-style: italic;


}





.ngp-collection-hero p {


    max-width: 520px;

    color: var(--ngp-muted);

    font-size: 15px;

    line-height: 1.8;


}





.ngp-collection-hero a {


    margin-top: 25px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 28px;

    background: var(--ngp-primary);

    color: white;

    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;


}



.ngp-collection-hero a:hover {


    transform: translateY(-3px);

    background: #51283f;


}





.ngp-collection-hero-image {


    height: 430px;

    border-radius: 30px;

    overflow: hidden;

    position: relative;

    box-shadow: 0 25px 60px rgba(53, 24, 42, .15);


}





.ngp-collection-hero-image img {


    width: 100%;

    height: 100%;

    object-fit: cover;


}





.ngp-collection-count {


    position: absolute;

    left: 25px;

    bottom: 25px;

    background: white;

    padding: 20px 30px;

    border-radius: 20px;


}



.ngp-collection-count strong {


    display: block;

    font-size: 38px;

    color: var(--ngp-primary);

    font-family: Georgia, serif;


}



.ngp-collection-count span {


    color: var(--ngp-muted);

    font-size: 12px;


}









/* =====================================================
   SECTION HEADING
===================================================== */


.ngp-section-heading {


    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 35px;


}





.ngp-section-heading span {


    color: var(--ngp-secondary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;


}





.ngp-section-heading h2 {


    margin: 10px 0;

    font-family: Georgia, serif;

    font-size: 45px;

    font-weight: 500;


}





.ngp-section-heading h2 em {


    color: var(--ngp-secondary);

    font-style: italic;


}





.ngp-section-heading p {


    margin: 0;

    color: var(--ngp-muted);

    font-size: 14px;


}





.ngp-section-heading a {


    text-decoration: none;

    color: var(--ngp-primary);

    font-size: 13px;

    font-weight: 700;


}








/* =====================================================
   COLLECTION SECTION
===================================================== */


.ngp-product-collection-section {


    padding: 60px 0;

    border-bottom: 1px solid var(--ngp-border);


}








/* =====================================================
   PRODUCT GRID
===================================================== */


.ngp-products-grid {


    display: grid;

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

    gap: 22px;


}








/* =====================================================
   PRODUCT CARD
===================================================== */


.ngp-product-card {


    background: var(--ngp-card);

    border: 1px solid var(--ngp-border);

    border-radius: 22px;

    overflow: hidden;

    transition: .35s ease;


}





.ngp-product-card:hover {


    transform: translateY(-8px);

    box-shadow:

        0 20px 45px rgba(53, 24, 42, .12);


}








/* =====================================================
   PRODUCT IMAGE
===================================================== */


.ngp-product-image {


    height: 260px;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;


}





.ngp-product-image img {


    width: 100%;

    height: 100%;

    object-fit: contain;


}





.ngp-product-image button {


    position: absolute;

    right: 18px;

    top: 18px;


    width: 38px;

    height: 38px;


    border-radius: 50%;


    border: 1px solid var(--ngp-border);


    background: white;


    cursor: pointer;


    font-size: 20px;


    transition: .3s;


}





.ngp-product-image button:hover {


    background: var(--ngp-primary);

    color: white;


}









/* =====================================================
   PRODUCT INFO
===================================================== */


.ngp-product-info {


    padding: 18px;


}





.ngp-product-info span {


    color: var(--ngp-secondary);

    font-size: 11px;

    font-weight: 800;


}





.ngp-product-info h3 {


    margin: 10px 0;

    font-size: 16px;

    line-height: 1.5;

    color: var(--ngp-primary);


}





.ngp-product-price {


    font-size: 20px;

    font-weight: 800;

    color: var(--ngp-primary);

    margin-bottom: 15px;


}






.ngp-cart-btn {


    width: 100%;

    height: 42px;


    background: var(--ngp-primary);


    color: white;


    border: none;


    border-radius: 7px;


    cursor: pointer;


    font-size: 12px;


    font-weight: 800;


    transition: .3s;


}





.ngp-cart-btn:hover {


    background: var(--ngp-secondary);


}










/* =====================================================
   TABLET RESPONSIVE
===================================================== */


@media(max-width:1100px) {



    .ngp-collection-hero {


        grid-template-columns: 1fr;

        text-align: center;


    }



    .ngp-collection-hero p {


        margin: auto;


    }



    .ngp-products-grid {


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


    }



}










/* =====================================================
   MOBILE RESPONSIVE
===================================================== */


@media(max-width:768px) {



    .ngp-collection-container {


        width: calc(100% - 25px);


    }




    .ngp-collection-hero h1 {


        font-size: 45px;


    }





    .ngp-collection-hero-image {


        height: 300px;


    }




    .ngp-section-heading {


        flex-direction: column;

        align-items: flex-start;

        gap: 15px;


    }





    .ngp-section-heading h2 {


        font-size: 34px;


    }




    .ngp-products-grid {


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

        gap: 15px;


    }





    .ngp-product-image {


        height: 180px;


    }



}









/* =====================================================
   SMALL MOBILE
===================================================== */


@media(max-width:450px) {



    .ngp-collection-hero h1 {


        font-size: 38px;


    }




    .ngp-products-grid {


        grid-template-columns: 1fr;


    }





    .ngp-product-image {


        height: 230px;


    }




    .ngp-product-info h3 {


        font-size: 15px;


    }



}



















/* =====================  ADD CART PAGE  ====================== */


/* =====================================================
   NGPMART CHECKOUT PAGE
   PART 2 : COMPLETE CSS
===================================================== */


.ngp-checkout-page {


    --checkout-bg: #fffaf4;

    --checkout-white: #ffffff;

    --checkout-primary: #35182a;

    --checkout-gold: #c7924b;

    --checkout-light: #f8ead8;

    --checkout-text: #392433;

    --checkout-muted: #786d73;

    --checkout-border: #eadfd4;


    background: var(--checkout-bg);

    padding: 70px 0 100px;

    color: var(--checkout-text);


}







.ngp-checkout-container {


    width: min(1350px, calc(100% - 40px));

    margin: auto;


}







/* =====================================================
   HEADER
===================================================== */


.ngp-checkout-header {


    text-align: center;

    margin-bottom: 55px;


}





.ngp-checkout-header span {


    color: var(--checkout-gold);

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 800;


}





.ngp-checkout-header h1 {


    margin: 15px 0;

    font-family: Georgia, serif;

    font-size: 55px;

    font-weight: 500;

    color: var(--checkout-primary);


}





.ngp-checkout-header p {


    color: var(--checkout-muted);

    font-size: 15px;


}









/* =====================================================
   MAIN LAYOUT
===================================================== */


.ngp-checkout-layout {


    display: grid;

    grid-template-columns: 1.3fr .8fr;

    gap: 35px;

    align-items: start;


}









/* =====================================================
   LEFT CART SECTION
===================================================== */


.ngp-cart-section {


    display: flex;

    flex-direction: column;

    gap: 22px;


}





.ngp-cart-section>h2 {


    font-family: Georgia, serif;

    font-size: 32px;

    margin: 0;


}







/* =====================================================
   CART PRODUCT CARD
===================================================== */


.ngp-cart-product {


    background: white;

    border: 1px solid var(--checkout-border);

    border-radius: 22px;

    padding: 40px;

    display: grid;

    grid-template-columns: 120px 1fr auto;

    gap: 25px;

    align-items: center;

    transition: .3s ease;


}





.ngp-cart-product:hover {


    transform: translateY(-5px);

    box-shadow:

        0 18px 40px rgba(53, 24, 42, .10);


}







.ngp-cart-product-image {


    width: 120px;

    height: 120px;

    border-radius: 18px;

    background: #fff4e8;

    padding: 12px;


}





.ngp-cart-product-image img {


    width: 100%;

    height: 100%;

    object-fit: contain;


}








.ngp-cart-product-content h3 {


    margin: 0 0 8px;

    font-size: 18px;

    color: var(--checkout-primary);


}





.ngp-cart-product-content span {


    color: var(--checkout-gold);

    font-size: 12px;

    font-weight: 700;


}





.ngp-cart-product-content p {


    font-size: 18px;

    font-weight: 800;

    margin: 10px 0;


}








/* =====================================================
   QUANTITY CONTROL
===================================================== */


.ngp-quantity-control {


    display: flex;

    align-items: center;

    border: 1px solid var(--checkout-border);

    width: max-content;

    border-radius: 8px;

    overflow: hidden;


}





.ngp-quantity-control button {


    width: 35px;

    height: 35px;

    border: 0;

    background: #faeddc;

    cursor: pointer;

    font-size: 18px;


}





.ngp-quantity-control input {


    width: 45px;

    height: 35px;

    border: 0;

    text-align: center;

    font-weight: 700;


}







.ngp-cart-product-action {


    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 15px;


}





.ngp-remove-product {


    border: 0;

    background: none;

    color: #b44d4d;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;


}





.ngp-product-total {


    font-size: 20px;

    font-weight: 800;

    color: var(--checkout-primary);


}








/* =====================================================
   CART SUMMARY
===================================================== */


.ngp-cart-summary {


    background: white;

    padding: 25px;

    border-radius: 22px;

    border: 1px solid var(--checkout-border);


}





.ngp-cart-summary h3 {


    margin: 0 0 20px;

    font-family: Georgia, serif;

    font-size: 28px;


}





.ngp-cart-summary>div {


    display: flex;

    justify-content: space-between;

    margin: 15px 0;


}





.ngp-cart-summary span {


    color: var(--checkout-muted);


}





.ngp-cart-summary strong {


    color: var(--checkout-primary);


}





.ngp-final-total {


    font-size: 22px;

    font-weight: 800;


}









/* =====================================================
   RIGHT DELIVERY SECTION
===================================================== */


.ngp-delivery-section {


    position: sticky;

    top: 20px;


}





.ngp-delivery-card {


    background: white;

    padding: 30px;

    border-radius: 25px;

    border: 1px solid var(--checkout-border);


}





.ngp-delivery-card>span {


    color: var(--checkout-gold);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;


}





.ngp-delivery-card h2 {


    margin: 12px 0;

    font-family: Georgia, serif;

    font-size: 32px;


}





.ngp-delivery-card p {


    color: var(--checkout-muted);

    font-size: 14px;


}








/* =====================================================
   FORM DESIGN
===================================================== */


.ngp-delivery-form {


    margin-top: 25px;


}




.ngp-form-group {


    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 10px;


}





.ngp-form-group label {


    font-size: 13px;

    font-weight: 700;

    color: var(--checkout-primary);


}





.ngp-form-group input,
.ngp-form-group textarea {


    width: 100%;

    padding: 14px;

    border-radius: 10px;

    border: 1px solid var(--checkout-border);

    outline: none;

    font-size: 14px;

    transition: .3s;


}





.ngp-form-group input:focus,
.ngp-form-group textarea:focus {


    border-color: var(--checkout-gold);


}





.ngp-form-row {


    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;


}








/* =====================================================
   PLACE ORDER BUTTON
===================================================== */


.ngp-place-order-btn {


    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 10px;

    background: var(--checkout-primary);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition: .3s;


}





.ngp-place-order-btn:hover {


    background: var(--checkout-gold);


}





.ngp-place-order-btn svg {


    width: 18px;


}









/* =====================================================
   TABLET
===================================================== */


@media(max-width:1050px) {


    .ngp-checkout-layout {


        grid-template-columns: 1fr;


    }



    .ngp-delivery-section {


        position: relative;

        top: auto;


    }



}









/* =====================================================
   MOBILE
===================================================== */


@media(max-width:650px) {



    .ngp-checkout-container {


        width: calc(100% - 25px);


    }





    .ngp-checkout-header h1 {


        font-size: 40px;


    }





    .ngp-cart-product {


        grid-template-columns: 90px 1fr;

        gap: 15px;


    }




    .ngp-cart-product-image {


        width: 90px;

        height: 90px;


    }





    .ngp-product-total {


        grid-column: 2;


    }





    .ngp-cart-product-action {


        flex-direction: column;

        align-items: flex-start;


    }





    .ngp-form-row {


        grid-template-columns: 1fr;


    }





    .ngp-delivery-card,
    .ngp-cart-summary {


        padding: 20px;


    }



}









/* =====================================================
   SMALL MOBILE
===================================================== */


@media(max-width:400px) {



    .ngp-cart-product {


        grid-template-columns: 1fr;


    }





    .ngp-cart-product-image {


        width: 100%;

        height: 220px;


    }





    .ngp-product-total {


        grid-column: auto;


    }



}






/* =====================================================
   NGPMART CHECKOUT FINAL OVERRIDE
===================================================== */


/* LEFT 40% RIGHT 60% */

.ngp-checkout-layout {

    display: grid !important;

    grid-template-columns: 40% 60% !important;

    gap: 30px !important;

    align-items: stretch !important;

}



/* BOTH SAME HEIGHT */

.ngp-cart-section,
.ngp-delivery-section {

    height: 100% !important;

}




.ngp-cart-section {


    display: flex;

    flex-direction: column;

}




.ngp-delivery-section {


    display: flex;

}





.ngp-delivery-card {


    width: 100%;

    height: 100% !important;

    display: flex;

    flex-direction: column;


}







/* =====================================================
   RIGHT FORM 2 COLUMN SYSTEM
===================================================== */


.ngp-delivery-form {


    display: flex;

    flex-direction: column;


}




/* Default every field */

.ngp-form-group {


    width: 100%;


}





/* Row fields */

.ngp-form-row {


    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 20px !important;


}





/* FULL WIDTH FIELDS */

.ngp-form-group.full-width {


    grid-column: 1/-1;


}







/* TEXTAREA FULL WIDTH */

.ngp-form-group textarea {


    width: 100% !important;


}







/* PLACE ORDER BOTTOM */

.ngp-place-order-btn {


    margin-top: auto;

}







/* =====================================================
   MOBILE RESPONSIVE
===================================================== */


@media(max-width:1050px) {


    .ngp-checkout-layout {


        grid-template-columns: 1fr !important;


    }



}





@media(max-width:650px) {



    .ngp-form-row {


        grid-template-columns: 1fr !important;


    }



}