/* PrimeLink Professional Theme Variables */
:root {
--jpos-blue:#0b4fa3;
--jpos-blue-light:#2563eb;
--jpos-green:#2e7d32;
--jpos-green-light:#4caf50;
--white:#FFFFFF;
--dark-bg:#0b0f19;
}

/* Hero Section: Hybrid Fiber Optic Backbone & Wireless Hotspot Infrastructure */
.primelink-hero {
position:relative;
overflow:hidden;
padding:9rem 0;
background-color:#060913;
background-image:
radial-gradient(circle at 50% 40%,rgba(37,99,235,0.18) 0%,transparent 60%),
radial-gradient(circle at 20% 80%,rgba(46,125,50,0.12) 0%,transparent 50%),
linear-gradient(to right,rgba(255,255,255,0.025) 1px,transparent 1px),
linear-gradient(to bottom,rgba(255,255,255,0.025) 1px,transparent 1px);
background-size:100% 100%,100% 100%,50px 50px,50px 50px;
color:var(--white);
transition:background-color 0.3s ease,color 0.3s ease;
}

/* Light mode professional hybrid ISP infrastructure look */
body:not(.dark-mode) .primelink-hero {
background-color:#f8fafc;
background-image:
radial-gradient(circle at 50% 40%,rgba(11,79,163,0.09) 0%,transparent 60%),
radial-gradient(circle at 20% 80%,rgba(46,125,50,0.06) 0%,transparent 50%),
linear-gradient(to right,rgba(11,79,163,0.035) 1px,transparent 1px),
linear-gradient(to bottom,rgba(11,79,163,0.035) 1px,transparent 1px);
color:var(--jpos-blue);
}

body:not(.dark-mode) .primelink-hero p,
body:not(.dark-mode) .primelink-hero .lead {
color:#334155 !important;
}

body.dark-mode .primelink-hero p,
body.dark-mode .primelink-hero .lead {
color:#94a3b8 !important;
}

/* Hybrid Network Topology Overlay: Fiber Senders/Receivers + Wireless Hotspot Waves */
.hero-network-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700' preserveAspectRatio='none'%3E%3Cg stroke='%232563eb' stroke-opacity='0.22' stroke-width='2' fill='none'%3E%3Cpath d='M80,180 C350,70 600,480 920,220 C1120,60 1300,380 1420,260' stroke-dasharray='6,4'/%3E%3Cpath d='M120,520 C420,280 750,580 1020,380 C1180,260 1320,480 1440,420' /%3E%3Cpath d='M460,280 L920,220 L1020,380 Z' stroke-opacity='0.15'/%3E%3C/g%3E%3Cg fill='%232563eb' fill-opacity='0.15'%3E%3Ccircle cx='350' cy='220' r='55'/%3E%3Ccircle cx='350' cy='220' r='90' stroke='%232563eb' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='1150' cy='450' r='65'/%3E%3Ccircle cx='1150' cy='450' r='105' stroke='%232563eb' stroke-opacity='0.1' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%232563eb'%3E%3Crect x='450' y='270' width='20' height='20' rx='3' fill-opacity='0.9'/%3E%3Crect x='910' y='210' width='20' height='20' rx='3' fill-opacity='0.9'/%3E%3Crect x='1010' y='370' width='20' height='20' rx='3' fill-opacity='0.9'/%3E%3C/g%3E%3Cg fill='%234caf50'%3E%3Ccircle cx='460' cy='280' r='6'/%3E%3Ccircle cx='920' cy='220' r='6'/%3E%3Ccircle cx='1020' cy='380' r='6'/%3E%3Ccircle cx='350' cy='220' r='5' fill='%234caf50'/%3E%3Ccircle cx='1150' cy='450' r='5' fill='%234caf50'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
background-size:cover;
z-index:1;
pointer-events:none;
}

.hero-bg-tower {
position:absolute;
top:-15%;
right:0%;
width:120%;
height:130%;
z-index:1;
pointer-events:none;
object-fit:cover;
opacity:0.25;
}

@media (min-width:992px) {
.hero-bg-tower {
top:-20% !important;
left:auto !important;
right:18% !important;
width:65% !important;
height:140% !important;
opacity:0.40;
mask-image:linear-gradient(to left,rgba(0,0,0,1) 65%,rgba(0,0,0,0) 100%);
-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1) 65%,rgba(0,0,0,0) 100%);
}
}

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

/* General Professional Sections */
.primelink-section {
background-color:var(--white);
color:#334155;
transition:background-color 0.3s ease,color 0.3s ease;
}

body.dark-mode .primelink-section {
background-color:var(--dark-bg);
color:#f8fafc;
}

.primelink-section-forced-dark {
background-color:#0b0f19 !important;
color:#f8fafc !important;
}

.primelink-section-forced-dark .text-muted {
color:#94a3b8 !important;
}

.primelink-section-forced-dark .primelink-card {
background:#1e293b !important;
border-color:#334155 !important;
color:#f1f5f9 !important;
}

.primelink-section-forced-dark h2,
.primelink-section-forced-dark h3,
.primelink-section-forced-dark h5 {
color:#f8fafc !important;
}

.primelink-card {
background:var(--white);
border:1px solid #e2e8f0;
border-radius:1rem;
transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
}

.primelink-card:hover {
transform:translateY(-5px);
border-color:var(--jpos-blue);
box-shadow:0 12px 35px rgba(11,79,163,0.15);
}

body.dark-mode .primelink-card {
background:#1e293b;
border-color:#334155;
color:#f1f5f9;
}

/* Standard Curved Underline for non-hero sections */
.curved-underline {
position:relative;
display:inline-block;
color:var(--jpos-green);
}

body.dark-mode .curved-underline {
color:var(--jpos-blue-light) !important;
}

.curved-underline::after {
content:'';
position:absolute;
left:0;
bottom:-10px;
width:100%;
height:14px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 50 12, 100 4' fill='none' stroke='%230b4fa3' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
background-size:100% 100%;
}

body.dark-mode .curved-underline::after {
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 50 12, 100 4' fill='none' stroke='%234caf50' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
background-size:100% 100%;
}

/* Dynamic Typewriter & Animated Underline Styles for Hero Section */
.hero-heading {
min-height:auto;
display:block;
margin-bottom:1rem;
}

.dynamic-underline {
position:relative;
display:inline-block;
color:var(--jpos-green);
}

body.dark-mode .dynamic-underline {
color:var(--jpos-blue-light) !important;
}

.dynamic-underline::after {
content:'';
position:absolute;
left:0;
bottom:-10px;
width:100%;
height:14px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 50 12, 100 4' fill='none' stroke='%230b4fa3' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
background-size:100% 100%;
}

body.dark-mode .dynamic-underline::after {
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 50 12, 100 4' fill='none' stroke='%234caf50' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
background-size:100% 100%;
}

/* Blinking cursor effect during typing */
.typewriter-cursor {
display:inline-block;
background-color:var(--jpos-blue);
width:3px;
animation:blink 0.7s infinite;
margin-left:2px;
}

body.dark-mode .typewriter-cursor {
background-color:var(--white);
}

@keyframes blink {
0%,100% {
opacity:1;
}
50% {
opacity:0;
}
}

.badge-pill-custom {
background:rgba(37,99,235,0.12);
color:var(--jpos-blue-light);
border:1px solid rgba(37,99,235,0.25);
padding:0.4rem 1rem;
border-radius:50rem;
font-size:0.85rem;
font-weight:600;
display:inline-flex;
align-items:center;
gap:0.5rem;
}

body.dark-mode .badge-pill-custom {
background:rgba(37,99,235,0.2);
color:#60a5fa;
border-color:rgba(37,99,235,0.4);
}

.custom-link-box {
background-color:rgba(11,79,163,0.08);
border:1px solid rgba(11,79,163,0.25);
color:var(--jpos-blue);
transition:all 0.25s ease-in-out;
}

.custom-link-box i {
color:var(--jpos-blue);
}

.custom-link-box:hover {
background-color:var(--jpos-blue);
color:#ffffff;
transform:translateY(-2px);
}

.custom-link-box:hover i {
color:#ffffff;
}

.custom-outline-box {
background-color:transparent;
border:1px solid #cbd5e1;
color:#334155;
transition:all 0.25s ease-in-out;
}

.custom-outline-box:hover {
border-color:var(--jpos-blue);
color:var(--jpos-blue);
transform:translateY(-2px);
}

/* Dark Mode Overrides */
body.dark-mode .custom-link-box {
background-color:rgba(255,255,255,0.1);
border-color:rgba(255,255,255,0.25);
color:#ffffff;
}

body.dark-mode .custom-link-box i {
color:rgba(255,255,255,0.5);
}

body.dark-mode .custom-link-box:hover {
background-color:rgba(255,255,255,0.2);
color:#ffffff;
}

body.dark-mode .custom-outline-box {
background-color:transparent;
border-color:rgba(255,255,255,0.15);
color:rgba(255,255,255,0.8);
}

body.dark-mode .custom-outline-box:hover {
color:#ffffff;
border-color:rgba(255,255,255,0.4);
}

/* Impact Metrics section */
.primelink-stats-section {
background-color:#0d1322 !important;
background-image:
radial-gradient(circle at 10% 20%,rgba(37,99,235,0.12) 0%,transparent 40%),
radial-gradient(circle at 90% 80%,rgba(46,125,50,0.08) 0%,transparent 40%) !important;
color:#f8fafc !important;
border-color:#1e293b !important;
}

.primelink-stats-section h2,
.primelink-stats-section h3 {
color:#f8fafc !important;
}

.primelink-stats-section .text-muted {
color:#94a3b8 !important;
}

.primelink-stats-section .primelink-card {
background:#1e293b !important;
border-color:#334155 !important;
color:#f1f5f9 !important;
}

/* Scoped CSS: Tightened wrapper margins specifically on responsive/mobile viewports */
.mobile-carousel-container {
position:relative;
width:100%;
height:600px;
overflow:hidden !important;
background:transparent !important;
border:none;
display:flex;
align-items:center;
justify-content:center;
padding-top:25px;
}

/* Base slide properties with safe inner margin on all sides */
.mobile-slide {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:contain;
object-position:center bottom;
padding:20px 15px 15px 15px;
opacity:0;
transform:scale(0.9) translateY(0);
filter:blur(6px);
transition:opacity 0.8s ease-in-out,filter 0.8s ease-in-out;
will-change:opacity,transform,filter;
}

.mobile-slide.ispmobile-wide {
object-fit:contain;
padding:20px 10px 10px 10px;
}

/* Active Slide Safe Zoom & Pan Sequence */
.mobile-slide.active {
opacity:1;
filter:blur(0px);
z-index:2;
transform-origin:center 40%;
animation:featurePanAndZoom 8s cubic-bezier(0.25,1,0.5,1) forwards;
}

@keyframes featurePanAndZoom {
0% {
transform:scale(0.9) translateY(0%);
}
25% {
transform:scale(1.04) translateY(-1%);
}
65% {
transform:scale(1.04) translateY(-3%);
}
88% {
transform:scale(0.98) translateY(-1%);
}
100% {
transform:scale(0.9) translateY(0%);
}
}

/* Store Badge Styling Support */
.store-img {
transition:transform 0.3s ease,filter 0.3s ease;
}

.store-img:hover {
transform:translateY(-3px);
filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Media Query to completely strip vertical wrapper spacing on mobile screens */
@media (max-width:991.98px) {
.primelink-section {
padding-top:0px !important;
padding-bottom:0px !important;
overflow:visible !important;
}

.primelink-section .container {
padding-top:0px !important;
padding-bottom:0px !important;
overflow:visible !important;
}

.mobile-showcase-wrapper {
margin-top:-100px !important;
margin-bottom:-40px !important;
position:relative;
z-index:10;
}

.mobile-carousel-container {
height:440px !important;
padding-top:0px !important;
margin-top:-20px !important;
overflow:visible !important;
}

.mobile-slide {
object-fit:contain;
padding:0px !important;
transform-origin:center top !important;
}
}

/* Maximum intensity professional gradient glow for enhanced visibility */
.payment-bg-glow {
opacity:0.90;
background:radial-gradient(circle,rgba(13,110,253,0.75) 0%,rgba(13,110,253,0.30) 45%,rgba(13,110,253,0.05) 75%,transparent 90%);
}

[data-bs-theme="dark"] .payment-bg-glow,
.dark-mode .payment-bg-glow,
body.dark .payment-bg-glow {
opacity:0.95;
background:radial-gradient(circle,rgba(25,135,84,0.85) 0%,rgba(25,135,84,0.35) 45%,rgba(25,135,84,0.08) 75%,transparent 90%);
}

@media (prefers-color-scheme:dark) {
:root:not([data-bs-theme="light"]) .payment-bg-glow {
opacity:0.95;
background:radial-gradient(circle,rgba(25,135,84,0.85) 0%,rgba(25,135,84,0.35) 45%,rgba(25,135,84,0.08) 75%,transparent 90%);
}
}

/* FORCED NAVBLUE CONTAINER BACKGROUND (#0b1f3a) */
.navblue-forced-bg {
background-color:#0b1f3a !important;
border:1px solid rgba(255,255,255,0.1) !important;
}

/* LIGHT & DARK MODE ADAPTIVE ROUTER BOX STYLES */

/* Default Light Mode */
.router-box-adaptive {
background-color:#ffffff;
border-color:#e2e8f0 !important;
transition:background-color 0.3s ease,border-color 0.3s ease;
}

.router-title-adaptive {
color:var(--jpos-blue) !important;
}

.router-text-adaptive {
color:#334155 !important;
}

/* Dark Mode */
body.dark-mode .router-box-adaptive,
[data-bs-theme="dark"] .router-box-adaptive,
body.dark .router-box-adaptive {
background-color:rgba(13,110,253,0.08) !important;
border-color:rgba(13,110,253,0.25) !important;
}

body.dark-mode .router-title-adaptive,
[data-bs-theme="dark"] .router-title-adaptive,
body.dark .router-title-adaptive {
color:#60a5fa !important;
}

body.dark-mode .router-text-adaptive,
[data-bs-theme="dark"] .router-text-adaptive,
body.dark .router-text-adaptive {
color:rgba(255,255,255,0.75) !important;
}

@media (prefers-color-scheme:dark) {
:root:not([data-bs-theme="light"]) .router-box-adaptive {
background-color:rgba(13,110,253,0.08) !important;
border-color:rgba(13,110,253,0.25) !important;
}

:root:not([data-bs-theme="light"]) .router-title-adaptive {
color:#60a5fa !important;
}

:root:not([data-bs-theme="light"]) .router-text-adaptive {
color:rgba(255,255,255,0.75) !important;
}
}
