/* Optional: load Poppins for the brand text. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

/* ===============================
   Base + Scrollbar Hidden (but scroll enabled)
   =============================== */
:root{
    --bg:#0f1113;           /* metallic black */
    --bg-elev:#171a1d;      /* near black */
    --text:#eef1f5;         /* white */
    --muted:#a8b0b9;        /* ash/grey */
    --line:#2a2f35;         /* divider grey */
    --accent:#4cc2ff;       /* subtle blue accent for links */

    /* New Ticker Accent Colors */
    --import-color: #4cc2ff;
    --export-color: #00C9A2;
}

/* Reset & base */
*{box-sizing:border-box}

html, body {
    margin:0;
    padding:0;
    /* ENSURE ALL PAGES USE PRIMARY BACKGROUND COLOR */
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    overflow:auto;
    height:100%;
}

/* Hide scrollbar visuals */
body::-webkit-scrollbar { width:0; background:transparent; }
body { scrollbar-width:none; -ms-overflow-style:none; }

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,summary{touch-action:manipulation}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ========================
   Header & Brand tweaks
   ======================== */
.site-header{
    /* The navigation bar itself */
    position:sticky;
    top:20px;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 18px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    backdrop-filter:saturate(140%) blur(10px);
    border:1px solid var(--line);
    border-radius:22px;
    max-width:1160px;
    margin:14px auto 0;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
    overflow:visible;
}

.brand{
    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
    /* Base positioning reset for animation */
    transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
}

.brand-logo-wrapper{
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    overflow:visible;
    padding:0;
    line-height:1;
}

.brand-logo{
    height:44px;
    width:auto;
    object-fit:contain;
    display:block;
    transform-origin:left center;
    transition:transform .22s ease, filter .22s ease;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

.brand-logo--prominent{
    transform: scale(1.5);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) saturate(115%) contrast(105%);
    will-change: transform;
}

.brand-text{
    font-family:"Poppins","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    font-weight:600;
    font-size:1.18rem;
    letter-spacing:1.2px;
    color:var(--text);
    display:inline-flex;
    align-items:center;
    gap:4px;
    line-height:1;
}

.brand-text span{
    font-weight:700;
    color:var(--accent);
    letter-spacing:1.4px;
}

/* --- HEADER ALIGNMENT (Final Working Desktop Behavior) --- */
@media(min-width: 900px) {
    .site-header {
        /* Standard space-between layout for desktop */
        justify-content: space-between; 
        padding-left: 18px;
        max-width: 1160px;
    }
    
    .brand {
        /* Standard static position, logo is visible here */
        position: static;
        z-index: 55;
        margin: 0;
        padding: 0;
    }
    
    .brand-logo-wrapper {
        /* Logo visible inside header */
        visibility: visible;
        position: static;
        width: auto;
        height: 44px; 
    }
    
    .brand-logo {
        transform: scale(1.5); /* Maintain prominence */
    }
}
 /* ----------------------------------------------------------------- */

/* ===== TABLET & DESKTOP OVERRIDES (applies for >= 641px) =====
   These rules increase header width, enlarge logo, and add spacing
   between the logo and company name ONLY for tablet and desktop.
   They intentionally don't affect mobile (<641px).
   ============================================================= */
@media (min-width: 641px) {
  /* Give header a bit more horizontal room on larger devices */
  .site-header {
    max-width: 1250px;   /* increased from 1160px */
    padding: 10px 28px;  /* slightly more horizontal padding */
  }

  /* Space the logo and text farther apart so they don't feel cramped */
  .brand {
    gap: 40px; /* was 16px on base styles */
  }

  /* Make the logo container slightly taller on tablet/desktop */
  .brand-logo-wrapper {
    height: 40px;        /* increased from 44px */
    align-items: center;
  }

  /* Scale the logo to use the available space (keeps aspect ratio) */
  .brand-logo {
    height: 40px;        /* match wrapper */
    width: auto;
    object-fit: contain;
  }

  /* Slightly larger brand text for better balance with bigger logo */
  .brand-text {
    font-size: 1.30rem;
  }
}

/* Navigation */
.site-nav{display:flex;gap:18px;align-items:center}
.site-nav .nav-link{color:#cfd5db;padding:8px 12px;border-radius:10px;font-size:0.95rem;font-weight:500;transition:background .25s ease,color .25s ease}
.site-nav .nav-link:hover{background:rgba(255,255,255,.08);color:var(--accent)}
.site-nav .nav-link.is-active{background:rgba(255,255,255,.12);color:var(--accent);font-weight:600;box-shadow:0 0 8px rgba(76,194,255,.25)}
@media(min-width:900px){.site-nav{display:flex!important}}

.hamburger{width:44px;height:36px;background:transparent;border:0;cursor:pointer;display:none;place-items:center}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);margin:3px 0;transition:transform .3s ease,opacity .3s ease}

/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 100%;width:min(86vw,360px);background:var(--bg-elev);border-left:1px solid var(--line);transition:transform .35s ease;transform:translateX(100%);z-index:60;display:flex;flex-direction:column}
.sidebar.open{transform:translateX(-100%)}
.sidebar.closed{transform:translateX(100%)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.close-btn{background:transparent;color:var(--text);border:0;font-size:28px;line-height:1;cursor:pointer}
.sidebar-nav{display:flex;flex-direction:column;padding:10px 12px}
.sidebar-nav .nav-link, .sidebar-nav details>summary{padding:12px;border-radius:8px;color:var(--text);cursor:pointer;transition:background .18s ease,color .18s ease}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.04);color:var(--accent)}
.sidebar-nav details{padding:0 6px}
.sidebar-nav .sub-link{display:block;padding:10px 20px;color:var(--muted)}
.sidebar-nav .nav-link.is-active{background:rgba(255,255,255,.08);color:var(--accent);font-weight:600;box-shadow:0 0 8px rgba(76,194,255,.25)}
.sidebar-nav .is-active{color:var(--accent)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:55}
.overlay.show{opacity:1;pointer-events:auto}

/* =========================================
   Sidebar Dropdown Styling
   ========================================= */

.sidebar-nav details > summary {
    /* 1. Hide the native browser arrow */
    list-style: none;
    /* 2. Use Flexbox to position icon to the right */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-nav details > summary::marker,
.sidebar-nav details > summary::-webkit-details-marker {
    /* Ensure native arrow is hidden everywhere */
    display: none; 
}

/* 3. Style and position the custom Font Awesome icon (fa-chevron-down) */
.sidebar-nav details > summary .fa {
    margin-left: 10px; 
    font-size: 0.8em;
    transition: transform 0.25s ease;
    transform: rotate(0deg); /* Default state: down arrow */
}

/* 4. Rotate the icon when the dropdown is open (the <details> element has the 'open' attribute) */
.sidebar-nav details[open] > summary .fa {
    transform: rotate(-180deg); /* Rotate to point up */
}
 /* =========================================
   End Sidebar Dropdown Styling
   ========================================= */

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;padding:40px 18px;max-width:1200px;margin:0 auto}
.hero h1{font-size:clamp(26px,3.6vw,44px);line-height:1.15;margin:0 0 12px}
.hero p{color:var(--muted);max-width:62ch}
.hero-cta{display:flex;gap:12px;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;font-weight:600;border:1px solid var(--line);transition:transform .15s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-light{background:#f1f5f9;color:#0b0d0f;border-color:transparent}
.btn-outline{background:transparent;color:var(--text)}
.globe-wrap{display:grid;place-items:center}

/* Globe integration (desktop baseline) */
.globe-wrapper{margin-top:9vh;position:relative;display:inline-flex;align-items:center;justify-content:center}
.info{position:absolute;top:0;left:0;width:100%;text-align:center;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}
.info span{font-weight:700;text-shadow:0 0 5px #ffffff;padding:.2em .6em;border-radius:2px;font-size:1.4em;color:#111}
canvas#globe-3d{cursor:pointer;display:block;max-width:100%;height:auto}
svg#map,svg#country{position:fixed;top:0;visibility:hidden}

/* Sections */
.content-narrow{max-width:1100px;margin:0 auto;padding:40px 18px}
.about h2,.why h2,.contact h2{margin-top:0}
.grid-two{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.grid-two{grid-template-columns:1fr 1fr}}
.checklist{margin:8px 0 0 0;padding:0 0 0 18px;color:var(--muted)}

/* =========================
   Product Page Styles (New)
   ========================= */

/* Sub-page header section to mimic 'About Us' section */
.product-page-header {
    background: var(--bg); /* Ensure dark background */
    padding: 60px 18px 40px; /* Top padding to visually separate from header */
}
.product-page-header .content-narrow-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px;
}
.product-page-header h1 {
    /* Styling to match the 'About Us' title style */
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 64px);
    margin: 0 0 10px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--text);
}
.product-page-header h1 strong {
    /* Using strong tag for the requested accent color on 'Strength'/'Expertise' */
    color: var(--accent); 
}
.product-page-header p {
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.75;
    max-width: 68ch;
    margin: 14px 0 0;
}

/* Product Card Grid Container */
.products-grid-wrapper {
    background: var(--bg); /* Uses main body background color */
    padding: 40px 18px; 
}
.products-grid {
    display: grid;
    /* Default is 3 columns for Import */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
}

/* New CSS specifically for the Exports 4-column layout */
.products-grid-wrapper.four-col-grid .products-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Individual Product Card */
.product-card {
    background: var(--bg-elev); /* Uses background elevated for contrast */
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* ADDED HOVER EFFECT */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 12px var(--accent);
}


.product-img {
    width: 100%;
    height: 220px; /* Fixed height for image area */
    object-fit: cover;
    display: block;
    filter: brightness(0.95);
}

.product-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
}

/* Sub-heading style for "The Pollachi Standard" etc. */
.product-subhead {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    margin: -6px 0 10px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 10px;
    flex-shrink: 0;
}

.product-focus {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.highlight {
    color: var(--text);
    font-weight: 600;
}


/* Overwrite old sub-page styles to adopt the new structure */
.page-sub .sub-hero {
    padding: 0; /* Handled by .product-page-header */
    max-width: 100%;
}
.split {
    display: block; /* No longer a grid */
    padding: 0;
}
.split article {
    /* Old split article style removed/overwritten by .product-card */
    display: none; /* Hide old articles if they exist outside the new grid */
}
 /* =========================
   End Product Page Styles
   ========================= */

/* ==============
   About Section
   ============== */

.about{
    padding-top: 24px;
    padding-bottom: 32px;
}

/* Layout wrapper used in the HTML you requested */
.about-grid{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:34px;
    align-items:start;
}

/* Left column */
.about-heading{
    font-weight:800;
    font-size:clamp(40px,6.5vw,64px);
    margin:0 0 10px;
    line-height:1;
    letter-spacing:-1px;
    color:var(--text);
}
.about-heading .accent{
    color:var(--accent);
    display:inline-block;
    margin-left:6px;
}

.about-pill{
    width:64px;
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent), rgba(41,168,255,0.22));
    box-shadow:0 6px 22px rgba(41,168,255,0.08);
    margin:14px 0 22px;
}

.about-desc{
    color:var(--muted);
    font-size:1.04rem;
    line-height:1.75;
    max-width:68ch;
    margin:0 0 6px;
}

/* Right card */
.about-card{
    position:relative;
    border-radius:14px;
    padding:22px;
    background:linear-gradient(180deg, rgba(12,14,16,0.92), rgba(255,255,255,0.01));
    border:1px solid rgba(76,194,255,0.06);
    box-shadow: 0 28px 64px rgba(3,6,8,0.6), inset 0 0 26px rgba(41,168,255,0.02);
    min-width:300px;
    overflow:hidden;
}
.about-card::before{
    content:"";
    position:absolute;
    inset:-6% -10%;
    background:radial-gradient(closest_side,rgba(41,168,255,0.12),rgba(0,0,0,0) 52%);
    filter:blur(30px);
    pointer-events:none;
    z-index:0;
    border-radius:18px;
}
.card-body{position:relative;z-index:1}
.card-body p{margin:0;color:var(--text);line-height:1.6;font-size:0.98rem}
.lead-strong{font-weight:700}
.card-body hr{border:0;border-top:1px solid rgba(255,255,255,0.03);margin:14px 0}
.muted-quote{color:var(--muted);font-style:italic;margin-top:6px}

/* ========== end About Section ========== */

/* =========================
   About Us — Vision & Mission (Simplified)
   ========================= */

/* Shared Heading Styles */
.vision-title,
.mission-title {
    text-align: center;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    color: var(--text);
    margin: 0 auto 24px;
    letter-spacing:-0.4px;
}

/* ========== VISION SECTION ========== */
.vision-section {
    text-align: center;
    margin-bottom: 60px;
}

.vision-card {
    background: linear-gradient(180deg, rgba(25,30,34,0.6), rgba(255,255,255,0.01));
    border-radius: 18px;
    border: 1px solid rgba(76,194,255,0.12);
    box-shadow:
        0 28px 80px rgba(0,0,0,0.55),
        0 16px 50px rgba(76,194,255,0.06),
        inset 0 0 40px rgba(76,194,255,0.02);
    max-width: 920px;
    margin: 0 auto;
    padding: 40px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vision-card::before{
    content:"";
    position:absolute;
    inset:-20% -12%;
    background:radial-gradient(closest_side,rgba(41,168,255,0.12),rgba(0,0,0,0) 60%);
    filter:blur(36px);
    pointer-events:none;
    opacity:0.9;
}

.vision-card p {
    max-width: 68ch;
    margin: 0 auto 22px;
    color: var(--text);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Vision value pills */
.vision-pill-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}
.vision-pill {
    padding: 10px 22px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(76,194,255,0.14);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background .18s ease, transform .12s ease;
}
.vision-pill:hover {
    background: rgba(76,194,255,0.14);
    transform: translateY(-3px);
}

/* ========== MISSION SECTION ========== */
.mission-section {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.mission-title {
    margin-bottom: 12px;
}

.mission-intro {
    max-width: 800px;
    margin: 0 auto 28px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Mission grid (2x2 cards) */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}
.mission-card {
    background: linear-gradient(180deg, rgba(12,14,16,0.9), rgba(255,255,255,0.01));
    border-radius: 18px;
    padding: 34px 28px;
    border: 1px solid rgba(76,194,255,0.08);
    box-shadow:
        0 18px 60px rgba(0,0,0,0.55),
        inset 0 0 30px rgba(255,255,255,0.01);
    transition: transform .18s ease, box-shadow .18s ease;
    text-align: left;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}
.mission-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 28px 90px rgba(76,194,255,0.08),
        0 18px 60px rgba(0,0,0,0.6);
}
.mission-num {
    display: inline-block;
    background: linear-gradient(180deg, rgba(76,194,255,0.14), rgba(76,194,255,0.06));
    color: var(--accent);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 800;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(76,194,255,0.03) inset;
    font-size: 0.95rem;
}
.mission-card h4 {
    margin: 6px 0 12px;
    font-size: 1.1rem;
    color: var(--text);
}
.mission-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.6;
}


/* Ticker */
/* Keeping the original ticker styles here but the new implementation is below this section */
/* .ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:22px}
.ticker-track{display:inline-flex;gap:34px;white-space:nowrap;animation:ticker 24s linear infinite;padding:12px 0;animation-duration: 24s;}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
*/

/* ========== NEW PRODUCTS/TICKER SECTION STYLES ========== */
.products-ticker-section {
    max-width: 1100px;
    margin: 60px auto 40px;
    padding: 0 ;
}

.ticker-group {
    margin-top: 25px;
    padding: 0 18px;
}

.ticker-subhead {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 12px;
    text-align: center;
}

.accent-import {
    color: var(--import-color);
}

.accent-export {
    color: var(--export-color);
}

/* Core Ticker Styles */
.ticker {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    white-space: nowrap;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    cursor: default;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    background: var(--bg-elev);
}

.ticker-track {
    display: inline-flex;
    gap: 20px;
    white-space: nowrap;
    animation: ticker-scroll 28s linear infinite;
    padding: 8px 0;
    animation-play-state: running;
}

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

.product-pill {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--line);
}

/* Animation Keyframes (Left to Right movement) */
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Adjust animation speed/duration on smaller screens */
@media (max-width: 600px) {
    .ticker-subhead {
        font-size: 1.2rem;
    }
    .ticker-track {
        animation-duration: 18s; /* Faster scroll on mobile */
    }
    .products-ticker-section {
        padding: 0 14px;
        margin-top: 40px;
    }
}
 /* ========== END NEW PRODUCTS/TICKER SECTION STYLES ========== */

/* WHY CHOOSE RNS GROUPS (updated styles) */
.why{
    position:relative;
    padding:50px 18px;
    overflow:visible;
}

/* subtle right-side glow matching site aesthetic */
.why::after{
    content:"";
    position:absolute;
    right:0;
    top:15%;
    width:45%;
    height:70%;
    pointer-events:none;
    background:radial-gradient(closest_side,rgba(41,168,255,0.08),transparent 55%);
    filter:blur(40px);
    opacity:.9;
}

/* 1. HEADING ALIGNMENT FIX: Matched to the .about_heading size */
.why h2{
    font-weight:800;
    /* Match the same large clamp size as .about-heading */
    font-size:clamp(40px,6.5vw,64px); 
    line-height:1.1; /* Slightly looser line-height than the dense 1 used on about-heading */
    letter-spacing:-1px; 
    color:var(--text);
}
.why h2 .accent{
    color:var(--accent);
}

/* small underline accent */
.why-underline{
    width:70px;
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent),rgba(41,168,255,0.2));
    box-shadow:0 8px 24px rgba(41,168,255,0.08);
    margin:14px 0 28px;
}

/* Points list — align with heading start, stable, clean layout */
.why-points{
    list-style:none;
    margin:0;
    padding:0;
    max-width:900px;
}

/* Mobile Responsive Alignment: Uses flex for consistent bullet/text alignment */
.why-points li{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:26px;
    color:var(--muted);
    line-height:1.6;
    font-size:1.02rem; /* Desktop font size */
    padding:0;
}

/* bullet dot as inline element so it flows with the text */
.why-points li::before{
    content:"";
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 4px 20px rgba(76,194,255,0.12),inset 0 2px 6px rgba(0,0,0,0.25);
    margin-top:6px;
    flex:0 0 12px;
}

/* Fix: Setting display: inline ensures the descriptive text flows immediately 
   after the bold title, achieving the desired single-line look. 
*/
.why-points li strong{
    display:inline; 
    color:var(--text);
    font-weight:700;
    margin:0;
    font-size:1.05rem;
}

/* final item spacing tweak */
.why-points li:last-child{margin-bottom:0}

/* Media Query Overrides for Mobile */
@media(max-width:900px){
    
    /* 1. VISION/MISSION ALIGNMENT Fixes */
    .vision-section, .mission-section {
        padding: 0 18px; /* Apply padding to the main section containers for alignment */
        margin-bottom: 30px; /* Reduce vertical spacing on mobile */
    }
    
    .vision-card {
        max-width: 100%; /* Allow card to take full width of padding */
        padding: 28px 20px; /* Adjust inner padding on mobile */
    }

    .mission-grid {
        padding: 0; /* Remove extra inner padding */
        gap: 18px; /* Reduce grid gap on mobile for better fit */
    }
    
    .mission-card {
        padding: 20px; /* Adjust inner padding on mobile */
    }
    
    /* 2. CONTACT US PADDING FIX FOR MOBILE TEXT */
    /* Target the Contact section's content-narrow wrapper for correct padding */
    .contact .content-narrow {
        padding: 26px 18px !important; /* Use 18px padding for content sections */
    }
    
    /* Remove redundant padding added to the titles and paragraphs inside this section */
    .contact-h2-title, .contact-paragraph {
        padding: 0; 
        text-align: left; /* Ensure alignment on mobile */
    }
    
    /* Mobile styles from before */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .products-grid-wrapper {
        padding: 30px 18px;
    }

    .why{padding:34px 14px}
    .why::after{display:none}
    
    /* Reverting h2 size to match mobile viewport size in original code to look professional */
    .why h2{font-size:clamp(24px,6vw,32px); letter-spacing:-0.4px} 
    
    .why-underline{margin-bottom:18px}
    
    /* 2. MOBILE READABILITY IMPROVEMENT: Reduced the base list font size slightly */
    .why-points li{
        gap:14px;
        margin-bottom:20px;
        font-size: 0.95rem; /* Smaller size for better fit on mobile */
        line-height: 1.55;
    }
    .why-points li::before{width:10px;height:10px;margin-top:6px}
    .why-points li strong{font-size:1rem;}
    
    /* Other mobile styles */
    .brand {
        position: relative;
        left: auto;
        top: auto;
        margin-left: 0;
    }
    .brand-logo-wrapper {
        position: static;
        width: auto;
        height: 34px; /* Default mobile size */
        visibility: visible;
    }

    .site-header{margin:8px 12px 0;max-width:calc(100% - 24px);top:14px;padding:8px 14px}
    .brand-logo-wrapper{height:34px}
    .brand-logo--prominent{transform:scale(1)}
    .site-nav{display:none}
    .hamburger{display:grid}
    .hero{grid-template-columns:1fr;gap:16px;padding:26px 14px}
    .hero-cta{flex-wrap:wrap}
    .brand-text{font-size:1rem;letter-spacing:1px}

    /* About / Mission responsiveness */
    .about-grid{grid-template-columns:1fr;gap:22px}
    /* .vision-card is adjusted above */
    /* .mission-grid is adjusted above */
    .mission-card::after{display:none}
    .vision-card::before{filter:blur(26px);opacity:0.9;left:-8%;right:-8%}
    .feature-grid{grid-template-columns:1fr}
    .feature-icon{width:66px;height:66px;flex:0 0 66px}
    .feature-card{min-height:auto}
    .about-title{font-size:clamp(24px,7.5vw,36px)}
    
    /* Footer responsiveness for smaller screens */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 20px 10px;
    }
}

@media(max-width:640px){
    .why h2{font-size:1.8rem;}

    /* Product card image size adjustment on small screens */
    .product-img {
        height: 180px;
    }

    .products-grid {
        /* On small screens, use 1 column */
        grid-template-columns: 1fr !important;
    }
}
/* ------------------------------
   Mobile: Contact alignment fixes (stronger override)
   Place this near the end of styles.css
   ------------------------------ */
   @media (max-width: 640px) {

    /* Ensure header is above everything */
    .site-header {
      position: sticky !important;
      top: 14px !important;
      z-index: 9999 !important;
    }
  
    /* Make sure contact section is visibly below header (fallback if JS not loaded) */
    .contact {
      padding-top: 88px !important; /* fallback - JS will adjust more precisely */
      box-sizing: border-box !important;
    }
  
    /* Content wrapper: center and constrain width */
    .contact .content-narrow {
      padding: 22px 18px !important;
      max-width: 520px !important;
      margin: 0 auto !important;
      width: calc(100% - 28px) !important;
      box-sizing: border-box !important;
    }
  
    .contact-h2-title {
      text-align: left !important;
      margin: 6px 0 8px !important;
      padding-left: 2px !important;
    }
  
    .contact-paragraph {
      padding-left: 2px !important;
      margin: 0 0 14px !important;
      padding: 0 !important;
      text-align: left !important;
      max-width: 100% !important;
      font-size: 1rem !important;
    }
  
    .contact-message-box {
      padding: 16px !important;
      max-width: 520px !important;
      margin: 0 auto 18px !important;
      border-radius: 14px !important;
      box-sizing: border-box !important;
      margin-left: 2px !important;
    }
  
    .form-row-inline, .form-row {
      grid-template-columns: 1fr !important;
    }
  
    .phone-input-group {
      flex-direction: column !important;
      gap: 8px !important;
    }
  
    .country-code-display {
      width: 100% !important;
      padding: 10px 12px !important;
      box-sizing: border-box !important;
      border-radius: 10px !important;
    }
  
    .phone-input-group input#phone {
      width: 100% !important;
      padding: 12px !important;
      box-sizing: border-box !important;
    }
  
    .contact-message-box .btn-primary,
    .btn-small {
      width: 100% !important;
      margin-top: 12px !important;
    }
  
    /* Ensure WhatsApp FAB doesn't cover inputs; if still overlapping, JS will nudge it */
    .whatsapp-fab {
      right: 12px !important;
      bottom: 12px !important;
      z-index: 110 !important;
    }
  
    .site-footer {
      position: relative !important;
      z-index: 10 !important;
    }
  }
  
/* MOBILE-SPECIFIC GLOBE ADJUSTMENTS
   - Moves and sizes globe for phone/tablet view (<=768px)
   - Keeps desktop globe layout unchanged
*/
@media (max-width: 768px) {
  /* Make sure hero stacks and globe can be placed below the header search-like field */
  .hero { grid-template-columns: 1fr; gap: 12px; }

  /* container to hold globe (keeps original markup safe on desktop) */
  .globe-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2; /* default within hero flow; JS will reinsert after search control if present */
    padding: 10px 14px 18px;
  }

  .globe-wrapper {
    position: relative;
    margin: 8px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* ensure canvas respects mobile width and remains square */
  canvas#globe-3d {
    width: min(90vw, 360px) !important;
    height: min(90vw, 360px) !important;
    max-width: 360px;
    max-height: 360px;
    touch-action: pan-y; /* allow vertical scrolling while interacting */
  }

  .info span {
    font-size: 1rem;
    padding: .15em .5em;
    text-shadow: 0 0 4px #000;
  }

  /* Slight spacing when globe gets moved */
  .globe-container + .content-narrow {
    margin-top: 8px;
  }
}

/* Minimal canvas fallback for very small screens */
@media (max-width: 420px) {
  canvas#globe-3d {
    width: min(86vw, 300px) !important;
    height: min(86vw, 300px) !important;
  }
}
/* make the country label crisper and prefer subpixel antialiasing */
.info span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-weight: 700;
    /* optional: slightly increase contrast for better readability */
    color: #111 !important;
    text-shadow: none !important;
  }
  
  /* already added — but keep it to guarantee no blur filters */
  canvas#globe-3d,
  .globe-wrap canvas#globe-3d,
  .globe-container canvas#globe-3d {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    image-rendering: auto !important;
  }
  /* ==============================
   Mobile: tidy up "Why Choose RNS Groups"
   Applies only on phone / small tablets
   ============================== */
@media (max-width: 900px) {
    /* tighten outer spacing and keep heading aligned */
    .why {
      padding: 18px 14px;
    }
    .why h2 {
      text-align: left;
      padding-left: 4px;
      margin-bottom: 10px;
    }
  
    /* remove native list indentation then style items as a two-column flow:
       - left: small dot (pseudo-element)
       - middle: bold title (stacked, fixed column)
       - right: description (flexible column)
    */
    .why-points {
      list-style: none;
      padding: 0 6px;
      margin: 0;
    }
  
    .why-points li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 6px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      box-sizing: border-box;
      min-height: 56px; /* keeps visual rhythm */
    }
  
    /* keep the round accent dot - use the existing ::before pattern */
    .why-points li::before {
      content: "";
      flex: 0 0 12px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      margin-top: 6px; /* vertically align it with title text */
    }
  
    /* Title column: bold, block so it wraps independently */
    .why-points strong {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.15;
      min-width: 110px;    /* reserve column width for titles */
      max-width: 42%;      /* allow wrapping on very narrow screens */
      flex: 0 0 auto;      /* don't let title shrink too small */
      margin-right: 2px;
    }
  
    /* Description column: flexible, readable, and left-aligned */
    .why-points li > *:not(strong) {
      flex: 1 1 auto;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.6;
      margin: 0;
    }
  
    /* Slightly reduce spacing for very small phones */
    @media (max-width: 420px) {
      .why-points li { padding: 10px 6px; min-height: 52px; gap: 10px; }
      .why-points strong { min-width: 90px; max-width: 48%; font-size: 0.98rem; }
    }
  }
  

/* Contact (Legacy Container for alignment, content moved to .contact-message-box) */
.contact-form{display:grid;gap:12px;margin-top:14px}
.form-row{display:grid;gap:6px}
.form-row-inline{grid-template-columns:1fr;gap:12px}
.form-row-inline>div{display:grid;gap:6px}
@media(min-width:720px){.form-row-inline{grid-template-columns:1fr 1fr}}
/* Keep base input styling but new .contact-message-box overrides them below */
input,select,textarea{background:#0c0e10;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px}
label{color:#cbd5e1;font-size:14px}

/* =================================
   Contact Section Styling Updates
   ================================= */

/* H2 style (white text as shown in image 2) */
.contact-h2-title {
    color: var(--text); /* Ensures the heading is white */
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Paragraph styles (matches font size, color, and line height of image 2) */
.contact-paragraph {
    color: var(--muted);
    font-size: 1.05rem; /* Slightly larger text for readability */
    line-height: 1.6;
    max-width: 68ch;
    margin-top: 0;
    margin-bottom: 28px; /* Spacing before the form box */
}

/* Strong text style within the paragraph */
.contact-paragraph-strong {
    font-style: italic;
    font-weight: 600;
    color: var(--text); /* Set to white text as shown in image 2 */
}


/* Form Box (New styling to match image 3) */
.contact-message-box {
    /* Use the same professional/creative card styling as the About Card */
    position: relative;
    border-radius: 18px;
    padding: 30px;
    background: linear-gradient(180deg, rgba(12,14,16,0.92), rgba(255,255,255,0.01));
    border: 1px solid rgba(76,194,255,0.06);
    box-shadow: 0 28px 64px rgba(3,6,8,0.6), inset 0 0 26px rgba(41,168,255,0.02);
    min-width: 300px;
    overflow: hidden;
    display: grid;
    gap: 16px; /* Spacing between form rows */
}

/* Glowing accent border for the message box (optional, matches About Card glow) */
.contact-message-box::before{
    content:"";
    position:absolute;
    inset:-6% -10%;
    background:radial-gradient(closest_side,rgba(41,168,255,0.12),rgba(0,0,0,0) 52%);
    filter:blur(30px);
    pointer-events:none;
    z-index:0;
    border-radius:22px;
}
.contact-message-box > * {
    position:relative; /* Ensure form elements are above the pseudo-element glow */
    z-index:1;
}

/* Form element base styling override for the contact form to match the image */
.contact-message-box input,
.contact-message-box select,
.contact-message-box textarea {
    background: var(--bg); /* Darker background inside the form */
    border-color: rgba(255,255,255,0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    padding: 14px 16px; /* Slightly larger padding */
    font-size: 0.95rem;
    transition: border-color 0.2s;
    /* Ensure dropdown arrow is always visible by default */
    appearance: menulist; 
    -webkit-appearance: menulist;
}

/* Force dropdown to always appear below on most modern browsers */
.contact-message-box select {
    position: relative;
    z-index: 10; /* Ensure it stays above other elements, although direct positioning is OS-dependent */
}

.contact-message-box input::placeholder,
.contact-message-box textarea::placeholder {
    color: var(--muted);
    opacity: 0.8;
}
.contact-message-box input:focus,
.contact-message-box select:focus,
.contact-message-box textarea:focus {
    border-color: var(--accent);
    outline: none;
}

/* Phone input group styling */
/* Country code input (typeable) */
.country-code-input {
    flex-shrink: 0;
    width: 90px;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 10px;
    color: var(--text);
    font-size: 0.95rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    display: inline-flex;
    align-items: center;
    text-align: center;
}

/* Slightly reduce left/right gap with phone input */
.phone-input-group {
    display: flex;
    gap: 8px;
}

.phone-input-group input#phone {
    flex-grow: 1;
    min-width: 0;
    margin: 0;
}


/* Ensure inline row elements fill space */
.form-row-inline {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media(min-width: 720px){.form-row-inline{grid-template-columns:1fr}}

/* Button style matching the primary blue button seen in the reference image */
.btn-primary {
    background: #007bff; /* Bright blue color */
    color: #ffffff;
    border: 1px solid #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    padding: 14px 20px;
}
.btn-primary:hover {
    background: #0069d9;
    border-color: #0062cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.6);
}

/* Small button styling */
.btn-small {
    max-width: 200px; /* Make the button smaller */
    padding: 12px 20px;
    justify-content: center;
    font-size: 1rem;
}

/* Override existing button to use the new primary style for submission */
#contactForm .btn-light {
    display: none; /* Hide the old button */
}

/* Hide the unused generic contact-form class from old structure */
.contact-form {
    display: none;
}

/* Sub pages */
.page-sub .sub-hero{padding:34px 18px;max-width:980px;margin:0 auto}
.split{display:grid;grid-template-columns:1fr;gap:18px;padding:0 18px 40px;max-width:1000px;margin:0 auto}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split article{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--line);padding:18px;border-radius:14px}

/* Footer */
/* ==================================
   Footer Specific Styling (Final)
   ================================== */
   .site-footer {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    background: var(--bg-elev);
    padding-bottom: 0;
}

.footer-inner {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    max-width: 1200px;
    padding: 40px 18px 20px;
    align-items: start;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .footer-inner {
        grid-template-columns: 1.2fr .7fr 1fr;
        padding: 40px 18px 20px;
    }
}

/* Footer Brand/Logo Column */
.f-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    height: 80px;
    width: 100px;
    object-fit: contain;
    margin-bottom: 12px;
}

.f-brand p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 6px 0;
    max-width: 300px;
}

/* Footer Navigation */
.f-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.f-nav a {
    color: #c9ced4;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 4px 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Nav Link Hover Effect */
.f-nav a:hover {
    color: var(--accent);
    transform: translateX(4px);
}

/* Footer Contact Info */
.f-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.f-contact p {
    margin: 0;
    color: #c9ced4;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

/* Address line fix: Use flex-start to align icon to the top of multi-line text block */
.f-contact p.address-paragraph {
    align-items: flex-start;
}

.f-contact p.address-paragraph a.footer-link {
    display: block;
    padding-top: 10px;
    margin-top: -10px;
}

/* Social Media Icons */
.f-social {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.f-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #111111;
    transition: background 0.2s, transform 0.2s;
}

.f-social a:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.f-social .social-icon {
    font-size: 18px;
    color: white;
}

/* Contact Icons (Email, Phone, Address) */
.f-contact .contact-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #111111;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: white;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Specific alignment for Address text block */
.f-contact p.address-paragraph {
    align-items: flex-start;
}

.f-contact p.address-paragraph a.footer-link {
    display: block;
    padding-top: 10px;
    margin-top: -10px;
}

/* Correct vertical alignment for single-line Email and Phone */
.f-contact p:not(.address-paragraph) {
    align-items: center;
}

/* ======================================
   ✨ Hover Effect Only for Contact Values ✨
   ====================================== */
.f-contact a.footer-link {
    color: #c9ced4;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.f-contact a.footer-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

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

.f-bottom {
    text-align: center;
    border-top: none;
    padding: 10px 18px;
    color: #98a2ad;
    font-size: 0.85rem;
}


 /* End Footer Specific Styling */

/* WhatsApp FAB */
.whatsapp-fab{position:fixed;right:16px;bottom:16px;border-radius:14px;width:56px;height:56px;display:grid;place-items:center;z-index:70;animation:jump 1.6s ease-in-out infinite;background:transparent}
.whatsapp-icon{width:48px;height:48px;object-fit:contain;filter: drop-shadow(0 4px 12px rgba(0,0,0,.5))}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}60%{transform:translateY(-3px)}}

/* Scroll animations */
[data-animate]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.in-view{opacity:1;transform:none}
[data-animate="fade-down"]{transform:translateY(-12px)}
[data-animate="rise"]{transform:translateY(20px)}
[data-animate="tilt"]{transform:perspective(600px) rotateX(6deg);transform-origin:top}
[data-animate="slide-left"]{transform:translateX(-18px)}

/* === Remove blue focus ring / highlight from globe canvas on click or tap === */
#globe-3d {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
}

#globe-3d:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Optional: also neutralize browser tap highlight for wrapper containers */
canvas#globe-3d, 
.globe-wrapper, 
.globe-container {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
}

@media (max-width: 900px) {
    /* --- Remove any blur or backdrop effect on the globe --- */
    .globe-wrap canvas#globe-3d,
    .globe-container canvas#globe-3d,
    canvas#globe-3d {
      filter: none !important;
      -webkit-filter: none !important;
      backdrop-filter: none !important;
    }
  }
  @media (max-width: 900px) {
    /* Extra spacing between header and globe on small screens */
    .site-header + .globe-wrap,
    .site-header + .globe-container {
      margin-top: 28px !important; /* adjust value (e.g. 24–32px) as needed */
    }
  }
/* === Globe clarity enhancement (mobile + general) === */
.globe-wrap,
.globe-container {
  image-rendering: crisp-edges !important;
  image-rendering: -webkit-optimize-contrast !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}

/* Ensure globe canvas renders sharp and not softened */
canvas#globe-3d {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    image-rendering: crisp-edges !important;
    transform: translateZ(0);         /* ✅ standard property */
    -webkit-transform: translateZ(0); /* vendor prefix for Safari */
  }
  

/* Make country name labels clearer and darker */
.info span {
  font-weight: 800 !important;
  color: #111 !important;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.5);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Accessibility note: outline removed visually for the globe canvas.
   The aria-label and keyboard handlers should remain on the canvas for screen-reader users. */