/* --- GLOBAL STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button,
input,
textarea,
select {
  font-family: 'Inter', 'Roboto', sans-serif !important;
}

body {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    overflow-x: hidden;
    background: url('/IMAGES/Bodybg.png') no-repeat center center fixed;
    background-size: cover;
    background-color: radial-gradient(circle at top left, #111827 0%, #05070b 50%), var(--bg-deep)#0A0C10 !important;
    color: #111827;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure smooth scrolling when clicking menu links */
html {
    scroll-behavior: smooth;
}

/* --- HEADER & NAVIGATION --- */
/* =========================
   HEADER
========================= */

.header{
    width:100%;
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.header-container{
    width:min(92%,1400px);
    margin:auto;
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

/* =========================
   LOGO
========================= */

.logo-section{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-section img{
    width:55px;
    height:55px;
    object-fit:contain;
}

.company-info h2{
    font-size:20px;
    font-weight:700;
    color:#222cf9;
    margin:0;
}

/* =========================
   NAVIGATION
========================= */

.nav-menu{
    display:flex;
    align-items:center;
    gap:24px;
}

.nav-link{
    position:relative;
    color:#1f2937;
    font-size:15px;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
}

.nav-link:hover{
    color:#0e66e9;
}

/* Active menu */

.nav-link.active{
    color:#0e66e9;
}

.nav-link.active::after,
.nav-link:hover::after{
    width:100%;
}

.nav-link::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:0;
    width:0;
    height:3px;
    border-radius:20px;
    background:#0e66e9;
    transition:.35s ease;
}

/* =========================
   WHATSAPP BUTTON
========================= */


.whatsapp-btn{
    padding:0;
    width:auto;
    height:auto;
    background:none;
    box-shadow:none;
}

.whatsapp-btn img{
    width:80px;
    height:50px;
    display:block;
    object-fit:contain;
}







.whatsapp-btn span{
    white-space:nowrap;
}

/* =========================
   MOBILE MENU BUTTON
========================= */

.menu-btn{
    display:none;
    background:none;
    border:none;
    font-size:30px;
    cursor:pointer;
    color:#111827;
}

/* --- HERO SECTION (RESTRICTED TO 90VH) --- */
.hero {
    height: 90vh;
    max-height: 90vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 15px 0 0 0;
    
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.6s ease-in-out;
}

.hero-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    text-align: center;
}

.hero-top-text {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: #f7f7f7;
    flex-shrink: 0;
}

/* BIGGER CONTAINER: Zero empty white space layout box */
.slider-wrapper {
    position: relative;
    width: min(94%, 1100px);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-container {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.slider-container picture,
.slider-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    color: #ff4800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 900;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: #ffffff;
    color: #e92f0e;
    transform: translateY(-50%) scale(1.08);
}

.prev-arrow {
    left: -70px;
}

.next-arrow {
    right: -70px;
}

.slider-container picture,
.slider-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}

.hero-bottom-text {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #fcfcfc;
    font-weight: 800;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 5px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dot.active {
    background: #0ea5e9;
    transform: scale(1.1);
}

/* --- INFINITE TICKER MODULE --- */
.ticker-container {
    width: 100%;
    overflow: hidden;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 5px 0;
    display: flex;
    flex-shrink: 0;
}

.ticker-track {
    display: flex;
    gap: 24px;
    width: max-content;
    margin: auto;
    animation: scrollMarquee 35s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-cardimg {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0);
    padding: 10px 20px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0);
    max-width: 320px;
    border: 1px solid rgba(255, 255, 255, 0);
    text-align: left;
}

.ticker-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0);
    padding: 10px 20px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0);
    min-width: 200px;
    max-width: 320px;
    border: 1px solid rgba(255, 255, 255, 0);
    text-align: left;
}

    .card-icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(14, 165, 233, 0.1);
        color: #003d8d;
        font-size: 20px;
        flex-shrink: 0;
    }

.card-img-box img {
    height: 40px !important;
    width: auto !important;
    min-width: 40px;
    object-fit: contain;
    flex-shrink: 0;
}



.card-content-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content-box h3 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 2px;
}

.card-content-box p {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- ADDED: NEW MENU SECTION STYLES --- */
.content-section {
    padding: 80px 0;
   
    margin: 40px auto;
    background: rgba(255, 255, 255, 0); /* Allows content panels to pop over the body background */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0);
    text-align: center;
    min-height: 400px; /* Temporary visual placeholder height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}





/* --- RESPONSIVENESS BREAKPOINTS --- */
@media (max-width: 1100px) {
    .nav-menu { gap: 16px; }
    .nav-menu a { font-size: 14px; }
    .hero-top-text { font-size: 22px; }
}

@media (max-width: 991px) {
    .menu-btn { display: block; }
    .nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 80px);
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
        padding: 40px 30px;
        transition: right .4s cubic-bezier(0.1, 0.7, 0.1, 1);
        box-shadow: -5px 0 20px rgba(0,0,0,.05);
        z-index: 1001;
    }
    .nav-menu.active { right: 0; }
    .whatsapp-btn { width: 100%; text-align: center; margin-top: 10px; }
}

@media (max-width: 768px) {
    .hero { 
        height: 90vh; 
        max-height: 90vh; 
        padding-top: 15px; 
        background-size: 100% 100%; 
    }
    .hero-top-text { font-size: 18px; }
    .slider-container { height: 50vh; border-radius: 16px; width: 90%; }
    .hero-bottom-text { font-size: 13px; height: 55px; line-height: 1.4; }
    .ticker-container { padding: 8px 0; }
     .company-info h2 { font-size: 16px; font-weight: 600; }
    .ticker-card { min-width: 240px; padding: 8px 16px; gap: 10px;}
    .card-icon-box { width: 36px; height: 36px; font-size: 18px; }
    .card-content-box h3 { font-size: 14px; }
    .card-content-box p { font-size: 12px; }
    .content-section { min-height: 300px; padding: 0px; }
}

@media (max-width: 480px) {
    .header-container { width: 92%; min-height: 70px; }
    .nav-menu { top: 70px; height: calc(100vh - 70px); }
    .logo-section img { width: 42px; height: 42px; }
    .company-info h2 { font-size: 16px; font-weight: 600; }
    .company-info span { font-size: 11px; }
    .hero-top-text { font-size: 15px; padding: 0 10px; }
    .slider-container { height: 50vh; }
    .hero-bottom-text { font-size: 11px; padding: 0 10px; }
    .dot { width: 8px; height: 8px; }
}












.renjna-about-stat-box {
    text-align: center;
}

.stat-icon {
    width: 100px;
    height: 60px;
    object-fit: contain;
    background-color: #f5f7fa; /* light background */
    padding: 1px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 10px;
}




















.jncon-email-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.jncon-email-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.jncon-email-links a:hover {
    color: #0e66e9;
}

.email-divider {
    color: #999;
}

/* Mobile */
@media (max-width: 576px) {
    .jncon-email-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .email-divider {
        display: none;
    }
}




/* ========================================================================================================================== */







        /* ─── ROOT TOKENS ────────────────────────────────────────── */
        :root {
          --njn-red-50:   #fff0f0;
          --njn-red-100:  #ffd6d6;
          --njn-red-400:  #3b82f6;
          --njn-red-600:  #3b82f6;
          --njn-red-800:  #afaeae;
     
          --njn-blue-50:  #eff4ff;
          --njn-blue-100: #dbeafe;
          --njn-blue-400: #3b82f6;
          --njn-blue-600: #1d4ed8;
          --njn-blue-800: #1e3a8a;
     
          --njn-gray-50:  #f9fafb;
          --njn-gray-100: #f3f4f6;
          --njn-gray-200: #e5e7eb;
          --njn-gray-400: #ffffff;
          --njn-gray-600: #dddddd;
          --njn-gray-900: #ffffff;
     
          --njn-font-display: 'DM Serif Display', Georgia, serif;
          --njn-font-body:    'DM Sans', sans-serif;
     
          --njn-radius-sm:  6px;
          --njn-radius-md:  10px;
          --njn-radius-lg:  16px;
          --njn-radius-xl:  22px;
     
          --njn-shadow-card: 0 1px 3px rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0);
          --njn-shadow-hover: 0 8px 32px rgba(28, 78, 185, 0.1), 0 2px 8px rgba(29,78,216,0.07);
        }

     
        /* ─── SECTION HEADER ─────────────────────────────────────── */
        .njn-section-header {
          text-align: center;
          margin-bottom: 40px;
        }
     
        .njn-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--njn-red-600);
          margin-bottom: 12px;
        }
     
        .njn-eyebrow::before,
        .njn-eyebrow::after {
          content: '';
          display: block;
          width: 28px;
          height: 1px;
          background: var(--njn-red-400);
          opacity: 0.5;
        }
     
        .njn-section-title {
          font-family: var(--njn-font-display);
          font-size: clamp(26px, 4vw, 36px);
          font-weight: 400;
          color: var(--njn-gray-900);
          line-height: 1.2;
          margin-bottom: 10px;
        }
     
        .njn-section-title em {
          font-style: italic;
          color: var(--njn-red-600);
        }
     
        .njn-section-sub {
          font-size: 16px;
          color: #fff;
          max-width: 460px;
          margin: 0 auto;
          line-height: 1.65;
        }
     
        /* ─── GRID ───────────────────────────────────────────────── */
        .njn-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 18px;
          max-width: 90%;
          margin: 0 auto;
        }
     
        /* ─── CARD ───────────────────────────────────────────────── */
        .njn-card {
          position: relative;
          display: flex;
          align-items: stretch;
          background: transparent;
          margin: auto;
          max-width: 70%;
          min-width: 70%;
          border: 0.5px solid rgba(185, 28, 28, 0);
          border-radius: var(--njn-radius-xl);
          overflow: hidden;
          transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
          cursor: pointer;
        }
     
        .njn-card:hover {
          border-color: rgba(245, 245, 245, 0.38);
          transform: translateY(-3px);
          box-shadow: var(--njn-shadow-hover);
        }
     
        /* ─── CIRCLE ANIMATION ───────────────────────────────────── */
        .njn-card-ripple {
          position: absolute;
          width: 380px;
          height: 380px;
          border-radius: 50%;
          top: 50%;
          left: 175px;
          transform: translate(-50%, -50%) scale(0);
          background: radial-gradient(circle at center,
            rgba(38, 117, 220, 0.07)  0%,
            rgba(59, 130, 246, 0.05) 45%,
            transparent              70%);
          transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
          opacity: 0;
          pointer-events: none;
          z-index: 0;
        }
     
        .njn-card:hover .njn-card-ripple {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
     
        /* ─── IMAGE PANEL ─────────────────────────────────────────── */
        .njn-img-panel {
          width: 185px;
          min-width: 185px;
          flex-shrink: 0;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 14px;
          background: linear-gradient(145deg, #f0f4ff 0%, #fff0f0 100%);
          border-right: 0.5px solid rgba(185,28,28,0.10);
          cursor: pointer;
        }
     
        .njn-img-panel img {
          width: 100%;
          height: 100%;
          max-width: 100%;
          max-height: 220px;
          object-fit: contain;
          object-position: center;
          display: block;
          transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
        }
     
        .njn-card:hover .njn-img-panel img {
          transform: scale(1.06);
        }
     
        /* Image placeholder when src fails */
        .njn-img-placeholder {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
        }
     
        .njn-img-placeholder svg {
          width: 40px;
          height: 40px;
          opacity: 0.25;
        }
     
        /* Subtle shine over image */
        .njn-img-shine {
          position: absolute;
          inset: 0;
          background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, transparent 60%);
          pointer-events: none;
          z-index: 2;
        }
     
        /* ─── BODY ───────────────────────────────────────────────── */
        .njn-body {
          flex: 1;
          padding: 22px 24px 20px;
          display: flex;
          flex-direction: column;
          gap: 9px;
          position: relative;
          z-index: 1;
          cursor: pointer;
        }
     
        /* ─── CHIP ───────────────────────────────────────────────── */
        .njn-chip {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          width: fit-content;
          font-size: 10.5px;
          font-weight: 600;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--njn-red-600);
          background: #fff;
          border: 0.5px solid rgba(10, 70, 138, 0.808);
          border-radius: var(--njn-radius-sm);
          padding: 4px 10px 4px 8px;
          transition: background 0.2s, border-color 0.2s;
        }
     
        .njn-chip-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #3b82f6;
          flex-shrink: 0;
        }
     
        .njn-card:hover .njn-chip {
          background: #bbbbbb79;
          color: #fff;
          border-color: rgba(2, 66, 139, 0.575);
        }
     
        /* ─── TITLE ──────────────────────────────────────────────── */
        .njn-card-title {
          font-family: var(--njn-font-display);
          font-size: 23px;
          text-align: left;
          font-weight: 700;
          color: var(--njn-gray-900);
          line-height: 1.3;
          transition: color 0.2s;
        }
     
        .njn-card:hover .njn-card-title {
          color: var(--njn-red-800);
        }
     
        /* ─── DESC ───────────────────────────────────────────────── */
        .njn-card-desc {
          text-align: left;
          font-size: 19px;
          color: var(--njn-gray-600);
          line-height: 1.7;
          flex: 1;
        }
     
        /* ─── DIVIDER ─────────────────────────────────────────────── */
        .njn-card-divider {
          height: 0.5px;
          background: linear-gradient(90deg, rgba(29, 78, 216, 0.12), rgba(185, 28, 28, 0.10), transparent);
          margin-top: 4px;
        }
     
        /* ─── FOOTER ─────────────────────────────────────────────── */
        .njn-card-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 10px;
        }
     
        /* ─── ARROW BADGE ─────────────────────────────────────────── */
        .njn-arrow-badge {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border: 0.5px solid rgba(185, 28, 28, 0.18);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--njn-red-600);
          background: var(--njn-red-50);
          transition: background 0.25s, border-color 0.25s, transform 0.25s;
        }
     
        .njn-card:hover .njn-arrow-badge {
          background: var(--njn-red-100);
          border-color: rgba(185, 28, 28, 0.35);
          transform: rotate(45deg);
        }
     
        .njn-arrow-badge i {
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
     
        /* ─── STAGGER ANIMATION ──────────────────────────────────── */
        .njn-card {
          opacity: 0;
          transform: translateY(18px);
          animation: njnFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
     
        .njn-card:nth-child(1) { animation-delay: 0.05s; }
        .njn-card:nth-child(2) { animation-delay: 0.15s; }
        .njn-card:nth-child(3) { animation-delay: 0.25s; }
        .njn-card:nth-child(4) { animation-delay: 0.35s; }
     
        @keyframes njnFadeUp {
          to { opacity: 1; transform: translateY(0); }
        }

        /* ==========================================================
           PERFECT RESPONSIVE UI UPDATE (768px and down)
        ========================================================== */
        @media (max-width: 768px) {
          /* 1. Turn card layout into a full column vertical system */
          .njn-card {
            flex-direction: column;
            align-items: stretch;
          }

          /* 2. Full-width image space + completely REMOVE background gradients */
          .njn-img-panel {
            width: 100% !important;
            min-width: 100% !important;
            height: 200px;
            padding: 24px;
            background: transparent !important; /* No background color on mobile */
            border-right: none;
            border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
          }

          .njn-img-panel img {
            max-height: 100% !important;
          }

          /* 3. Handle structure padding inside mobile box */
          .njn-body {
            padding: 20px 16px;
            gap: 12px;
          }

          /* Adjust font scale properties so they fit elegantly */
          .njn-card-title {
            font-size: 19px;
            text-align: center;
          }

          .njn-card-desc {
            font-size: 14px;
            line-height: 1.6;
          }

          /* Hide desktop linear divider line to optimize block heights */
          .njn-card-divider {
            display: none;
          }

          /* 4. Footer flex parameters to keep Chip Left, Arrow Right */
          .njn-card-footer {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding-top: 12px;
            width: 100%;
          }
        }

        @media (max-width: 480px) {
          .njn-grid {
            max-width: 95%;
          }
          .njn-img-panel {
            height: 170px;
          }
        }

        /* ─── POPUP OVERLAY STYLES ───────────────────────────────── */
        .njn-popup {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px;
          background: rgba(10,10,10,0.45);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          opacity: 0;
          visibility: hidden;
          transition: 0.35s ease;
          z-index: 99999;
        }
        .njn-popup.njn-popup-show {
          opacity: 1;
          visibility: visible;
          display: flex;
        }
        .njn-popup-box {
          position: relative;
          width: min(1100px,95vw);
          height: min(90vh,900px);
          border-radius: 28px;
          overflow: hidden;
          background: rgba(255,255,255,0.08);
          border: 1px solid rgba(255,255,255,0.16);
          box-shadow: 0 10px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .njn-popup-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 40px;
        }
        .njn-popup-close {
          position: absolute;
          top: 18px;
          right: 18px;
          width: 48px;
          height: 48px;
          border: none;
          outline: none;
          border-radius: 50%;
          background: rgba(255,255,255,0.12);
          border: 1px solid rgba(255,255,255,0.18);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: 0.25s ease;
          backdrop-filter: blur(10px);
        }
        .njn-popup-close:hover {
          transform: rotate(90deg) scale(1.08);
          background: rgba(255,255,255,0.18);
        }
        .njn-popup-close svg {
          width: 22px;
          height: 22px;
        }
        @media(max-width:768px){
          .njn-popup { padding:14px; }
          .njn-popup-box { border-radius:20px; }
          .njn-popup-img { padding:20px; }
        }






        /* ========================================================================================================================== */







.njnos-services-section {
            width: 100%;
            max-width: 1400px;
            margin: auto;
            padding: 100px 24px;
            display: flex;
            flex-direction: column;
            gap: 70px;
            box-sizing: border-box;
        }

        /* =========================================
           TOP HEADER
        ========================================= */
        .njnos-services-top {
            text-align: center;
            max-width: 950px;
            margin: auto;
        }

        .njnos-services-tag {
            display: inline-flex;
            padding: 8px 18px;
            border-radius: 999px;
            background: #f3f4f6;
            color: rgb(15, 78, 150);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }

        .njnos-services-title {
            font-size: 58px;
            line-height: 1.1;
            font-weight: 700;
            color: #fff;
            margin-bottom: 24px;
        }

        .njnos-services-desc {
            font-size: 18px;
            line-height: 1.9;
            color: #e2e2e2;
            margin: 0;
        }

        /* =========================================
           SERVICES LIST & GRID ARCHITECTURE
        ========================================= */
        .njnos-services-list {
            display: flex;
            flex-direction: column;
        }

        .njnos-service-item {
            display: grid;
            /* Large screens: Count (120px) | Content (Flexible) | Icon Container (90px) */
            grid-template-columns: 120px 1fr 90px;
            gap: 30px;
            align-items: start;
            padding: 42px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            transition: 0.35s ease;
        }

        .njnos-service-item:first-child {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .njnos-service-item:hover {
            padding-left: 14px;
        }

        /* Large screens: Breaks out of its own wrapper container box so it falls into the parent grid layout cleanly */
        .njnos-service-header-wrapper {
            display: contents;
        }

        /* =========================================
           ELEMENT STYLING
        ========================================= */
        .njnos-service-count {
            font-size: 72px;
            font-weight: 700;
            line-height: 1;
            color: #cfe9ff;
        }

        .njnos-service-content {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .njnos-service-title {
            font-size: 30px;
            line-height: 1.2;
            font-weight: 700;
            color: #fdfdfd;
            margin: 0;
        }

        /* Bullet Points Formatting */
        .njnos-service-bullets {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .njnos-service-bullets li {
            font-size: 18px;
            line-height: 1.6;
            color: #d8d8d8;
            position: relative;
            padding-left: 24px;
        }

        /* Custom clean bullet indicator */
        .njnos-service-bullets li::before {
            content: "◦";
            position: absolute;
            left: 0;
            top: 0;
            color: #1c8dcf;
            font-weight: bold;
            font-size: 20px;
            line-height: 1;
        }

        .njnos-service-icon-box {
            display: flex;
            justify-content: flex-end;
        }

        .njnos-service-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #feffff;
            background: #1c8dcf83;
            transition: 0.35s ease;
        }

        .njnos-service-item:hover .njnos-service-icon {
            transform: scale(1.08) rotate(-6deg);
            background: linear-gradient(135deg, rgba(38, 138, 220, 0.18), rgba(59, 146, 246, 0.12));
            color: #ffff;
        }

        /* =========================================
           CHIPS BLOCK
        ========================================= */
        .njnos-services-chips {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px;
        }

        .njnos-chip {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 18px 20px;
            border-radius: 18px;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: 0.35s ease;
            cursor: pointer;
            box-sizing: border-box;
        }

        .njnos-chip::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(220, 38, 38, 0.22), transparent 70%);
            opacity: 0;
            transition: 0.4s ease;
        }

        .njnos-chip:hover {
            transform: translateY(-5px);
            border-color: rgba(220, 38, 38, 0.20);
            box-shadow: 0 12px 30px rgba(220, 38, 38, 0.12), 0 0 25px rgba(220, 38, 38, 0.14);
        }

        .njnos-chip:hover::before {
            opacity: 1;
        }

        .njnos-chip i {
            position: relative;
            z-index: 2;
            font-size: 18px;
            color: #003f92;
            transition: 0.3s ease;
        }

        .njnos-chip:hover i {
            transform: scale(1.15);
        }

        .njnos-chip span {
            position: relative;
            z-index: 2;
            font-size: 15px;
            font-weight: 600;
            color: #111827;
            text-align: center;
        }

        /* =========================================
           RESPONSIVE MEDIA QUERIES
        ========================================= */
        @media(max-width: 1100px) {
            .njnos-services-title {
                font-size: 46px;
            }
            .njnos-service-item {
                grid-template-columns: 100px 1fr;
            }
            .njnos-service-icon-box {
                grid-column: 2;
                justify-content: flex-start;
                margin-top: 10px;
            }
        }

        @media(max-width: 768px) {
            .njnos-services-section {
                padding: 70px 20px;
            }

            .njnos-services-title {
                font-size: 38px;
            }

            /* 1. Item turns into vertical flex column container stack */
            .njnos-service-item {
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding: 30px 0;
            }

            /* 2. Top row forces Count to left, Icon to right */
            .njnos-service-header-wrapper {
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }

            .njnos-service-count {
                font-size: 54px;
            }

            .njnos-service-icon-box {
                margin-top: 0;
                justify-content: flex-end;
            }

            .njnos-service-icon {
               display: none;
            }

            /* 3. Title sits neatly below header wrapper */
            .njnos-service-content {
                width: 100%;
                gap: 16px;
            }

            .njnos-service-title {
                font-size: 24px;
                text-align: left;
            }
            
            /* 4. Description/Bullets lists render cleanly at bottom base */
            .njnos-service-bullets li {
                font-size: 16px;
                text-align: left;
            }
        }

        @media(max-width: 540px) {
            .njnos-services-title {
                font-size: 30px;
            }

            .njnos-services-desc {
                font-size: 16px;
            }

            .njnos-services-chips {
                grid-template-columns: 1fr 1fr;
            }

            .njnos-chip {
                flex-direction: column;
                gap: 10px;
                min-height: 120px;
                padding: 18px 14px;
            }

            .njnos-chip span {
                font-size: 13px;
                line-height: 1.4;
            }
        }







        /* ========================================================================================================================== */
















        /* =========================================================
   JNCU CUSTOMERS SECTION
========================================================= */

.jncu-customers-section{
    position: relative;
    width: 100%;
    padding: 70px 5%;
    background: #05050500;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
}

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

.jncu-customers-header{
    text-align: center;
    max-width: 850px;
    margin: 0 auto 35px;
}

.jncu-customers-tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 16px;

    border: 1px solid rgba(255,255,255,0.12);

    background: rgba(255,255,255,0.04);

    color: #ffffff;

    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 18px;
}

.jncu-customers-header h2{
    color: #ffffff;

    font-size: clamp(2rem, 5vw, 4rem);

    line-height: 1.1;

    margin-bottom: 14px;

    font-weight: 700;
}

.jncu-customers-header h2 span{
    color: #3b82f6;
}

.jncu-customers-header p{
    color: rgba(255, 255, 255, 0.884);

    font-size: 20px;

    line-height: 1.7;
}

/* =========================================================
   GRID
========================================================= */
.jncu-customers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
padding: 15px;
    gap: 10px ;
background-color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
}

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

.jncu-customer-card{
    position: relative;

    height: 90px;

    background: #9c151500;

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

    overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);

    transition:
        background 0.45s ease,
        transform 0.45s ease;
}

/* subtle hover overlay */
.jncu-customer-card::before{
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            transparent 65%
        );

    opacity: 0;

    transition: opacity 0.45s ease;
}

/* =========================================================
   IMAGE
========================================================= */

.jncu-customer-card img{
    width: 72%;
    height: 55%;

    object-fit: contain;



    opacity: 0.72;

    transition:
        filter 0.45s ease,
        transform 0.45s ease,
        opacity 0.45s ease;
}

/* =========================================================
   ACTIVE + HOVER
========================================================= */

.jncu-customer-card:hover,
.jncu-customer-card.jncu-active{
    background: rgba(192, 192, 192, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.jncu-customer-card:hover::before,
.jncu-customer-card.jncu-active::before{
    opacity: 1;
}

.jncu-customer-card:hover img,
.jncu-customer-card.jncu-active img{
    filter: grayscale(0%) brightness(1);

    opacity: 1;

    transform: scale(1.05);
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px){

    .jncu-customers-grid{
        grid-template-columns: repeat(4, 1fr);
    }

    .jncu-customer-card{
        height: 100px;
    }
}

/* =========================================================
   DESKTOP
========================================================= */

@media (max-width: 1200px){

    .jncu-customers-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

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

@media (max-width: 992px){

    .jncu-customers-section{
        padding: 60px 4%;
    }

    .jncu-customers-grid{
        grid-template-columns: repeat(5, 1fr);
    }

    .jncu-customer-card{
        height: 82px;
    }

    .jncu-customer-card img{
        width: 74%;
        height: 52%;
    }
}

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

@media (max-width: 768px){

    .jncu-customers-header{
        margin-bottom: 28px;
    }

    .jncu-customers-header p{
        font-size: 14px;
    }

    .jncu-customers-grid{
        grid-template-columns: repeat(4, 1fr);
    }

    .jncu-customer-card{
        height: 72px;
    }

    .jncu-customer-card img{
        width: 76%;
        height: 50%;
    }
}

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

@media (max-width: 480px){

    .jncu-customers-section{
        padding: 50px 15px;
    }

    .jncu-customers-grid{
        grid-template-columns: repeat(4, 1fr);
    }

    .jncu-customer-card{
        height: 68px;
    }

    .jncu-customer-card img{
        width: 78%;
        height: 48%;
    }

    .jncu-customers-header h2{
        font-size: 32px;
    }
}
















/* ==================================================================================================================== */





















/* =========================================================
   COMPLETE PREMIUM DARK GLASS CONTACT THEME
   CLEANED + DUPLICATES REMOVED
========================================================= */

:root{

  /* BACKGROUNDS */
  --bg-deep:#0A0C10;
  --bg-card:#11161F;
  --bg-elevated:#171E2A;

  /* BORDERS */
  --border-dark:rgba(255,255,255,0.08);
  --border-light:rgba(255,255,255,0.14);

  /* ACCENTS */
  --accent-blue:#1E6BFF;
  --accent-blue-light:#60A5FA;
  --accent-blue-hover:#3B82F6;

  --accent-red:#E3363E;
  --accent-red-hover:#FF4D55;

  /* TEXT COLORS */
  --txt-white:#ffffff;
  --txt-soft:#e7e7e7;
  --txt-light:#CBD5E1;
  --txt-gray:#c8cbce;
  --txt-dim:#d3d3d3;

  /* EFFECTS */
  --blue-glow:rgba(59,130,246,0.18);
  --red-glow:rgba(227,54,62,0.12);

  --shadow-dark:
    0 15px 40px rgba(0,0,0,0.45);

  --radius-md:14px;
  --radius-lg:30px;
}

/* =========================================================
   GLOBAL
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:
    radial-gradient(circle at top left,#111827 0%,#05070b 50%),
    var(--bg-deep);

  color:var(--txt-light);

  font-family:'Poppins',sans-serif;

  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
  transition:0.25s ease;
}

img{
  max-width:100%;
  display:block;
}

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

.jncon-hero-dark{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      ellipse 80% 50% at 50% 40%,
      #10161f,
      #080b0f
    );

  border-bottom:1px solid rgba(59,130,246,0.2);
}

.jncon-hero-dark::before{
  content:'';
  position:absolute;

  width:700px;
  height:700px;

  top:-300px;
  left:-250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,0.14),
      transparent 70%
    );

  filter:blur(20px);
}

.jncon-hero-dark::after{
  content:'';
  position:absolute;

  width:600px;
  height:600px;

  bottom:-250px;
  right:-200px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(227,54,62,0.08),
      transparent 70%
    );

  filter:blur(20px);
}

/* =========================================================
   NAVBAR
========================================================= */

.jncon-navbar{
  max-width:1400px;
  margin:auto;

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

  padding:1.5rem 2rem;

  position:relative;
  z-index:5;
}

.jncon-logo{
  font-size:1.7rem;
  font-weight:800;

  background:
    linear-gradient(
      135deg,
      #fff 10%,
      var(--accent-blue-light) 100%
    );

  -webkit-background-clip:text;
  color:transparent;
}

.jncon-logo span{
  background:
    linear-gradient(
      135deg,
      var(--accent-red),
      #ff8a8a
    );

  -webkit-background-clip:text;
  color:transparent;
}

.jncon-nav-links{
  display:flex;
  gap:2rem;
}

.jncon-nav-links a{
  color:var(--txt-gray);

  font-size:0.9rem;
  font-weight:500;
}

.jncon-nav-links a:hover,
.jncon-nav-links a.jncon-active{
  color:var(--accent-blue-light);
}

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

.jncon-hero-content-center{
  position:relative;
  z-index:2;

  text-align:center;

  padding:5rem 2rem 6rem;
}

.jncon-hero-badge{
  display:inline-flex;
  align-items:center;

  padding:0.45rem 1rem;

  border-radius:999px;

  background:rgba(59,130,246,0.12);

  border:1px solid rgba(59,130,246,0.25);

  color:var(--accent-blue-light);

  font-size:0.75rem;
  font-weight:600;

  margin-bottom:1.5rem;

  backdrop-filter:blur(10px);
}

.jncon-hero-content-center h1{
  font-size:clamp(2.5rem,6vw,4.5rem);
  line-height:1.1;
  font-weight:800;

  background:
    linear-gradient(
      to right,
      #fff,
      var(--accent-blue-light),
      #fff
    );

  -webkit-background-clip:text;
  color:transparent;

  margin-bottom:1rem;
}

.jncon-hero-line{
  width:90px;
  height:4px;

  margin:auto;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--accent-blue),
      var(--accent-red)
    );
}

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

.jncon-contact-main{
  padding:5rem 0;
}

.jncon-container{
  width:100%;
  padding:0 2rem;
}

.jncon-contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:2.5rem;
}

/* =========================================================
   GLASS CARD
========================================================= */

.jncon-info-card,
.jncon-form-wrapper{

  position:relative;
  overflow:hidden;
  isolation:isolate;

  padding:2rem;

  border-radius:var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.04)
    );

  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);

  border:1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 1px rgba(255,255,255,0.03),
    var(--shadow-dark);

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

  color:var(--txt-light);

  text-shadow:0 1px 1px rgba(0,0,0,0.2);
}

.jncon-info-card::before,
.jncon-form-wrapper::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.04),
      transparent 65%
    );

  pointer-events:none;
}

.jncon-info-card::after,
.jncon-form-wrapper::after{
  content:'';

  position:absolute;

  width:320px;
  height:320px;

  top:-140px;
  right:-120px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,0.18),
      rgba(147,51,234,0.08),
      transparent 72%
    );

  filter:blur(12px);

  transition:0.5s ease;

  pointer-events:none;
}

.jncon-info-card:hover,
.jncon-form-wrapper:hover{
  transform:translateY(-8px);

  border-color:rgba(96,165,250,0.28);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.12),
    inset 0 -1px 1px rgba(255,255,255,0.04),
    0 22px 55px rgba(37,99,235,0.18),
    0 15px 40px rgba(0,0,0,0.55);
}

.jncon-info-card:hover::after,
.jncon-form-wrapper:hover::after{
  transform:scale(1.2);
}

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

.jncon-section-tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  margin-bottom:1rem;

  color:var(--accent-blue-light);

  font-size:15px;
  font-weight:700;

  letter-spacing:2px;
  text-transform:uppercase;
}

/* =========================================================
   TITLES
========================================================= */

.jncon-info-card h2{
  font-size:2rem;
  line-height:1.2;
  margin-bottom:1rem;

  color:var(--txt-white);
}

.jncon-info-card h2 span{
  color:var(--accent-blue-light);
}

.jncon-info-desc{
  color:var(--txt-gray);

  line-height:1.8;
  margin-bottom:2rem;

  font-size:18px;
}

/* =========================================================
   CONTACT DETAILS
========================================================= */

.jncon-contact-details{
  display:flex;
  flex-direction:column;
  gap:1rem;

  margin-top:2rem;
}

.jncon-detail-item{
  display:flex;
  align-items:center;
  gap:1rem;

  padding:1rem 1.2rem;

  border-radius:18px;

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.08);

  transition:0.3s ease;
}

.jncon-detail-item:hover{
  transform:translateX(6px);

  border-color:rgba(96,165,250,0.22);

  background:rgba(255,255,255,0.08);
}

.jncon-detail-icon{
  width:48px;
  height:48px;

  border-radius:14px;

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

background:rgba(143, 143, 143, 0.12);
  color:#ffffff;



  font-size:1.2rem;
}

.jncon-red-icon{
  background:rgba(143, 143, 143, 0.12);
  color:#ffffff;
}

.jncon-detail-text strong{
  display:block;
  text-align: left;
  color:var(--txt-soft);

  margin-bottom:4px;

  font-size:.82rem;
}

.jncon-detail-text span{
  color:var(--txt-gray);
text-align: left !important;
  font-size:.82rem;
}



.jncon-detail-text a {
    display: block;
    text-align: left;
    color: var(--txt-gray);
    font-size: .82rem;
}

.jncon-detail-text a:hover{
  color:var(--accent-blue-light);
}




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

.jncon-social-links{
  display:flex;
  align-items:center;
  gap:12px;

  margin-top:2rem;
}

.jncon-social-links span{
  color:var(--txt-soft);

  font-size:.85rem;
  font-weight:500;
}

.jncon-social-icon{
  width:40px;
  height:40px;

  border-radius:50%;

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

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.08);

  color:var(--txt-gray);

  transition:0.3s ease;
}

.jncon-social-icon:hover{
  transform:translateY(-4px);

  background:rgba(59,130,246,0.18);

  border-color:rgba(96,165,250,0.3);

  color:#fff;
}

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

.jncon-form-header{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:2rem;
}

.jncon-badge-icon{
  width:52px;
  height:52px;

  border-radius:16px;

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

  background:rgba(59,130,246,0.12);

  color:var(--accent-blue-light);

  font-size:1.3rem;
}

.jncon-form-header h3{
  color:var(--txt-white);

  font-size:1.5rem;
}

.jncon-input-group{
  margin-bottom:1.2rem;
}

.jncon-input-group label{
  display:block;
text-align: left;
  margin-bottom:6px;

  color:var(--txt-gray);

  font-size:.74rem;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:1px;
}

.jncon-req{
  color:var(--accent-red);
}

.jncon-input-icon{
  position:relative;
}

.jncon-input-icon i{
  position:absolute;

  left:14px;
  top:50%;

  transform:translateY(-50%);

  color:var(--txt-dim);
}

.jncon-input-icon input,
.jncon-input-icon textarea,
.jncon-input-icon select{

  width:100%;

  border-radius:14px;

  padding:14px 14px 14px 42px;

  border:1.5px solid rgba(255,255,255,0.12);

  background:rgba(255,255,255,0.08);

  color:var(--txt-white);

  font-size:.9rem;
  font-weight:500;

  transition:0.25s ease;
}

.jncon-input-icon textarea{
  resize:vertical;
  min-height:120px;
}

.jncon-input-icon input::placeholder,
.jncon-input-icon textarea::placeholder{
  color:var(--txt-dim);
}

.jncon-input-icon input:focus,
.jncon-input-icon textarea:focus,
.jncon-input-icon select:focus{
  outline:none;

  border-color:rgba(96,165,250,0.45);

  box-shadow:
    0 0 0 4px rgba(59,130,246,0.12);
}

/* =========================================================
   BUTTON
========================================================= */

.jncon-btn-submit{
  border:none;

  padding:14px 30px;

  border-radius:999px;

  background:
    linear-gradient(
      95deg,
      var(--accent-blue),
      #1349C7
    );

  color:#fff;

  font-size:.9rem;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;

  box-shadow:
    0 10px 20px rgba(30,107,255,0.25);
}

.jncon-btn-submit:hover{
  transform:translateY(-3px);

  background:
    linear-gradient(
      95deg,
      var(--accent-blue-hover),
      #2563EB
    );

  box-shadow:
    0 18px 30px rgba(30,107,255,0.35);
}

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

.jncon-map-section{
  position:relative;

  height:420px;
width: 100%;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);

  overflow:hidden;
}

.jncon-map-section iframe{
  width:100%;
  height:100%;
  border:none;
}

.jncon-map-card{
  position:absolute;

  left:30px;
  bottom:30px;

  padding:1rem 1.4rem;

  border-radius:18px;

  background:rgba(10,12,16,0.85);

  border-left:4px solid var(--accent-blue);

  backdrop-filter:blur(10px);

  max-width:260px;
}

.jncon-map-card h5{
  color:var(--txt-white);

  margin-bottom:6px;
}

.jncon-map-card p{
  color:var(--txt-gray);

  font-size:.78rem;
}

/* =========================================================
   FOOTER
========================================================= */

.jncon-footer-dark{
  padding:3rem 0 1.5rem;

  border-top:1px solid rgba(255,255,255,0.08);
}

.jncon-footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:2rem;

  margin-bottom:2.5rem;
}

.jncon-footer-col h5{
  color:var(--accent-blue-light);

  font-size:.8rem;
  font-weight:700;

  letter-spacing:1px;

  margin-bottom:1.2rem;
}

.jncon-footer-links{
  list-style:none;
}

.jncon-footer-links li{
  margin-bottom:.8rem;
}

.jncon-footer-links a{
  color:var(--txt-gray);

  font-size:.85rem;
  font-weight:500;

  transition:0.25s ease;
}

.jncon-footer-links a:hover{
  color:var(--accent-blue-light);

  transform:translateX(4px);
}

.jncon-footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);

  padding-top:1.5rem;

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;

  color:var(--txt-dim);

  font-size:.8rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:980px){

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

  .jncon-footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:680px){

  .jncon-navbar{
    padding:1rem 1.2rem;
  }

  .jncon-nav-links{
    display:none;
  }

  .jncon-contact-main{
    padding:4rem 0;
  }

  .jncon-container{
    padding:0 1rem;
  }

  .jncon-footer-grid{
    grid-template-columns:1fr;
  }

  .jncon-map-card{
    left:16px;
    right:16px;
    bottom:16px;

    max-width:unset;
  }

  .jncon-hero-content-center{
    padding:4rem 1rem 5rem;
  }

  .jncon-info-card,
  .jncon-form-wrapper{
    padding:1.5rem;
  }
}





/* ========================================================================================================================== */













/* =========================================================
   ROOT VARIABLES
========================================================= */
:root {
    --bg-color: #0f1c2c;         /* Dark blue background */
    --card-bg: rgba(15,28,44,0.85);
    --card-hover-bg: rgba(24,40,65,0.95);
    --text-color: #e0e7ff;       /* Light text */
    --subtext-color: #ffffff;    /* Secondary text */
    --accent-color: #3b82f6;     /* Bright blue accent */
    --highlight-color: #1e3a8a;  /* Highlighted content */
    --border-color: rgba(255,255,255,0.12);
    --hover-border-color: rgba(59,130,246,0.5);
    --dot-inactive: rgba(255,255,255,0.18);
    --dot-active-gradient: linear-gradient(90deg, #3b82f6, #60a5fa);
    --shadow-color: rgba(0,0,0,0.5);
}

/* =========================================
   ABOUT SECTION
========================================= */
.renjna-about-section{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:100px 24px;
    display:flex;
    flex-direction:column;
    gap:80px;
    background-color: transparent;
}

/* =========================================
   TOP CONTAINER
========================================= */
.renjna-about-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/* =========================================
   IMAGE
========================================= */
.renjna-about-image-wrap{
    width:100%;
    border-radius:30px;
    overflow:hidden;
    position:relative;
}

.renjna-about-image{
    width:100%;
    height:100%;
    min-height:500px;
    object-fit:cover;
    display:block;
}

/* =========================================
   CONTENT
========================================= */
.renjna-about-content{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.renjna-about-tag{
    width:fit-content;
    padding:8px 16px;
    border-radius:999px;
    background: var(--highlight-color);
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    color: var(--text-color);
}

.renjna-about-title{
    font-size:54px;
    line-height:1.1;
    font-weight:700;
    color: var(--text-color);
}

.renjna-about-title span{
    color: var(--accent-color);
}

.renjna-about-desc{
    font-size:17px;
    line-height:1.9;
    color: var(--subtext-color);
}

.renjna-about-highlight{
    padding:24px;
    border-left:4px solid var(--accent-color);
    background:linear-gradient(90deg, rgba(59,130,246,0.06), transparent);
    font-size:17px;
    line-height:1.8;
    color: var(--text-color);
    font-weight:500;
    border-radius:0 18px 18px 0;
}

/* =========================================
   BOTTOM CONTAINER
========================================= */
.renjna-about-bottom{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:60px;
    align-items:start;
}

/* =========================================
   LEFT CARDS
========================================= */
.renjna-about-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.renjna-about-card{
    position:relative;
    display:flex;
    gap:18px;
    padding:28px;
    border-radius:28px;
    overflow:hidden;
    background: var(--card-bg);
    border:1px solid var(--border-color);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow: 0 10px 30px var(--shadow-color), inset 0 1px 0 var(--border-color);
    transition:0.4s ease;
}

.renjna-about-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(140deg, rgba(255,255,255,0.08), transparent 45%);
    pointer-events:none;
}

.renjna-about-card:hover{
    transform:translateY(-8px);
    border-color: var(--hover-border-color);
    box-shadow: 0 20px 50px var(--shadow-color), 0 8px 30px rgba(59,130,246,0.08);
}

.renjna-about-icon{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(99,179,255,0.10));
    border:1px solid var(--border-color);
    backdrop-filter:blur(10px);
    color: #fff;
    font-size:26px;
    transition:0.35s ease;
}

.renjna-about-card:hover .renjna-about-icon{
    transform:scale(1.08) rotate(-4deg);
    background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(99,179,255,0.16));
}

.renjna-about-card-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
    text-align: left;
    color: var(--text-color);
}

.renjna-about-card-desc{
    font-size:15px;
    line-height:1.8;
    text-align: left;
    color: var(--subtext-color);
}

/* =========================================
   RIGHT STATS
========================================= */
.renjna-about-stats{
    margin: auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
}

.renjna-about-stat-box{
    padding:10px 0;
}

.renjna-about-stat-box h3{
    font-size:64px;
    line-height:1;
    color: var(--accent-color);
    margin-bottom:14px;
    font-weight:700;
    text-align: center;
}

.renjna-about-stat-box p{
    font-size:16px;
    line-height:1.7;
    color: var(--subtext-color);
    text-align: center;
}

/* =========================================
   DOTS
========================================= */
.njnh-dot{
  background: var(--dot-inactive);
}

.njnh-dot.active{
  background: var(--dot-active-gradient);
}

/* =========================================
   SLIDER CARD OVERLAY
========================================= */
.njnh-slider-card::before{
    background: linear-gradient(180deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.52) 45%, rgba(0,0,0,0.58) 100%);
}

/* =========================================
   TEXT
========================================= */
.njnh-slide-title,
.njnh-slide-points,
.renjna-about-desc,
.renjna-about-title,
.renjna-about-card-title,
.renjna-about-card-desc,
.renjna-about-highlight {
    color: var(--text-color);
}
.njnh-slide-points li::before{
    color: var(--accent-color);
}




























@media(max-width:1100px){

    .renjna-about-top{
        grid-template-columns:1fr;
    }

    .renjna-about-bottom{
        grid-template-columns:1fr;
    }

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

    .renjna-about-section{
        padding:70px 20px;
        gap:60px;
    }

    .renjna-about-title{
        font-size:38px;
    }

    .renjna-about-cards{
        grid-template-columns:1fr;
    }

    /* 2x2 layout */
    .renjna-about-stats{
        grid-template-columns:1fr 1fr;
        gap:20px;
     margin: auto;   
    }

    .renjna-about-image{
        min-height:320px;
    }

}

@media(max-width:540px){

    .renjna-about-title{
        font-size:32px;
    }

    /* KEEP 2x2 even on small screens */
    .renjna-about-stats{
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .renjna-about-card{
        padding:22px;
    }

    .renjna-about-stat-box h3{
        font-size:42px;
    }

}












/* =========================================
   GLASSMORPHISM CARDS
========================================= */

.renjna-about-card{
    position:relative;

    display:flex;
    gap:18px;

    padding:28px;

    border-radius:28px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.06)
    );

    border:1px solid rgba(255,255,255,0.18);

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

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.18);

    transition:0.4s ease;
}

/* GLASS SHINE */

.renjna-about-card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        140deg,
        rgba(255,255,255,0.18),
        transparent 45%
    );

    pointer-events:none;
}

/* HOVER */

.renjna-about-card:hover{
    transform:translateY(-8px);

    border-color:rgba(220,38,38,0.20);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.08),
    0 8px 30px rgba(220,38,38,0.08);
}

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







/* =========================================
   TEXT TRANSITION
========================================= */

.njnh-slide-title,
.njnh-slide-points{
  transition:0.35s ease;
}

/* =========================================
   DOTS
========================================= */

.njnh-dots-wrap{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  margin-top:24px;
}

.njnh-dot{
  width:12px;
  height:12px;

  border:none;
  border-radius:50%;

  cursor:pointer;

  background:rgba(0,0,0,0.18);

  transition:0.3s ease;
}

.njnh-dot:hover{
  transform:scale(1.15);
}

.njnh-dot.active{
  width:34px;

  border-radius:999px;

  background:linear-gradient(
    90deg,
    #ff00d4,
    #8f00ff
  );
}

/* MOBILE */

@media(max-width:768px){

  .njnh-dots-wrap{
    margin-top:18px;
    gap:10px;
  }

  .njnh-dot{
    width:10px;
    height:10px;
  }

  .njnh-dot.active{
    width:28px;
  }

}





















/* =========================================================
   SLIDER CARD
========================================================= */

.njnh-slider-card {
    width: 100%;
    height: 720px;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 60px;
    isolation: isolate;
    background-image: url('/IMAGES/kiosk.png');
    
    /* CHANGER LINES HERE: */
    background-size: contain;       /* Scales down smoothly without cropping */
    background-position: right center; /* Pushes the hardware image to the right */
    background-repeat: no-repeat;   /* Prevents tiling */
    
    transition: background-image 0.6s ease, transform 0.4s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* =========================================
   OVERLAY
========================================= */

.njnh-slider-card::before{
    content:"";

    position:absolute;
    inset:0;


    z-index:0;
}

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

.njnh-slide-content{
    width:48%;
    position:relative;
    z-index:2;

    animation:njnhFadeUp 0.7s ease;
}

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

.njnh-slide-title{
    font-size:40px;
    line-height:1.05;



    margin-bottom:30px;

    font-family:Georgia, serif;
    font-style:italic;
    font-weight:700;

       text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.233);
}

/* =========================================
   BULLETS
========================================= */

.njnh-slide-points{
    list-style:none;
    padding:0;
    margin:0 0 42px;
}

.njnh-slide-points li{
    position:relative;

    padding-left:24px;

    margin-bottom:18px;

    font-size:20px;
    line-height:1.5;



    font-family:Georgia, serif;
    font-style:italic;
    font-weight:600;

    text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.164);
}

.njnh-slide-points li::before{
    content:"•";

    position:absolute;
    left:0;
    top:0;

    color:#ff7a00;

    font-size:22px;
}

/* =========================================
   CONTENT ANIMATION
========================================= */

@keyframes njnhFadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================================================
   LARGE SCREEN
========================================================= */

@media(max-width:1200px){

    .njnh-slider-card{
        height:650px;
        padding:50px;
    }

    .njnh-slide-content{
        width:56%;
    }

    .njnh-slide-title{
        font-size:30px;
    }

}

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

@media(max-width:992px){

    .njnh-slider-card{
        height:620px;

        padding:42px;

        border-radius:22px;

        background-position:center;
    }

    .njnh-slider-card::before{
        background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.48) 0%,
            rgba(0,0,0,0.52) 45%,
            rgba(0,0,0,0.58) 100%
        );
    }

    .njnh-slide-content{
        width:100%;
        max-width:700px;
    }

    njnh-slide-title {
        font-size: 40px;       /* Scale down from 58px desktop size */
        margin-bottom: 20px;
    }

    .njnh-slide-points li {
        font-size: 17px;       /* Scale down from 20px desktop size */
        margin-bottom: 12px;
    }

}

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

@media(max-width:768px){

    .njnh-hero-wrapper{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .njnh-slider-card{
        width:100%;
    }

    .njnh-prev-btn,
    .njnh-next-btn{
        position:static;
    }

    .njnh-controls-wrap{
        width:100%;

        display:flex;
        justify-content:flex-end;

        gap:12px;
    }

    .njnh-hero-wrapper{
        gap:0;
        position:relative;
    }

/* LOCATE this block in your @media(max-width:768px) section and replace it: */
    .njnh-slider-card {
        /* Keep your layout properties intact */
        height: 68vh;
        min-height: 68vh;
        border-radius: 0;
        align-items: flex-end;

        /* CHANGE/ADD THESE LINES ONLY FOR THE IMAGE: */
        background-size: contain;         /* Scales image to correct native aspect ratio height */
        background-position: center 65%;  /* Positions the hardware image perfectly behind content */
        background-repeat: no-repeat;     /* Ensures image doesn't duplicate vertically */
    }

    .njnh-slider-card::before{
        background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.10) 0%,
            rgba(0,0,0,0.38) 35%,
            rgba(0,0,0,0.82) 100%
        );
    }

    .njnh-slide-content{
        width:100%;
    }

    .njnh-slide-title{
        font-size:34px;
        line-height:1.12;
        margin-bottom:22px;
    }

    .njnh-slide-points{
        margin-bottom:28px;
    }

    .njnh-slide-points li{
        font-size:16px;
        margin-bottom:14px;
    }





    /* FLOATING ARROWS */

    .njnh-arrow-btn{
        position:absolute;
        top:50%;
        transform:translateY(-50%);

        z-index:20;

        width:48px;
        height:48px;

        border-radius:50%;

        backdrop-filter:blur(10px);

        background:rgba(255,255,255,0.12);

        font-size:28px;

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

        color:#fff;
    }

    .njnh-prev-btn{
        left:14px;
    }

    .njnh-next-btn{
        right:14px;
    }

    .njnh-top-text,
    .njnh-bottom-text{
        padding: 5px;
    }

}

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

@media(max-width:480px){

    .njnh-slider-card{
        padding:
        110px 20px
        70px;
    }

    .njnh-slide-title{
        font-size:28px;
    }

    .njnh-slide-points li{
        font-size:15px;
        line-height:1.5;
    }

    .njnh-explore-btn{
        width:100%;
        justify-content:center;
    }

}










.certified-title {
  display: flex;
  align-items: center; /* vertically centers image and text */
  gap: 5px;
  text-align: left;
}

.certified-title img {
  height: 40px; /* adjust as needed */
  width: auto;
  display: block;
  padding: 1px;
  border-radius: 5px;
  background-color: #fff;
}









/* ==========================================
   SUCCESS STATE UI - JANNA SYSTEMS
   ========================================== */

.jncon-success-state {
    text-align: center;
    padding: 50px 30px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: jnconFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Success Checkmark Ring */
.jncon-success-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(21, 128, 61, 0.25));
    border: 2px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
    animation: jnconScalePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

/* Typography Hierarchy */
.jncon-success-state h4 {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.jncon-success-state p {
    color: #94a3b8; /* Slate 400 for elegant readability */
    font-size: 0.975rem;
    line-height: 1.6;
    margin-bottom: 32px;
}

.jncon-success-state p br {
    margin-bottom: 4px;
}

/* Premium Reset Action Button */
.jncon-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.jncon-reset-btn i {
    font-size: 1.1rem;
    transition: transform 0.4s ease;
}

/* Interactive States */
.jncon-reset-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.jncon-reset-btn:hover i {
    transform: rotate(-180deg);
}

.jncon-reset-btn:active {
    transform: scale(0.98);
}

/* Performance Optimized Keyframes */
@keyframes jnconFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jnconScalePop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}




























.contact-container{
    width:100%;
    max-width:750px;
}

.glass-form{
    background:rgba(255, 255, 255, 0);
   
    border-radius:20px;
    padding:35px;
    
}

.glass-form h2{
    text-align:center;
    color:#fff;
    margin-bottom:30px;
    font-size:30px;
}

.form-group{
    display:flex;
    align-items:center;
    margin-bottom:18px;
}

.form-group label{
    width:180px;
    text-align: left;
    color:#fff;
    font-weight:600;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:14px 18px;
    border:none;
    outline:none;
    border-radius:12px;
    background:rgba(255,255,255,0.18);
    color:#fff;
    font-size:15px;
    transition:.3s;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:rgba(255,255,255,.8);
}

.form-group input:focus,
.form-group textarea:focus{
    background:rgba(255,255,255,.28);
    box-shadow:0 0 15px rgba(255,255,255,.3);
}

.form-group textarea{
    resize:vertical;
    min-height:130px;
}

.submit-btn{
    text-align:center;
    margin-top:25px;
}

.submit-btn input{
    background:#ffffff;
    color:#0072ff;
    border:none;
    padding:14px 40px;
    border-radius:50px;
    cursor:pointer;
    font-size:16px;
    font-weight:bold;
    transition:.3s;
}

.submit-btn input:hover{
    background:#0072ff;
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.2);
}

/* Tablet */
@media (max-width:768px){

    .glass-form{
        padding:25px;
    }

    .form-group{
        flex-direction:column;
        align-items:flex-start;
    }

    .form-group label{
        width:100%;
        margin-bottom:8px;
    }

    .glass-form h2{
        font-size:26px;
    }

}

/* Mobile */
@media (max-width:480px){

    .glass-form{
        padding:20px;
        border-radius:15px;
    }

    .glass-form h2{
        font-size:22px;
    }

    .form-group input,
    .form-group textarea{
        padding:12px 15px;
        font-size:14px;
    }

    .submit-btn input{
        width:100%;
    }

}






.required-note{
    color:#fff;
    margin-bottom:20px;
    font-size:14px;
    text-align:left;
}

.required{
    color:#ff4d4d;
    font-weight:bold;
}