/**
 * NextStage Agency — Elementor Widget Styles
 * Contact Nextstage widget only.
 */
/* ===========================================================
   Nextstage Contact Nextstage Widget — 1:1 PixelR port
   =========================================================== */
.ns-contact-ns { --ns-cns-theme: #377eff; --ns-cns-black: #121212; --ns-cns-white: #fff; }

/* Section paddings */
.ns-contact-ns .contact-page-area { background: var(--ns-cns-white); }
.ns-contact-ns .contact-page-wrapper { padding-top: 200px; padding-bottom: 150px; }
@media (max-width: 991px) { .ns-contact-ns .contact-page-wrapper { padding-top: 100px; padding-bottom: 80px; } }

.ns-contact-ns .contact-page-wrapper .fix,
.ns-contact-ns .contact-page-wrapper.fix { overflow: hidden; }

/* Bootstrap-ish grid fallback so widget renders correctly even without bootstrap.css */
.ns-contact-ns .container { width: 100%; max-width: 1320px; margin-right: auto; margin-left: auto; padding-right: 12px; padding-left: 12px; }
.ns-contact-ns .row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.ns-contact-ns .row.gy-5 { row-gap: 3rem; }
.ns-contact-ns .row.align-items-center { align-items: center; }
.ns-contact-ns [class*="col-"] { padding-right: 12px; padding-left: 12px; width: 100%; }
.ns-contact-ns .col-md-6 { flex: 0 0 auto; }
@media (min-width: 768px) { .ns-contact-ns .col-md-6 { width: 50%; } }
@media (min-width: 992px) { .ns-contact-ns .col-lg-6 { width: 50%; } }
@media (min-width: 1200px) { .ns-contact-ns .col-xl-6 { width: 50%; } }
.ns-contact-ns .col-12 { width: 100%; }
.ns-contact-ns .mt-15 { margin-top: 15px; }

/* Left column — heading & description */
.ns-contact-ns .contact-page-wrapper .content .title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--ns-cns-black);
    margin-bottom: 35px;
    max-width: 600px;
}
@media (max-width: 1399px) {
    .ns-contact-ns .contact-page-wrapper .content .title { font-size: 55px; line-height: 60px; }
}
@media (max-width: 991px) {
    .ns-contact-ns .contact-page-wrapper .content .title { font-size: 45px; line-height: 50px; }
}
.ns-contact-ns .contact-page-wrapper .content .text {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #555;
    margin-bottom: 40px;
}

/* Contact info grid */
.ns-contact-ns .contact-page-wrapper .contact-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.ns-contact-ns .contact-page-wrapper .contact-info .info-items { width: 33.3%; }
@media (max-width: 1399px) { .ns-contact-ns .contact-page-wrapper .contact-info .info-items { width: 50%; } }
@media (max-width: 470px) { .ns-contact-ns .contact-page-wrapper .contact-info .info-items { width: 100%; } }

.ns-contact-ns .contact-page-wrapper .contact-info .info-items .info-title {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    color: var(--ns-cns-black);
    margin-bottom: 23px;
}
.ns-contact-ns .contact-page-wrapper .contact-info .info-items a,
.ns-contact-ns .contact-page-wrapper .contact-info .info-items p {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-decoration: none;
    transition: color .25s ease;
}
.ns-contact-ns .contact-page-wrapper .contact-info .info-items a:hover { color: var(--ns-cns-black); }
.ns-contact-ns .contact-page-wrapper .contact-info .info-items a svg,
.ns-contact-ns .contact-page-wrapper .contact-info .info-items p svg {
    max-width: 16px;
    max-height: 16px;
    flex-shrink: 0;
}

/* Right column — pink form card + offset white frame */
.ns-contact-ns .contact-form.style-2 {
    background: #f9eff1;
    padding: 40px 45px;
    position: relative;
}
@media (max-width: 575px) { .ns-contact-ns .contact-form.style-2 { padding: 20px; } }
.ns-contact-ns .contact-form.style-2::after {
    content: "";
    border: 1px solid var(--ns-cns-black);
    width: 690px;
    height: 572px;
    background: #fff;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: -1;
}
@media (max-width: 1600px) {
    .ns-contact-ns .contact-form.style-2::after { width: 100%; height: 100%; }
}

.ns-contact-ns .contact-form.style-2 form label {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 162%;
    letter-spacing: -0.01em;
    color: var(--ns-cns-black);
    margin-bottom: 15px;
    display: block;
}
.ns-contact-ns .contact-form.style-2 form input,
.ns-contact-ns .contact-form.style-2 form select,
.ns-contact-ns .contact-form.style-2 form textarea,
.ns-contact-ns .contact-form.style-2 form .form-control {
    background: var(--ns-cns-white) !important;
    border: none !important;
    height: 54px;
    width: 100%;
    padding: 20px;
    margin-bottom: 25px;
    font-family: "Kanit", sans-serif;
    font-size: 15px;
    color: var(--ns-cns-black);
    border-radius: 0;
    outline: none;
    box-shadow: none;
}
.ns-contact-ns .contact-form.style-2 form textarea,
.ns-contact-ns .contact-form.style-2 form textarea.form-control {
    min-height: 124px !important;
    height: auto;
    resize: vertical;
}

/* Simple black circular CTA button */
.ns-contact-ns .simple-btn-black .gt-btn-circle-2 {
    position: relative;
    display: inline-block;
    color: var(--ns-cns-white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.16px;
    text-transform: uppercase;
    z-index: 1;
    background: var(--ns-cns-black);
    border: 1px solid var(--ns-cns-white);
    border-radius: 100px;
    padding: 22px 30px;
    overflow: hidden;
    cursor: pointer;
    transition: color .4s ease;
}
.ns-contact-ns .contact-form.style-2 form .simple-btn-black .gt-hover-btn { border-radius: 4px !important; }
.ns-contact-ns .simple-btn-black .gt-btn-circle-2:hover {
    color: var(--ns-cns-black) !important;
    background: var(--ns-cns-theme) !important;
}
.ns-contact-ns .simple-btn-black .gt-btn-circle-2 .gt-btn-circle-dot {
    position: absolute;
    bottom: 0;
    left: -30px;
    width: 30px;
    height: 30px;
    background-color: var(--ns-cns-theme);
    line-height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
    z-index: -1;
}
.ns-contact-ns .simple-btn-black .gt-btn-circle-2:hover .gt-btn-circle-dot {
    width: 350px;
    height: 350px;
}
.ns-contact-ns .simple-btn-black .gt-btn-circle-2 .gt-btn-circle-text-2 { display: block; }
.ns-contact-ns .simple-btn-black .gt-hover-btn.d-inline-flex { display: inline-flex !important; }

/* Gallery image */
.ns-contact-ns .gallery-area-one { background: var(--ns-cns-white); }
.ns-contact-ns .gallery-area-one .gallery-wrapper {
    position: relative;
    z-index: 5;
    background: var(--ns-cns-white);
    height: auto;
}
.ns-contact-ns .gallery-area-one .gallery-wrapper img {
    width: 100%;
    display: block;
}
@media (max-width: 1199px) {
    .ns-contact-ns .gallery-area-one .gallery-wrapper { height: 750px; }
    .ns-contact-ns .gallery-area-one .gallery-wrapper img {
        object-fit: cover;
        height: 100% !important;
    }
}
@media (max-width: 767px) {
    .ns-contact-ns .gallery-area-one .gallery-wrapper { height: 480px; }
}

/* ===========================================================
   Nextstage About Nextstage Widget — 1:1 PixelR index-4 port
   =========================================================== */
.ns-about-ns { --ns-theme: #377eff; --ns-black: #121212; --ns-white: #fff; --ns-text-2: #555; --ns-border-4: rgba(0,0,0,.3); }
.ns-about-ns .about-wrapper { background-size: cover; background-position: center; padding-top: 150px; padding-bottom: 150px; }
@media (max-width: 991px) { .ns-about-ns .about-wrapper { padding-top: 90px; padding-bottom: 90px; } }

/* Grid fallback (same as contact widget) */
.ns-about-ns .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 12px; }
.ns-about-ns .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.ns-about-ns [class*="col-"] { padding: 0 12px; width: 100%; }
@media (min-width: 768px) { .ns-about-ns .col-md-3 { width: 25%; } .ns-about-ns .col-md-9 { width: 75%; } }
@media (min-width: 992px) { .ns-about-ns .col-lg-2 { width: 16.666%; } .ns-about-ns .col-lg-10 { width: 83.333%; } }
@media (min-width: 1200px) { .ns-about-ns .col-xl-3 { width: 25%; } .ns-about-ns .col-xl-9 { width: 75%; } }
.ns-about-ns .mb-32 { margin-bottom: 32px; }
.ns-about-ns .d-flex { display: flex; }
.ns-about-ns .align-items-center { align-items: center; }
.ns-about-ns .justify-content-center { justify-content: center; }
.ns-about-ns .flex-column { flex-direction: column; }

/* Left column */
@media (max-width: 450px) {
    .ns-about-ns .top-content { display: flex; align-items: center; justify-content: space-between; }
}
.ns-about-ns .sub-title2 {
    color: var(--ns-black);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-transform: uppercase;
}
.ns-about-ns .about-btn-content {
    margin-top: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 42px;
}
@media (max-width: 450px) { .ns-about-ns .about-btn-content { margin-top: 0; } }
.ns-about-ns .about-btn-content .arrow-shape {
    width: 95.854px;
    height: 50.183px;
    transform: rotate(-165deg);
    margin-right: 45px;
}
@media (max-width: 450px) { .ns-about-ns .about-btn-content .arrow-shape { display: none; } }

/* Right column */
.ns-about-ns .about-right-content .about-section-title .sub-title {
    color: var(--ns-black);
    font-family: "Anton", sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 45px;
    text-transform: capitalize;
    display: inline-block;
}
.ns-about-ns .about-right-content .about-section-title .title {
    color: #121212;
    font-size: 36px;
    font-weight: 400;
    line-height: 45px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
@media (max-width: 991px) { .ns-about-ns .about-right-content .about-section-title .title { font-size: 30px; line-height: 36px; } }
@media (max-width: 450px) { .ns-about-ns .about-right-content .about-section-title .title { font-size: 25px; line-height: 32px; } }
.ns-about-ns .about-right-content .about-section-title .text {
    color: var(--ns-text-2);
    line-height: 28px;
    text-transform: uppercase;
    max-width: 860px;
}

/* Stats + video */
.ns-about-ns .about-right-content .about-main-content {
    display: flex;
    align-items: center;
    gap: 64px;
}
@media (max-width: 1600px) { .ns-about-ns .about-right-content .about-main-content { gap: 30px; } }
@media (max-width: 1199px) { .ns-about-ns .about-right-content .about-main-content { justify-content: space-between; } }
@media (max-width: 450px) { .ns-about-ns .about-right-content .about-main-content { flex-direction: column; align-items: flex-start; } }

@media (max-width: 450px) { .ns-about-ns .about-right-content .about-main-content .about-info { display: flex; gap: 10px; } }
.ns-about-ns .about-info .about-info-item { margin-bottom: 43px; }
.ns-about-ns .about-info .about-info-item:last-child { margin-bottom: 0; }
.ns-about-ns .about-info .about-info-item p {
    color: var(--ns-black);
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
@media (max-width: 450px) { .ns-about-ns .about-info .about-info-item p { font-size: 14px; } }
.ns-about-ns .about-info .about-info-item span {
    color: var(--ns-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-transform: uppercase;
    display: inline-block;
}

.ns-about-ns .about-video {
    display: flex;
    align-items: center;
    gap: 30px;
}
.ns-about-ns .about-video .thumb {
    position: relative;
    width: 380px;
    height: 504px;
    overflow: hidden;
}
.ns-about-ns .about-video .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1399px) { .ns-about-ns .about-video .thumb { width: 300px; height: 400px; } }
@media (max-width: 450px) { .ns-about-ns .about-video .thumb { width: 100%; } }
@media (max-width: 1199px) { .ns-about-ns .about-video .thumb.thumb-one { display: none; } }
.ns-about-ns .about-video .thumb-one { margin-top: 120px; }

/* Pulse ring on play button */
.ns-about-ns .about-video .thumb .neon-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    cursor: pointer;
}
.ns-about-ns .about-video .thumb .neon-pulse::before,
.ns-about-ns .about-video .thumb .neon-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--ns-border-4);
    border-radius: 100%;
    animation: nsPulseOut 10s ease-out infinite;
    opacity: 0;
}
.ns-about-ns .about-video .thumb .neon-pulse::after { animation-delay: 5s; }
@keyframes nsPulseOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}
.ns-about-ns .video-popup svg { display: block; }

/* Bounce-x animation for the move button container */
.ns-about-ns .bounce_animation {
    animation: nsBounceX 7s infinite linear;
}
@keyframes nsBounceX {
    0% { transform: translateX(0); }
    50% { transform: translateX(30px); }
    100% { transform: translateX(0); }
}

/* Circular black button (reused from Contact widget) */
.ns-about-ns .gt-hover-btn-wrapper { display: inline-block; }
.ns-about-ns .gt-btn-circle-2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 140px;
    height: 140px;
    color: var(--ns-white);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.16px;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--ns-black);
    border: 1px solid var(--ns-white);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    transition: color .4s ease;
}
.ns-about-ns .gt-btn-circle-2:hover {
    color: var(--ns-black) !important;
    background: var(--ns-theme) !important;
}
.ns-about-ns .gt-btn-circle-2 .gt-btn-circle-text-2 { display: block; }
.ns-about-ns .gt-btn-circle-2 .gt-btn-circle-dot {
    position: absolute;
    bottom: 0;
    left: -30px;
    width: 30px;
    height: 30px;
    background-color: var(--ns-theme);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
    z-index: -1;
}
.ns-about-ns .gt-btn-circle-2:hover .gt-btn-circle-dot { width: 350px; height: 350px; }

/* ===========================================================
   Nextstage Project Nextstage Widget — 1:1 PixelR index-4 port
   =========================================================== */
.ns-project-ns { --ns-theme: #F8FAFF; --ns-black: #121212; --ns-white: #fff; --ns-text-2: #555555; --ns-bg: #D9D9D9; background-color: #F8FAFF; position: relative; z-index: 1; overflow: hidden; padding-top: 0; padding-bottom: 0; }
@media (max-width: 991px) { .ns-project-ns { padding-top: 0; padding-bottom: 0; } }

/* Bootstrap-ish grid fallback */
.ns-project-ns .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 12px; }

/* Header */
.ns-project-ns .project-wrapper .sub-title {
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    color: #1e2022;
    text-align: left;
}

/* Marquee */
.ns-project-ns .wrapper-rolling-text {
    white-space: nowrap;
    font-family: "Anton", sans-serif;
    margin-bottom: 75px;
    position: relative;
    overflow: hidden;
}
.ns-project-ns .rolling-text { display: inline-block; }
.ns-project-ns .rolling-text .marquee-text {
    color: var(--ns-black);
    font-family: "Anton", sans-serif;
    font-size: 120px;
    font-weight: 400;
    line-height: 120px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
}
.ns-project-ns .rolling-text .marquee-text span {
    color: var(--ns-theme);
    margin: 0 43px;
}
@media (max-width: 991px) {
    .ns-project-ns .rolling-text .marquee-text { font-size: 80px; line-height: 80px; }
}
@media (max-width: 575px) {
    .ns-project-ns .rolling-text .marquee-text { font-size: 56px; line-height: 56px; }
    .ns-project-ns .rolling-text .marquee-text span { margin: 0 22px; }
}

/* Card layout */
.ns-project-ns .project-card-wrapper { background: transparent; }
.ns-project-ns .card-items { position: relative; z-index: 0; }

.ns-project-ns .card-single-item {
    display: flex;
    gap: 50px;
    margin-bottom: 50px;
    background: transparent;
}
.ns-project-ns .card-single-item:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .ns-project-ns .card-single-item { align-items: center; } }
@media (max-width: 767px) {
    .ns-project-ns .card-single-item { flex-direction: column-reverse; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
    .ns-project-ns .card-single-item.items-2 { flex-direction: column; align-items: flex-start; }
}

.ns-project-ns .card-text-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
@media (max-width: 991px) { .ns-project-ns .card-text-content { gap: 30px; } }
@media (max-width: 767px) {
    .ns-project-ns .card-text-content {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

.ns-project-ns .card-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ns-bg);
    border-radius: 100%;
    transition: 150ms ease-in-out;
    text-decoration: none;
}
.ns-project-ns .card-btn svg path { transition: 150ms ease-in-out; }
.ns-project-ns .card-btn:hover { background: var(--ns-theme); }

.ns-project-ns .card-content {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
@media (max-width: 767px) {
    .ns-project-ns .card-content { writing-mode: horizontal-tb; transform: rotate(0deg); align-items: flex-start; }
}
.ns-project-ns .card-content .title {
    color: var(--ns-black);
    font-family: "Anton", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-align: start;
    margin: 0;
}
@media (max-width: 450px) {
    .ns-project-ns .card-content .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
    }
}
.ns-project-ns .card-content .text {
    color: var(--ns-text-2);
    line-height: normal;
    text-transform: capitalize;
    text-align: start;
    margin: 0;
}

/* Image offsets — the zig-zag layout */
.ns-project-ns .project-image { flex: 1 1 auto; }
.ns-project-ns .project-image img { width: 100%; height: auto; display: block; }
.ns-project-ns .project-image.project-image-fast { margin-left: 105px; }
.ns-project-ns .project-image.project-image-last { margin-right: 105px; }
@media (max-width: 991px) {
    .ns-project-ns .project-image.project-image-fast,
    .ns-project-ns .project-image.project-image-last { margin-left: 0; margin-right: 0; }
}

/* ===========================================================
   Nextstage Project — Style 2 (index-2 "project-area-three")
   =========================================================== */
.ns-project-ns--s2 { padding-top: 0; padding-bottom: 0; overflow: hidden; }
.ns-project-ns--s2 .project-wrapper { padding-bottom: 150px; }
@media (max-width: 991px) { .ns-project-ns--s2 .project-wrapper { padding-bottom: 90px; } }

/* Section title 3 */
.ns-project-ns--s2 .section-title-three {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    padding-bottom: 75px;
}
@media (max-width: 1399px) { .ns-project-ns--s2 .section-title-three { justify-content: space-between; } }
@media (max-width: 1199px) { .ns-project-ns--s2 .section-title-three { flex-direction: column; align-items: flex-start; } }

.ns-project-ns--s2 .section-title-three .title {
    max-width: 540px;
    color: var(--ns-black);
    font-family: "Anton", sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
}
@media (max-width: 1199px) { .ns-project-ns--s2 .section-title-three .title { max-width: 100%; } }
@media (max-width: 767px) { .ns-project-ns--s2 .section-title-three .title { font-size: 40px; } }

.ns-project-ns--s2 .section-title-three .text-2 {
    max-width: 440px;
    color: var(--ns-text-2);
    text-transform: capitalize;
    font-size: 16px;
    line-height: 28px;
    margin: 0;
}
@media (max-width: 1199px) { .ns-project-ns--s2 .section-title-three .text-2 { max-width: 100%; } }

/* Clients badge */
.ns-project-ns--s2 .our-clint-2 {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--ns-black);
    padding: 20px;
    width: 277px;
    border-radius: 100px;
    transform: rotate(-30deg);
}
@media (max-width: 1399px) { .ns-project-ns--s2 .our-clint-2 { display: none; } }
.ns-project-ns--s2 .our-clint-2 ul { display: flex; align-items: center; margin-left: 25px; padding: 0; list-style: none; }
.ns-project-ns--s2 .our-clint-2 ul li { margin-left: -25px; width: 50px; height: 50px; list-style: none; }
.ns-project-ns--s2 .our-clint-2 ul li img { width: 50px; height: 50px; border: 2px solid var(--ns-black); border-radius: 100%; display: block; }
.ns-project-ns--s2 .our-clint-2 .text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: -0.14px;
    text-transform: capitalize;
    max-width: 116px;
    margin: 0;
}

/* Slider — constrained inside content container */
.ns-project-ns--s2 .project-wrapper .container { overflow: hidden; }
.ns-project-ns--s2 .thumb-wrap {
    display: flex !important;
    align-items: center;
    gap: 30px;
    margin-right: 0;
}
@media (max-width: 1199px) {
    .ns-project-ns--s2 .thumb-wrap { flex-wrap: wrap; }
}
.ns-project-ns--s2 .thumb-wrap .thumb {
    position: relative;
    border-radius: 30px;
    margin-right: 30px;
    height: 582px;
    min-height: 582px;
    width: 210px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    transition: all 0.4s ease;
}
.ns-project-ns--s2 .thumb-wrap .thumb.active { width: 690px; }
@media (max-width: 1199px) { .ns-project-ns--s2 .thumb-wrap .thumb { width: 100% !important; margin-right: 0; } }
@media (max-width: 450px) { .ns-project-ns--s2 .thumb-wrap .thumb { height: 382px; min-height: 382px; } }

.ns-project-ns--s2 .thumb-wrap .thumb a {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    text-decoration: none;
}

/* Hover/active reveal overlays */
.ns-project-ns--s2 .thumb-wrap .thumb .card-text-content {
    position: absolute;
    left: -100%;
    bottom: 30px;
    border-radius: 20px;
    background: #fff;
    padding: 28px;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 250ms ease-in-out;
}
@media (max-width: 1399px) { .ns-project-ns--s2 .thumb-wrap .thumb .card-text-content { padding: 22px; } }
@media (max-width: 450px) { .ns-project-ns--s2 .thumb-wrap .thumb .card-text-content { padding: 10px; } }
.ns-project-ns--s2 .thumb-wrap .thumb .card-text-content .title {
    color: var(--ns-black);
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin: 0 0 4px;
}
@media (max-width: 1399px) { .ns-project-ns--s2 .thumb-wrap .thumb .card-text-content .title { font-size: 17px; } }
@media (max-width: 575px) { .ns-project-ns--s2 .thumb-wrap .thumb .card-text-content .title { font-size: 20px; } }
.ns-project-ns--s2 .thumb-wrap .thumb .card-text-content p { color: var(--ns-text-2); text-transform: capitalize; margin: 0; }

.ns-project-ns--s2 .thumb-wrap .thumb .project-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all 250ms ease-in-out;
}
.ns-project-ns--s2 .thumb-wrap .thumb a:hover .project-btn,
.ns-project-ns--s2 .thumb-wrap .thumb.active .project-btn { visibility: visible; opacity: 1; right: 30px; }
.ns-project-ns--s2 .thumb-wrap .thumb a:hover .card-text-content,
.ns-project-ns--s2 .thumb-wrap .thumb.active .card-text-content { visibility: visible; opacity: 1; left: 30px; }

/* Circle button variant (wrapper-two) */
.ns-project-ns--s2 .gt-hover-btn-wrapper-two { display: inline-block; }
.ns-project-ns--s2 .gt-hover-btn-wrapper-two .gt-btn-circle-2 {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 68px;
    height: 68px;
    background: #fff;
    color: var(--ns-black);
    border: 0;
    z-index: 1;
    transition: color .4s ease;
    cursor: pointer;
}
.ns-project-ns--s2 .gt-hover-btn-wrapper-two .gt-btn-circle-2:hover { color: #fff !important; }
.ns-project-ns--s2 .gt-hover-btn-wrapper-two .gt-btn-circle-2 .gt-btn-circle-dot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-color: var(--ns-theme);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
    z-index: -1;
}
.ns-project-ns--s2 .gt-hover-btn-wrapper-two .gt-btn-circle-2:hover .gt-btn-circle-dot { width: 320px; height: 320px; }
.ns-project-ns--s2 .gt-btn-circle-text-2 { display: flex; align-items: center; justify-content: center; }

/* Slick reset (no lib CSS loaded, so render essentials) */
.ns-project-ns--s2 .slick-list { overflow: hidden; }
.ns-project-ns--s2 .slick-track { display: flex; align-items: center; }
.ns-project-ns--s2 .slick-slide { height: auto; float: left; }

/* ===========================================================
   Nextstage Service Nextstage Widget — 1:1 PixelR index-3 port
   =========================================================== */
.ns-service-ns {
    --ns-svc-headline-from: #111013;
    --ns-svc-headline-to:   #e4e4e4;
    --ns-svc-text:  #121212;
    --ns-svc-muted: #555;
    overflow: hidden;
}
.ns-service-ns .service-wrapper { padding-top: 150px; padding-bottom: 150px; }
@media (max-width: 991px) { .ns-service-ns .service-wrapper { padding-top: 90px; padding-bottom: 90px; } }

/* Grid fallback */
.ns-service-ns .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 12px; }
.ns-service-ns .row { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.ns-service-ns .row.gy-4 { row-gap: 1.5rem; }
.ns-service-ns [class*="col-"] { padding: 0 20px; width: 100%; }
@media (min-width: 992px) {
    .ns-service-ns .col-lg-5 { width: 41.666%; }
    .ns-service-ns .col-lg-7 { width: 58.333%; }
}
@media (min-width: 1200px) {
    .ns-service-ns .col-xl-5 { width: 41.666%; }
    .ns-service-ns .col-xl-7 { width: 58.333%; }
}
.ns-service-ns .mb-75 { margin-bottom: 75px; }
.ns-service-ns .mt-55 { margin-top: 55px; }
.ns-service-ns .text-center { text-align: center; }

/* Headline — scroll sweep (gt_text_invert_3 lines) */
.ns-service-ns .section-title .title {
    color: var(--ns-svc-text);
    text-align: center !important;
    font-size: 60px;
    font-weight: 500;
    line-height: 70px;
    letter-spacing: -0.6px;
    max-width: 1410px;
    margin: 0 auto 150px;
}
.ns-service-ns .gt_text_invert_3 > div {
    background-image: linear-gradient(to right, var(--ns-svc-headline-from) 50%, var(--ns-svc-headline-to) 50%);
    background-size: 200% 100%;
    background-position: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@media (max-width: 1399px) { .ns-service-ns .section-title .title { margin-bottom: 100px; } }
@media (max-width: 1199px) { .ns-service-ns .section-title .title { font-size: 50px; line-height: 57px; } }
@media (max-width: 991px)  { .ns-service-ns .section-title .title { font-size: 30px; line-height: 37px; margin-bottom: 70px; } }
@media (max-width: 767px)  { .ns-service-ns .section-title .title { margin-bottom: 50px; } }
@media (max-width: 450px)  { .ns-service-ns .section-title .title { font-size: 24px; line-height: 32px; } }

/* Sub-title */
.ns-service-ns .sub-title {
    color: var(--ns-svc-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    padding-bottom: 68px;
}
@media (max-width: 767px) { .ns-service-ns .sub-title { padding-bottom: 30px; } }

/* Dashed divider with marching ants */
.ns-service-ns .line-shape-1 {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 5px, transparent 5px, transparent 10px);
    animation: nsSvcDash 1s linear infinite;
    flex: 0 0 100%;
}
@keyframes nsSvcDash { from { background-position: 0 0; } to { background-position: 10px 0; } }
@media (max-width: 1199px) {
    .ns-service-ns .line-shape-1.mb-75 { margin-bottom: 30px; }
    .ns-service-ns .line-shape-1.mt-55 { margin-top: 30px; }
}

/* Service row layout */
.ns-service-ns .thumb {
    overflow: hidden;
    text-align: start;
    margin-right: 65px;
}
@media (max-width: 1199px) { .ns-service-ns .thumb { margin-right: 0; } }
.ns-service-ns .thumb img {
    width: 35%;
    object-fit: cover;
    min-height: 300px;
    border-radius: 20px;
    display: block;
}
@media (max-width: 1199px) { .ns-service-ns .thumb img { width: 100% !important; } }

.ns-service-ns .service-card-content { margin-left: -65px; }
@media (max-width: 1199px) { .ns-service-ns .service-card-content { margin-left: 0; } }

.ns-service-ns .service-card-content > .title {
    color: var(--ns-svc-text);
    font-size: 45px;
    font-weight: 500;
    line-height: 45px;
    text-decoration: none;
    background-position: 0 95%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-image: linear-gradient(180deg, currentColor 0%, currentColor 100%);
    transition: background-size 0.4s ease-in-out;
    display: inline;
}
.ns-service-ns .service-card-content > .title:hover { background-size: 100% 2px; }
@media (max-width: 991px) { .ns-service-ns .service-card-content > .title { font-size: 30px; line-height: 36px; } }

.ns-service-ns .service-card-content > .text {
    color: var(--ns-svc-text);
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.24px;
    margin: 15px 0;
}

/* Features grid */
.ns-service-ns .items-wrap {
    display: grid;
    grid-template-columns: 40% 60%;
    row-gap: 15px;
}
@media (max-width: 1199px) { .ns-service-ns .items-wrap { grid-template-columns: 44% 56%; } }
@media (max-width: 767px)  { .ns-service-ns .items-wrap { grid-template-columns: 100%; } }
.ns-service-ns .items-wrap .item .item-title {
    color: var(--ns-svc-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.16px;
}
.ns-service-ns .items-wrap .item .text {
    color: var(--ns-svc-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.16px;
    max-width: 373px;
    margin: 0;
}

/* ===========================================================
   Nextstage Project — Style 3 (project-2 dual Swiper)
   =========================================================== */
.ns-project-ns--s3 { padding: 4rem 0; overflow: hidden; }
.ns-project-ns--s3 .project-page-wrapper { padding-bottom: 0; }
@media (max-width: 991px) { .ns-project-ns--s3 { padding: 3rem 0; } }

.ns-project-ns--s3 .container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 12px;
}
.ns-project-ns--s3 .section-title {
    text-align: left;
    max-width: none;
    margin: 0 0 2.5rem;
}
.ns-project-ns--s3 .section-title .title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    color: #1e2022;
    margin: 0 0 0.75rem;
    max-width: none;
}
.ns-project-ns--s3 .section-title .sub-title {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: #677788;
    text-align: left;
    margin: 0;
}

.ns-project-ns--s3 .main-content > .swiper {
    padding: 0;
}
.ns-project-ns--s3 .swiper-slide {
    transition: opacity 0.5s ease;
}
.ns-project-ns--s3 .ns-project-page-slider { margin-bottom: 24px; }

.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb {
    position: relative;
    display: block;
    z-index: 1;
    overflow: hidden;
    text-decoration: none;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb {
    aspect-ratio: 3 / 2;
    width: 100%;
    background: #377eff;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb .thumb-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    visibility: hidden;
    opacity: 0;
    transition: all 250ms ease-in-out;
    z-index: 99;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb .thumb-content .title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #ffffff;
    display: inline;
    background-position: 0 95%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-image: linear-gradient(180deg, #fff 0%, #fff 100%);
    transition: background-size 0.4s ease-in-out;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb .thumb-content .title:hover { background-size: 100% 2px; }
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb .thumb-content span {
    display: block;
    margin-top: 6px;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.85);
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb .thumb-icon {
    width: 44px;
    height: 44px;
    background: #377dff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40px;
    left: 40px;
    visibility: hidden;
    opacity: 0;
    transition: all 250ms ease-in-out;
    z-index: 99;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb .thumb-icon svg path { fill: #ffffff; }
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(55, 126, 255, 0.5) 0%, #377eff 100%);
    z-index: 9;
    visibility: hidden;
    opacity: 0;
    transition: all 250ms ease-in-out;
}
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb:hover .thumb-content,
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb:hover .thumb-icon,
.ns-project-ns--s3 .project-slider-card .card-wrapper .thumb:hover::before {
    visibility: visible;
    opacity: 1;
}

.ns-project-ns--s3 .ns-project-row-heading {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: normal;
    color: #1e2022;
    text-transform: none;
    margin: 0 0 1.25rem;
    padding: 0 20px;
}
.ns-project-ns--s3 .ns-project-page-slider-two + .ns-project-row-heading,
.ns-project-ns--s3 .ns-project-page-slider + .ns-project-row-heading { margin-top: 2.5rem; }
.ns-project-ns--s3 .main-content > .ns-project-row-heading + .swiper { margin-top: 0; }

/* ===========================================================
   Nextstage Hero Nextstage Widget — 1:1 PixelR index-4 port
   =========================================================== */
.ns-hero-ns {
    --ns-hero-sub: #4a5a82;
    --ns-hero-title: #121212;
    --ns-hero-text: #445273;
    --ns-hero-theme: #377eff;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #F4F8FF 0%, #DDE7FB 45%, #B4C7F1 100%);
}
.ns-hero-ns::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    z-index: 0;
}
.ns-hero-ns > * { position: relative; z-index: 1; }
.ns-hero-ns .our-clint ul li img { border-color: #ffffff; }
@media (max-width: 991px) { .ns-hero-ns { padding-top: 0; padding-bottom: 0; } }

.ns-hero-ns .hero-wrapper { position: relative; }
.ns-hero-ns .hero-bg {
    position: absolute;
    right: 0;
    bottom: -578px;
    z-index: -1;
}
.ns-hero-ns .hero-bg img { display: block; max-width: 100%; height: auto; }

/* Top marquee slider */
.ns-hero-ns .hero-top-content { display: flex; align-items: center; padding-bottom: 0; overflow: hidden; }
.ns-hero-ns .hero-top-content .swiper { width: 100%; }
.ns-hero-ns .ns-hero-image-slider { pointer-events: none; }
.ns-hero-ns .ns-hero-image-slider .swiper-wrapper { transition-timing-function: linear !important; }
.ns-hero-ns .swiper-slide { width: auto; }
.ns-hero-ns .swiper-slide .thumb { display: block; }
.ns-hero-ns .swiper-slide .thumb svg { display: block; width: 300px; height: 217px; max-width: 100%; }
@media (max-width: 767px) {
    .ns-hero-ns .swiper-slide .thumb svg { width: 220px; height: 160px; }
}

/* Grid fallback */
.ns-hero-ns .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 12px; }
.ns-hero-ns .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.ns-hero-ns [class*="col-"] { padding: 0 12px; width: 100%; }
@media (min-width: 992px) { .ns-hero-ns .col-lg-12 { width: 100%; } }
@media (min-width: 1200px) {
    .ns-hero-ns .col-xl-9 { width: 75%; }
    .ns-hero-ns .col-xl-3 { width: 25%; }
}
@media (max-width: 1199px) { .ns-hero-ns .col-xl-3 { display: none; } }

/* Main content */
.ns-hero-ns .hero-main-content { padding-top: 94px; }
@media (max-width: 991px) { .ns-hero-ns .hero-main-content { padding-top: 70px; } }
@media (max-width: 767px) { .ns-hero-ns .hero-main-content { padding-top: 40px; } }

.ns-hero-ns .hero-main-content .section-title { margin-bottom: 45px; }
.ns-hero-ns .hero-main-content .section-title .sub-title {
    color: var(--ns-hero-sub);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ns-hero-ns .hero-main-content .section-title .title {
    color: var(--ns-hero-title);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 100px;
    font-weight: 300;
    line-height: 110px;
    letter-spacing: -3px;
    margin: 0;
}
.ns-hero-ns .hero-main-content .section-title .title span { font-weight: 600; }
@media (max-width: 1399px) { .ns-hero-ns .hero-main-content .section-title .title { font-size: 99px; line-height: 102px; } }
@media (max-width: 991px)  { .ns-hero-ns .hero-main-content .section-title .title { font-size: 84px; line-height: 94px; } }
@media (max-width: 767px)  { .ns-hero-ns .hero-main-content .section-title .title { font-size: 64px; line-height: 77px; } }
@media (max-width: 575px)  { .ns-hero-ns .hero-main-content .section-title .title { font-size: 59px; line-height: 74px; } }
@media (max-width: 500px)  { .ns-hero-ns .hero-main-content .section-title .title { font-size: 56px; line-height: 68px; } }
@media (max-width: 470px)  { .ns-hero-ns .hero-main-content .section-title .title { font-size: 50px; line-height: 64px; } }
@media (max-width: 450px)  { .ns-hero-ns .hero-main-content .section-title .title { font-size: 42px; line-height: 57px; } }

/* Stats */
.ns-hero-ns .info-cta {
    display: flex;
    align-items: center;
    gap: 64px;
    margin-bottom: 50px;
}
@media (max-width: 767px) { .ns-hero-ns .info-cta { gap: 20px; } }
@media (max-width: 450px) { .ns-hero-ns .info-cta { gap: 10px; } }
.ns-hero-ns .info-cta .cta-item .title {
    color: var(--ns-hero-title);
    font-family: "Kanit", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    text-transform: uppercase;
    margin: 0;
}
.ns-hero-ns .info-cta .cta-item span {
    color: var(--ns-hero-text);
    font-family: "Kanit", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 50px;
    text-transform: uppercase;
}

/* Send message circular button */
.ns-hero-ns .simple-btn-white { display: inline-block; }
.ns-hero-ns .simple-btn-white .gt-btn-circle-2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #fff;
    color: var(--ns-hero-title);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.14px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(18,18,18,.1);
    overflow: hidden;
    z-index: 1;
    transition: color .4s ease;
}
.ns-hero-ns .simple-btn-white .gt-btn-circle-2:hover { color: var(--ns-hero-title) !important; }
.ns-hero-ns .simple-btn-white .gt-btn-circle-2:hover .gt-btn-circle-dot { width: 350px; height: 350px; }
.ns-hero-ns .simple-btn-white .gt-btn-circle-2 .gt-btn-circle-dot {
    position: absolute;
    bottom: 0;
    left: -30px;
    width: 30px;
    height: 30px;
    background-color: var(--ns-hero-theme);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
    z-index: -1;
}

/* Right column */
.ns-hero-ns .hero-main-content .hero-right-content { margin-right: -20px; }
.ns-hero-ns .hero-main-content .hero-right-content .right-text {
    color: var(--ns-hero-text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 35px;
}
.ns-hero-ns .hero-main-content .hero-right-content .our-clint { margin-left: 25px; }

.ns-hero-ns .our-clint { display: flex; align-items: center; gap: 40px; }
.ns-hero-ns .our-clint ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ns-hero-ns .our-clint ul li { margin-left: -25px; list-style: none; width: 50px; height: 50px; }
.ns-hero-ns .our-clint ul li img { width: 50px; height: 50px; border: 2px solid var(--ns-hero-title); border-radius: 100%; display: block; }
.ns-hero-ns .our-clint .text {
    color: var(--ns-hero-text);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.16px;
    text-transform: capitalize;
    max-width: 116px;
    margin: 0;
}

/* ===========================================================
   Project widget — keep every style inside the content container
   =========================================================== */
.ns-project-ns { overflow: hidden; }

/* Style 1 — marquee & card rows stay inside container */
.ns-project-ns--s1 .wrapper-rolling-text {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 12px;
}

/* Style 3 — both swipers constrained to container width */
.ns-project-ns--s3 .main-content { max-width: 1320px; margin: 0 auto; padding: 0 12px; }
.ns-project-ns--s3 .main-content > .swiper { overflow: hidden; }