@font-face {
    font-family: 'Harabara';
    src: url('../font/Harabara.woff2') format('woff2'),
         url('../font/Harabara.woff') format('woff'),
         url('../font/Harabara.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



        html, body {
            overflow-x: hidden;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: #1a1a1a;
        }

        :root {
            --pink: #cd0767;
            --pink-dark: #9e0851;
        }
        
        
    h2 {
    font-family: 'Harabara', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: 0.015em;
}






.font-inter {
    font-family: 'Inter', sans-serif;
}

        /* Primary theme helpers (used by Migration section) */
        .bg-primary { background-color: var(--pink) !important; }
        .text-primary { color: var(--pink); }
        .border-primary { border-color: var(--pink); }
        
        
        .text-skynet-primary {
  color: var(--pink);
}


        /* The Signature WHMCS Button Style */
        .pink-butn {
             font-family: 'Harabara', sans-serif;
            background: var(--pink);
            color: #fff;
            padding: 14px 18px;
            font-size: 16px;
            font-weight: 700;
            display: inline-block;
            border-bottom: 5px solid var(--pink-dark);
            border-radius: 0 !important; /* Strictly sharp corners as requested */
            text-decoration: none;
            transition: transform 0.1s ease, filter 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.025em;
              white-space: nowrap;
        }
         .pink-butn:hover,
.pink-butn:focus {
  filter: brightness(1.1);
  transform: translateY(-1px);
  color: #fff !important;   /* THIS FIXES THE INVISIBLE TEXT */
}
       
        .pink-butn:active {
            transform: translateY(2px);
            border-bottom-width: 2px;
            margin-bottom: 3px;
        }

        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .animate-float { animation: float 4s ease-in-out infinite; }

        @keyframes pulse-soft {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }

        

        /* --- Security Orbital Animations (Security section) --- */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes spin-reverse {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }
        @keyframes scan-radar {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .orbit {
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(205, 7, 103, 0.30);
            pointer-events: none;
        }
        /* Slightly smaller so the full rings are visible inside the card */
        .orbit-1 {
            width: 140%;
            height: 140%;
            animation: spin-slow 12s linear infinite;
            top: -20%;
            left: -20%;
        }
        .orbit-2 {
            width: 180%;
            height: 180%;
            animation: spin-reverse 20s linear infinite;
            top: -40%;
            left: -40%;
            border-style: dotted;
            border-width: 2px;
            opacity: 0.4;
        }

        /* The Radar Sweep Effect (sized to remain fully visible) */
        .radar-sweep {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: conic-gradient(
                from 0deg at 50% 50%,
                rgba(205, 7, 103, 0.20) 0deg,
                transparent 90deg,
                transparent 360deg
            );
            border-radius: 50%;
            animation: scan-radar 4s linear infinite;
            pointer-events: none;
            z-index: 0;
        }

        .orbit-dot {
            position: absolute;
            top: 50%;
            right: -4px;
            width: 8px;
            height: 8px;
            background: var(--pink);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--pink);
        }
@keyframes slide-line {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .data-line {
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--pink), transparent);
            width: 100%;
            position: absolute;
            animation: slide-line 3s linear infinite;
        }

        .section-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .section-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Rounded corners for everything EXCEPT buttons */
        .modern-card {
            border-radius: 1.5rem;
        }

        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    
        .avatar-stack img {
            width: 52px;
            height: 52px;
            border: 3px solid #fff;
            border-radius: 50%;
            object-fit: cover;
        }

        .trust-badge {
            width: 52px;
            height: 52px;
            background-color: #fff0f7;
            border: 3px solid #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #cd0767;
            font-weight: 700;
            font-size: 0.875rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        /* Force spacing between avatar group and text */
.trusted-section{
  display:flex;
  align-items:center;
  gap:16px !important;
}

    
        /* --- Added: "Who Is Our Next-Gen VPS Perfect For?" section helpers --- */
        .pricing-card {
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(205, 7, 103, 0.10),
                        0 10px 10px -5px rgba(205, 7, 103, 0.04);
        }

        /* Check list styling (for feature cards) */
        .check-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 0.75rem;
        }
        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #cd0767;
            font-weight: 800;
        }

        /* --- Full Root Access & Absolute Control (terminal section) --- */
        .terminal-bg-grid {
            background-image: radial-gradient(#cd076722 1px, transparent 1px);
            background-size: 30px 30px;
        }

        /* Dashboard Floating Animation */
        @keyframes terminal-dashboard-float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-25px); }
        }

        @keyframes terminal-screen-flicker {
            0% { opacity: 0.97; }
            5% { opacity: 0.95; }
            10% { opacity: 0.9; }
            15% { opacity: 0.98; }
            30% { opacity: 0.95; }
            50% { opacity: 0.99; }
            80% { opacity: 0.96; }
            100% { opacity: 0.98; }
        }

        /* 3D Perspective Container */
        .terminal-perspective { perspective: 1200px; }

        .terminal-container {
            opacity: 0;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
            transform-style: preserve-3d;
            position: relative;
        }

        /* Combined Entrance + Idle Floating Animation */
        .terminal-revealed-init {
            animation:
                terminal-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
                terminal-dashboard-float 5s ease-in-out 1.2s infinite;
        }

        @keyframes terminal-entrance {
            0% {
                opacity: 0;
                transform: translateX(60px) rotateY(-10deg) scale(0.95);
            }
            100% {
                opacity: 1;
                transform: translateX(0) rotateY(0deg) scale(1);
            }
        }

        .terminal-container:hover {
            animation-play-state: paused;
            transform: rotateY(-5deg) rotateX(2deg) scale(1.02) !important;
            box-shadow: -30px 30px 70px rgba(205, 7, 103, 0.15);
        }

        .terminal-screen { position: relative; overflow: hidden; }

        .terminal-screen::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background:
                linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
            z-index: 2;
            background-size: 100% 4px, 3px 100%;
            pointer-events: none;
        }

        .terminal-content { animation: terminal-screen-flicker 0.15s infinite; }

        /* Staggered Boot Sequence for Text */
        .terminal-line {
            opacity: 0;
            transform: translateX(18px) rotateX(70deg);
            transform-origin: top;
            will-change: transform, opacity;
            margin-bottom: 1.25rem;
        }

        .terminal-revealed-init .terminal-line { animation: terminal-line-roll-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        @keyframes terminal-line-roll-in {
    0% { opacity: 0; transform: translateX(18px) rotateX(70deg); }
    100% { opacity: 1; transform: translateX(0) rotateX(0deg); }
}

        /* --- Free & Assisted VPS Migration (migration section) --- */
        .migration-tech-grid{
            background-image: radial-gradient(circle, #cd0767 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.08;
        }

        .migration-glow-blob{
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(205, 7, 103, 0.2) 0%, transparent 70%);
            filter: blur(80px);
            z-index: 0;
            animation: migration-move 20s infinite alternate;
            pointer-events: none;
        }
        .migration-glow-blob-1{ top: -5rem; left: -5rem; }
        .migration-glow-blob-2{ bottom: -6rem; right: -6rem; animation-direction: alternate-reverse; }

        @keyframes migration-move{
            from { transform: translate(-10%, -10%); }
            to   { transform: translate(20%, 20%); }
        }

        .migration-packet{
            position: absolute;
            width: 8px;
            height: 8px;
            background: #cd0767;
            border-radius: 9999px;
            filter: blur(2px);
            box-shadow: 0 0 10px #cd0767;
            animation: migration-flow 3s linear infinite;
            top: 50%;
            transform: translateY(-50%);
        }
        @keyframes migration-flow{
            0%   { left: 0%;   opacity: 0; transform: translateY(-50%) translateY(0); }
            10%  { opacity: 1; }
            90%  { opacity: 1; }
            100% { left: 100%; opacity: 0; transform: translateY(-50%) translateY(-10px); }
        }

/* --- Backup Progress Styles --- */
.progress-circle-bar {
    stroke: #cd0767;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.2s ease-out;
}
@keyframes download-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
.animate-download { animation: download-bounce 1.5s ease-in-out infinite; }

/* Flowing Dotted Line Animation */
@keyframes flow-dash { to { stroke-dashoffset: -20; } }
.data-flow-line {
    stroke-dasharray: 4, 4;
    animation: flow-dash 0.4s linear infinite;
}


        /* --- Fast & Automated Deployment (added) --- */

        /* --- Map Animations --- */
        @keyframes flow-text{
            0%{ offset-distance:0%; opacity:0; }
            10%{ opacity:1; }
            90%{ opacity:1; }
            100%{ offset-distance:100%; opacity:0; }
        }
        .map-label-flow{
            position:absolute;
            font-size:11px;
            font-weight:900;
            color:#ffffff;
            background:#cd0767;
            padding:2px 8px;
            border-radius:4px;
            text-transform:uppercase;
            white-space:nowrap;
            offset-path:path("M50,150 Q200,50 350,150");
            animation:flow-text 3s linear infinite;
            pointer-events:none;
            box-shadow:0 4px 10px rgba(205, 7, 103, 0.4);
        }
        .packet-glow{
            width:14px;
            height:14px;
            background:#fff;
            border:2px solid #cd0767;
            border-radius:50%;
            position:absolute;
            offset-path:path("M50,150 Q200,50 350,150");
            animation:flow-text 3s linear infinite;
            box-shadow:0 0 15px #cd0767;
        }

        /* --- Automation Flow Animations --- */
        @keyframes line-fill{
            0%,10%{ height:0%; }
            30%,40%{ height:45%; }
            60%,70%{ height:100%; }
            90%,100%{ height:100%; opacity:0; }
        }
        @keyframes step-activate{
            0%,5%{ border-color:rgba(255,255,255,0.1); background:transparent; }
            10%,25%{ border-color:#cd0767; background:rgba(205, 7, 103, 0.1); transform:scale(1.02); }
            30%,100%{ border-color:rgba(255,255,255,0.05); background:transparent; }
        }

        .automation-rails{
            position:absolute;
            left:27px;
            top:44px;   /* aligns to center of first step icon */
            bottom:44px;/* aligns to center of last step icon */
            width:2px;
            pointer-events:none;
        }
        .automation-line-bg{
            position:absolute;
            inset:0;
            width:2px;
            background:rgba(255,255,255,0.05);
        }
        .automation-line-fill{
            position:absolute;
            left:0;
            top:0;
            width:2px;
            height:0%;
            background:#cd0767;
            box-shadow:0 0 15px #cd0767;
            animation:line-fill 9s infinite ease-in-out;
        }
        .step-card{
            transition:all .4s ease;
            border:1px solid rgba(255,255,255,0.05);
        }
        .step-trigger-1{ animation:step-activate 9s infinite; }
        .step-trigger-2{ animation:step-activate 9s infinite 3s; }
        .step-trigger-3{ animation:step-activate 9s infinite 6s; }

        .status-badge{
            font-size:9px;
            font-weight:800;
            padding:2px 6px;
            border-radius:99px;
            text-transform:uppercase;
            letter-spacing:.5px;
        }

/* Dark CTA Button (Ready to Go Deeper section) */
        :root {
            --dark-btn: #333333;
            --dark-btn-border: #1a1a1a;
        }

        .dark-butn {
             font-family: 'Harabara', sans-serif;
            background: var(--dark-btn);
            color: #fff;
            padding: 14px 28px;
            font-size: 16px;
            font-weight: 700;
            display: inline-block;
            border-bottom: 5px solid var(--dark-btn-border);
            border-radius: 0 !important;
            text-decoration: none;
            transition: transform 0.1s ease, filter 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.025em;
            cursor: pointer;
        }
        .dark-butn:hover {
            filter: brightness(1.2);
            transform: translateY(-1px);
            color: #fff !important;   /* THIS FIXES THE INVISIBLE TEXT */
        }
        .dark-butn:active {
            transform: translateY(2px);
            border-bottom-width: 2px;
            margin-bottom: 3px;
        }


        /* Stats Section Geometric Background */
        .stats-bg-pattern {
            background-color: #1a1a1a;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 0 L40 40 L80 0 L80 80 L40 40 L0 80 Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
        }


        /* --- Guides & Resources responsive fixes --- */
        /* Prevent cards from shrinking into thin columns on some devices */
        #guides-slider .guide-card { flex: none; width: 100%; }

        @media (min-width: 768px) {
            #guides-slider .guide-card { width: 50%; }
        }
        @media (min-width: 1024px) {
            #guides-slider .guide-card { width: 25%; }
        }

        /* On small screens, stack cards vertically (no horizontal slider) */
        @media (max-width: 767px) {
            #guides-slider { flex-direction: column !important; transform: none !important; }
        }

        /* --- Premium Add-ons mobile overflow fixes --- */
        /* Keep everything inside the card on small screens (prevents stray horizontal scrollbars) */
        #addons .addon-row, 
        #addons #addon-title { min-width: 0; }
        #addons #addon-title { overflow-wrap: anywhere; }
        #addons .addon-row > div { min-width: 0; }

        #addons { overflow-x: clip; }
        #addons .addon-tab-btn { max-width: 100%; }
        #addons #addon-list > div { max-width: 100%; }
        #addons #addon-list .addon-name { overflow-wrap: anywhere; }


    /* --- Support Chat (24/7 Human Support section) --- */
    #chat-window { scrollbar-width: thin; scrollbar-color: rgba(205, 7, 103, 0.3) transparent; scroll-behavior: smooth; }
    #chat-window::-webkit-scrollbar { width: 4px; }
    #chat-window::-webkit-scrollbar-thumb { background-color: rgba(205, 7, 103, 0.3); border-radius: 10px; }
    .chat-bubble { opacity: 0; transform: translateY(10px); transition: all 0.3s ease-out; }
    .chat-bubble.show { opacity: 1; transform: translateY(0); }


        /* --- Added: Next-Gen NVMe VPS Hosting (Hero) required styles --- */
        :root {
            --terminal-bg: #0b0e14;
            --terminal-accent: #161b22;
        }

        /* --- HERO DASHBOARD ANIMATIONS --- */
        @keyframes dashboard-float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }
        @keyframes iops-pulse {
            0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
            50% { transform: scaleY(1.2); opacity: 1; }
        }
        .hero-dashboard { animation: dashboard-float 6s ease-in-out infinite; }

        /* CRISP ULTRA-DARK WIDGET */
        .crisp-widget {
            background: var(--terminal-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.5rem;
            box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
            overflow: hidden;
        }
        .mono-text { font-family: 'JetBrains Mono', monospace; }

        .iops-bar { width: 3px; background: var(--pink); border-radius: 1px; animation: iops-pulse 0.8s ease-in-out infinite; }
        .iops-bar-blue { background: #3b82f6; }

        .gauge-ring {
            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            stroke-dasharray: 301.59;
            stroke-dashoffset: 100;
        }

        /* Slight enhancement to ensure perfectly circular badge (matches provided section) */
        .trust-badge { aspect-ratio: 1 / 1; }

        @media (max-width: 1024px) {
            .hero-dashboard { animation: none; transform: none !important; }
        }


        /* --- Feature Card Styling (Why Choose VPS section) --- */
        .feature-item-card {
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(255, 255, 255, 0.03);
            background: #1e293b;
        }
        .feature-item-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4);
            background: #233045;
            border-color: rgba(205, 7, 103, 0.3);
        }

        /* Glass Icon Box Style (Why Choose VPS section) */
        .glass-icon-box {
            width: 54px;
            height: 54px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            transition: all 0.3s ease;
        }
        .feature-item-card:hover .glass-icon-box {
            background: rgba(205, 7, 103, 0.08);
            border-color: rgba(205, 7, 103, 0.3);
            transform: scale(1.05);
        }



/* ===== FINAL VPS MIGRATION SPACING FIX ===== */
section.vps-migration,
#vps-migration {
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

section.vps-migration .container,
#vps-migration .container {
    max-width: 1400px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
@media (max-width: 768px) {
    section.vps-migration,
    #vps-migration {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}



/* ===== VPS MIGRATION CORNER ALIGN FIX ===== */

section.vps-migration,
#vps-migration {
    padding: 50px 15px !important; /* much smaller side spacing */
}

section.vps-migration .container,
#vps-migration .container {
    max-width: 1600px !important; /* allow wider stretch */
    padding-left: 10px !important;  /* push content closer to left */
    padding-right: 10px !important; /* push content closer to right */
}

@media (max-width: 768px) {
    section.vps-migration,
    #vps-migration {
        padding: 40px 15px !important;
    }
}



/* ===== FINAL VPS MIGRATION VERTICAL TIGHT FIX ===== */

section.vps-migration,
#vps-migration {
    padding-top: 30px !important;   /* Reduced top space */
    padding-bottom: 30px !important; /* Reduced bottom space */
}

@media (max-width: 768px) {
    section.vps-migration,
    #vps-migration {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }
}



/* ===== SCALE WITH PREMIUM ADD-ONS ULTRA TIGHT SPACING FIX ===== */

/* Adjust based on common class or id naming */
section.scale-addons,
#scale-addons,
section.premium-addons {
    padding-top: 10px !important;   /* Minimal top spacing */
    padding-bottom: 10px !important; /* Minimal bottom spacing */
}

/* Remove large margins if present */
section.scale-addons .container,
#scale-addons .container,
section.premium-addons .container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}



/* --- NVMe Metrics Animation Helpers --- */
@keyframes bar-fill { from { width: 0%; } to { width: 100%; } }
.speed-bar-fill { animation: bar-fill 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

@keyframes grid-blink {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}
.metric-grid-item { animation: grid-blink 1.5s infinite ease-in-out; }

@keyframes data-flow-x {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(250%); opacity: 0; }
}
.flow-particle {
  position: absolute;
  height: 3px;
  background: #cd0767;
  border-radius: 99px;
  animation: data-flow-x 1.5s infinite linear;
  filter: drop-shadow(0 0 5px #cd0767);
}
      
      
      
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
      
      
      
#headerTopSecn > .container,
#site-nav > .container,
.breadcumb-list > .container,
footer.footer > .container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#addons .addon-row{
  padding: 1.25rem !important;
  gap: 1rem !important;
}












/* Force the wrapper to behave like Tailwind's: flex items-center gap-4 */
.avatar-stack{
  margin-right: 16px !important; /* creates the missing space */
}

/* Optional: make sure images & badge line up nicely */
.avatar-stack img,
.avatar-stack .trust-badge{
  display: inline-block;
  vertical-align: middle;
}

/* Make avatar stack behave correctly */
.avatar-stack{
  display: flex;
  align-items: center;   /* vertically center everything */
}

/* Make sure badge aligns like images */
.avatar-stack .trust-badge{
  display: flex;
  align-items: center;
  justify-content: center;
}