:root {
    --primary-orange: #FF5F15;
    --secondary-orange: #FFA802;
    --gradient-primary: linear-gradient(135deg, #FF5F15 0%, #FFA802 100%);
    /* Updated to dark theme background */
    --gradient-secondary: linear-gradient(135deg, #FF4136 0%, #FF5F15 50%, #FFA802 100%);

    --gradient-light: linear-gradient(135deg, #0d163e 0%, #1a2456 100%);
    --bg-dark: #0d163e;
    --text-dark: #ffffff;
    --text-light: rgba(255, 255, 255, 0.85);
    --shadow-light: 0 10px 40px rgba(255, 95, 21, 0.1);
    --shadow-hover: 0 20px 60px rgba(255, 95, 21, 0.2);
    --shadow-primary: 0 20px 40px rgba(255, 95, 21, 0.2);
    --border-orange: rgba(255, 95, 21, 0.3);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: 'DM Sans', sans-serif !important;
    line-height: 1.6 !important;
    background: var(--bg-dark);
    color: var(--text-light);
    scroll-behavior: smooth;
    overflow-x: hidden;
}



.container-fluid {
    max-width: 1850px;
}



/* Hero Carousel Container - UPDATED */
.hero-carousel-section {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #1a1f3a 0%, #0a0e27 50%, #050811 100%);
    /* overflow: hidden; */
    padding: clamp(80px, 15vw, 100px) 0 clamp(60px, 12vw, 70px) !important;
    /* margin-top: 1rem; */
}

/* Animated Background */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 95, 21, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 95, 21, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* Floating Particles */
.particles {
    position: absolute;
    inset: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--secondary-orange);
    border-radius: 50%;
    opacity: 0.4;
    animation: particleFloat 15s infinite;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

.particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    left: 20%;
    animation-delay: 2s;
}

.particle:nth-child(3) {
    left: 30%;
    animation-delay: 4s;
}

.particle:nth-child(4) {
    left: 40%;
    animation-delay: 1s;
}

.particle:nth-child(5) {
    left: 50%;
    animation-delay: 3s;
}

.particle:nth-child(6) {
    left: 60%;
    animation-delay: 5s;
}

.particle:nth-child(7) {
    left: 70%;
    animation-delay: 2.5s;
}

.particle:nth-child(8) {
    left: 80%;
    animation-delay: 1.5s;
}

.particle:nth-child(9) {
    left: 90%;
    animation-delay: 3.5s;
}

.particle:nth-child(10) {
    left: 15%;
    animation-delay: 4.5s;
}

/* Glowing Orbs */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: orbPulse 8s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: var(--primary-orange);
    top: -200px;
    right: -100px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--secondary-orange);
    bottom: -150px;
    left: -100px;
    animation-delay: 2s;
}

@keyframes orbPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.25;
    }
}


/* Carousel Structure */
.hero-carousel {
    position: relative;
    z-index: 10;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 0;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



.carousel-track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}


/* Slide Content Layout */


/* Slide Visual - FIXED OVERFLOW */
.slide-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInRight 1s ease-out;
    /* height: 100%; */
    /* max-height: calc(100vh - 200px); */
    /* overflow: hidden; */
    /* Changed from overflow-y: auto */
    width: 100%;
    max-width: 700px;
    padding: 40px 20px;
    align-self: center;
}


.slide-visual::-webkit-scrollbar {
    width: 6px;
}

.slide-visual::-webkit-scrollbar-thumb {
    background: rgba(255, 95, 21, 0.4);
    border-radius: 10px;
}

.slide-visual::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}



/* Slide Text - Consistent Spacing */
.slide-text {
    animation: fadeInLeft 1s ease-out;
    width: 100%;
    max-width: 700px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}


@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

.slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 95, 21, 0.1);
    border: 2px solid rgba(255, 95, 21, 0.3);
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-orange);
    width: fit-content;
}

.slide-badge i {
    font-size: 16px;
}

.slide-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    animation: slideInLeft 1.2s ease-out 0.3s both;
    color: white;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}


.slide-features {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.slide-features li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
}

.slide-features i {
    color: var(--secondary-orange);
    font-size: 18px;
}

.slide-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 20px 40px rgba(255, 95, 21, 0.3);
    width: fit-content;
}

.slide-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(255, 95, 21, 0.5);
}

/* Visual Content */
/* .slide-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeInRight 1s ease-out;
        } */

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* ========================================
   SLIDE 1: BILL PAYMENTS - NEW DESIGN
   ======================================== */
/* Bill Showcase */
.bill-showcase {
    position: relative;
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.bill-phone-frame {
    width: 350px;
    height: 600px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 95, 21, 0.08));
    border: 3px solid rgba(255, 95, 21, 0.4);
    border-radius: 45px;
    padding: 20px;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 95, 21, 0.2);
    position: relative;
    overflow: hidden;
}

.bill-phone-frame::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: rgba(10, 14, 39, 0.9);
    border-radius: 0 0 20px 20px;
    z-index: 10;
}

.bill-phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a1f3a 0%, #0d1428 100%);
    border-radius: 35px;
    padding: 30px 20px 10px;
    overflow-y: auto;
}

.bill-phone-screen::-webkit-scrollbar {
    width: 4px;
}

.bill-phone-screen::-webkit-scrollbar-thumb {
    background: rgba(255, 95, 21, 0.3);
    border-radius: 10px;
}

.bill-app-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 2px solid rgba(255, 95, 21, 0.2);
    margin-bottom: 15px;
}

.bill-header-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 10px 25px rgba(255, 95, 21, 0.4);
}

.bill-header-text {
    flex: 1;
}

.bill-header-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 3px;
}

.bill-header-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.bill-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bill-category-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.bill-category-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 95, 21, 0.4);
    transform: translateX(5px);
}

.bill-cat-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.bill-cat-icon.electricity {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.bill-cat-icon.water {
    background: linear-gradient(135deg, #00D9FF, #0080FF);
}

.bill-cat-icon.gas {
    background: linear-gradient(135deg, #FF4500, #FF6347);
}

.bill-cat-icon.broadband {
    background: linear-gradient(135deg, #9333EA, #C026D3);
}

.bill-cat-info {
    flex: 1;
}

.bill-cat-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 3px;
}

.bill-cat-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--secondary-orange);
    margin-bottom: 2px;
}

.bill-cat-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.bill-pay-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bill-pay-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 95, 21, 0.4);
}

.bill-pay-btn.paid {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
    cursor: default;
}

.bill-pay-btn.urgent {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    animation: pulse 2s infinite;
}

.bill-quick-actions {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin-top: 20px;
}

button.edu-btn-primary {
    height: fit-content;
}

button.edu-btn-secondary {
    height: fit-content;
}

.bill-quick-btn {
    background: rgba(255, 95, 21, 0.1);
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bill-quick-btn:hover {
    background: rgba(255, 95, 21, 0.15);
    border-color: rgba(255, 95, 21, 0.3);
}

.bill-quick-btn i {
    font-size: 18px;
    color: var(--secondary-orange);
}

.bill-quick-btn span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.bill-floating-cards {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.bill-float-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 15px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: float 3s ease-in-out infinite;
}

.bill-float-card.card-1 {
    animation-delay: 0s;
}

.bill-float-card.card-2 {
    animation-delay: 1s;
}

.bill-float-card.card-3 {
    animation-delay: 2s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bill-float-card i {
    font-size: 18px;
    color: var(--secondary-orange);
}

.bill-float-card span {
    font-size: 13px;
    font-weight: 700;
    color: white;
}


/* ========================================
   SLIDE 2: EDUCATION - NEW DESIGN
   ======================================== */
.edu-dashboard {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edu-main-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

.edu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.edu-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.edu-avatar {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 10px 25px rgba(255, 95, 21, 0.4);
}

.edu-profile-info {
    display: flex;
    flex-direction: column;
}

.edu-student-name {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 3px;
}

.edu-student-id {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.edu-notification-badge {
    position: relative;
    width: 45px;
    height: 45px;
    background: rgba(255, 95, 21, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.edu-notification-badge i {
    font-size: 20px;
    color: var(--secondary-orange);
}

.edu-badge-count {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    background: #EF4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
}

.edu-balance-section {
    margin-bottom: 15px;
}

.edu-balance-card {
    background: var(--gradient-primary);
    border-radius: 20px;
    padding: 15px;
    text-align: center;
}

.edu-balance-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    font-weight: 600;
}

.edu-balance-amount {
    font-size: 25px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.edu-balance-deadline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.edu-payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    max-height: 190px;
    /* visible height for 2 fees */
    overflow-y: auto;
    padding-right: 5px;
    /* space for scrollbar */
}

/* Optional: make scrollbar look neat */
.edu-payment-options::-webkit-scrollbar {
    width: 4px;
}

.edu-payment-options::-webkit-scrollbar-thumb {
    background: rgba(255, 95, 21, 0.3);
    border-radius: 10px;
}

.edu-pay-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edu-pay-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 95, 21, 0.4);
    transform: translateX(5px);
}

.edu-option-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
}

.edu-option-icon.tuition {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.edu-option-icon.transport {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
}

.edu-option-icon.hostel {
    background: linear-gradient(135deg, #EC4899, #DB2777);
}

.edu-option-icon.college {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    /* gold tone for college */
}


.edu-option-details {
    flex: 1;
}

.edu-option-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.edu-option-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--secondary-orange);
}

.edu-option-arrow {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
}

.edu-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.edu-btn-primary,
.edu-btn-secondary {
    padding: 14px 20px;
    border-radius: 15px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.edu-btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.edu-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 95, 21, 0.4);
}

.edu-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 95, 21, 0.3);
}

.edu-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.edu-stats-cards {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.edu-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 20px;
    padding: 20px 25px;
    text-align: center;
    min-width: 140px;
}

.edu-stat-card i {
    font-size: 28px;
    color: var(--secondary-orange);
    margin-bottom: 10px;
}

.edu-stat-number {
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.edu-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* ========================================
   SLIDE 4: INSURANCE - NEW DESIGN
   ======================================== */

/* Insurance Display */
.insurance-display {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}



.insurance-main-box::-webkit-scrollbar {
    width: 4px;
}

.insurance-main-box::-webkit-scrollbar-thumb {
    background: rgba(255, 95, 21, 0.3);
    border-radius: 10px;
}

/* Insurance Main Box - FIXED SCROLLING */
.insurance-main-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 95, 21, 0.05));
    backdrop-filter: blur(30px);
    border: 3px solid rgba(255, 95, 21, 0.3);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Added to prevent horizontal scroll */
    width: 100%;
    max-width: 450px;
}



.insurance-header-section {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 95, 21, 0.2);
}

.insurance-logo-circle {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 15px 35px rgba(255, 95, 21, 0.5);
    animation: pulse 3s infinite;
}

.insurance-header-text h3 {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.insurance-header-text p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Insurance Policy Cards - FIXED GRID */
.insurance-policy-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
    /* Ensure full width usage */
}

/* Insurance Policy Item - FIXED WIDTH */
.insurance-policy-item {
    width: 100%;
    min-width: 0;
    /* Prevent overflow */
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.insurance-policy-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.insurance-policy-item:hover::before {
    opacity: 1;
}

.insurance-policy-item.active {
    background: rgba(255, 95, 21, 0.08);
    border-color: rgba(255, 95, 21, 0.4);
}

.insurance-policy-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 95, 21, 0.4);
    transform: translateX(8px);
}

.policy-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    width: fit-content;
}

.policy-type-badge.health {
    background: linear-gradient(135deg, #F43F5E, #BE123C);
    /* pink-red */
}

.policy-type-badge.vehicle {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
    /* teal-blue */
}

.policy-type-badge.life {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    /* purple */
}

.policy-type-badge.travel {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    /* golden-yellow */
}


.policy-type-badge i {
    font-size: 14px;
}

.policy-details {
    flex: 1;
}

.policy-name {
    font-size: 16px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.policy-number {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
}

.policy-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--secondary-orange);
    margin-bottom: 8px;
}

.policy-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 15px;
    width: fit-content;
}

.policy-status.active-status {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.policy-status.due-status {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.3);
    animation: pulse 2s infinite;
}

.policy-status.paid-status {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.policy-renew-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.policy-renew-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 95, 21, 0.4);
}

.policy-renew-btn.urgent {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    animation: pulse 2s infinite;
}

.policy-renew-btn.paid-btn {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
    cursor: default;
}

.policy-renew-btn.paid-btn:hover {
    transform: none;
    box-shadow: none;
}

.insurance-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.benefit-item {
    background: rgba(255, 95, 21, 0.1);
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: rgba(255, 95, 21, 0.15);
    border-color: rgba(255, 95, 21, 0.3);
    transform: translateY(-3px);
}

.benefit-item i {
    font-size: 20px;
    color: var(--secondary-orange);
}

.benefit-item span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.insurance-trust-badges {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.trust-badge {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 20px;
    padding: 18px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 160px;
}

.trust-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    font-size: 22px;
    font-weight: 800;
    color: white;
    margin-bottom: 3px;
}

.trust-text span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* ========================================
   RESPONSIVE DESIGN FOR NEW VISUALS
   ======================================== */
/* Hero Carousel Container - UPDATED */
.hero-carousel-section {
    position: relative;
    /* height: 100vh; */
    background: radial-gradient(ellipse at top, #1a1f3a 0%, #0a0e27 50%, #050811 100%);
    /* overflow: hidden; */
    padding: clamp(80px, 15vw, 100px) 0 clamp(60px, 12vw, 70px) !important;
    /* margin-top: 1rem; */
}

/* Slide Content Layout - FIXED */
.slide-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    align-items: center;
    justify-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1850px;
    height: 100%;
    /* max-height: calc(100vh - 180px); */
    padding: 0 40px;
}

/* Slide Text - Consistent Spacing */
.slide-text {
    animation: fadeInLeft 1s ease-out;
    width: 100%;
    max-width: 700px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}

/* Slide Visual - FIXED OVERFLOW */
.slide-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInRight 1s ease-out;
    /* height: 100%; */
    /* max-height: calc(100vh - 200px); */
    /* overflow: hidden; */
    /* Changed from overflow-y: auto */
    width: 100%;
    max-width: 700px;
    padding: clamp(50px, 5vw, 50px) 0 clamp(50px, 5vw, 50px) !important;
    align-self: center;
}

/* Insurance Main Box - FIXED SCROLLING */
.insurance-main-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 95, 21, 0.05));
    backdrop-filter: blur(30px);
    border: 3px solid rgba(255, 95, 21, 0.3);
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    max-height: 590px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Added to prevent horizontal scroll */
    width: 100%;
    max-width: 600px;
}

/* Insurance Policy Cards - FIXED GRID */
.insurance-policy-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
    /* Ensure full width usage */
}

/* Insurance Policy Item - FIXED WIDTH */
.insurance-policy-item {
    width: 100%;
    min-width: 0;
    /* Prevent overflow */
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Consistent spacing for all slides */
.carousel-slide {
    min-width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



@media (max-width: 1024px) {
    .pmnt-bill-center-logo {
        left: 60%;
    }

    .btn-text {
        font-size: 0.9rem !important;
    }

    .container-fluid.oneee {
        padding: 10px 9px !important;
    }

    .slide-content {
        grid-template-columns: 1fr;
        gap: 30px;
        /* max-height: calc(100vh - 140px); */
        /* overflow-y: auto; */
        padding: 0 20px;
    }

    .slide-visual {
        max-height: none;
        /* overflow: visible; */
        order: 2 !important;
    }

    .slide-text {
        text-align: center;
        order: 2;
        padding: 0px !important;
    }

    .slide-visual {
        order: 1;
        padding: 0px !important;
    }
}

@media (max-width: 767px) {
    .bill-phone-frame {
        width: 320px;
        height: 600px;
    }

    .bill-app-header {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .bill-header-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .bill-category-card {
        padding: 12px;
    }

    .bill-cat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .bill-floating-cards {
        flex-wrap: wrap;
        gap: 10px;
    }

    .bill-float-card {
        padding: 10px 15px;
    }

    .edu-main-card {
        padding: 25px;
    }

    .edu-avatar {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .edu-balance-amount {
        font-size: 32px;
    }

    .edu-action-btns {
        grid-template-columns: 1fr;
    }

    .insurance-main-box {
        padding: 25px;
    }

    .insurance-logo-circle {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .insurance-policy-item {
        padding: 15px;
    }

    .insurance-benefits {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .insurance-trust-badges {
        flex-direction: column;
    }

    .trust-badge {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .bill-phone-frame {
        width: 290px;
        height: 600px;
        padding: 15px;
    }

    .bill-phone-screen {
        padding: 35px 15px 15px;
    }

    .bill-header-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .bill-header-title {
        font-size: 16px;
    }

    .bill-cat-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .bill-cat-name {
        font-size: 13px;
    }

    .bill-cat-amount {
        font-size: 14px;
    }

    .bill-pay-btn {
        padding: 7px 14px;
        font-size: 11px;
    }

    .bill-quick-actions {
        gap: 8px;
    }

    .bill-quick-btn {
        padding: 10px 6px;
    }

    .bill-quick-btn i {
        font-size: 16px;
    }

    .bill-quick-btn span {
        font-size: 9px;
    }

    .bill-float-card {
        padding: 8px 12px;
        font-size: 11px;
    }

    .bill-float-card i {
        font-size: 14px;
    }

    .edu-main-card {
        padding: 20px;
    }

    .edu-avatar {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .edu-student-name {
        font-size: 14px;
    }

    .edu-notification-badge {
        width: 40px;
        height: 40px;
    }

    .edu-notification-badge i {
        font-size: 18px;
    }

    .edu-balance-card {
        padding: 20px;
    }

    .edu-balance-amount {
        font-size: 28px;
    }

    .edu-pay-option {
        padding: 12px;
        gap: 12px;
    }

    .edu-option-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .edu-option-name {
        font-size: 14px;
    }

    .edu-option-amount {
        font-size: 15px;
    }

    .edu-btn-primary,
    .edu-btn-secondary {
        padding: 12px 16px;
        font-size: 13px;
    }

    .edu-stats-cards {
        flex-direction: column;
        gap: 12px;
    }

    .edu-stat-card {
        padding: 18px 20px;
    }

    .insurance-main-box {
        padding: 20px;
    }

    .insurance-header-section {
        gap: 15px;
        margin-bottom: 25px;
    }

    .insurance-logo-circle {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }

    .insurance-header-text h3 {
        font-size: 18px;
    }

    .insurance-policy-item {
        padding: 14px;
        gap: 10px;
    }

    .policy-type-badge {
        padding: 6px 12px;
        font-size: 11px;
    }

    .policy-name {
        font-size: 14px;
    }

    .policy-number {
        font-size: 10px;
    }

    .policy-amount {
        font-size: 18px;
    }

    .policy-status {
        font-size: 11px;
        padding: 5px 10px;
    }

    .policy-renew-btn {
        padding: 8px 20px;
        font-size: 12px;
    }

    .insurance-benefits {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .benefit-item {
        padding: 10px 6px;
    }

    .benefit-item i {
        font-size: 18px;
    }

    .benefit-item span {
        font-size: 10px;
    }

    .trust-badge {
        padding: 15px 20px;
        gap: 12px;
    }

    .trust-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .trust-text strong {
        font-size: 20px;
    }

    .trust-text span {
        font-size: 11px;
    }
}

/* Slide 3: Travel - Ticket Design */
/* Travel Ticket */
.travel-ticket {
    width: 100%;
    max-width: 450px;
}

.ticket-container {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 25px;
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
}

.ticket-container::before,
.ticket-container::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--bg-dark);
    border-radius: 50%;
    border: 2px solid rgba(255, 95, 21, 0.3);
}

.ticket-container::before {
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
}

.ticket-container::after {
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}

.ticket-header {
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 2px dashed rgba(255, 95, 21, 0.3);
    margin-bottom: 25px;
}

.ticket-icons-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.ticket-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
}



/* Individual icon gradients */
.plane-icon {
    background: linear-gradient(135deg, #ff7a00, #ff3c00);
}

.bus-icon {
    background: linear-gradient(135deg, #009efd, #2af598);
}

.train-icon {
    background: linear-gradient(135deg, #845ec2, #d65db1);
}

.hotel-icon {
    background: linear-gradient(135deg, #f7971e, #ffd200);
}

.ticket-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--secondary-orange);
}

.ticket-routes {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: rgba(255, 95, 21, 0.08);
    border-radius: 15px;
    border: 1px solid rgba(255, 95, 21, 0.2);
}

.route-place {
    text-align: center;
}

.route-code {
    font-size: 28px;
    font-weight: 800;
    color: white;
    display: block;
}

.route-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.route-arrow {
    color: var(--secondary-orange);
    font-size: 24px;
}

.ticket-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.ticket-info-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
}

.ticket-info-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
}

.ticket-info-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-orange);
}

/* Slide 5: Payment Methods - Grid */
/* Payment Methods - Premium Card Design */
.payment-showcase {
    width: 100%;
    max-width: 550px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 20px;
}

.payment-card-premium {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 20px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 150px;
}

.payment-card-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 95, 21, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.payment-card-premium:hover::before {
    left: 100%;
}

.payment-card-premium:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(255, 95, 21, 0.6);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 95, 21, 0.08));
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.3);
}

.payment-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
    overflow: hidden;
}

.payment-card-premium:hover .payment-icon-wrapper {
    transform: scale(1.1) rotateY(360deg);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.4);
}

.payment-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #FF5F15, #FFA802, #FF5F15);
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.payment-card-premium:hover .payment-icon-wrapper::after {
    opacity: 1;
    animation: borderGlow 1.5s infinite;
}

@keyframes borderGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Brand Specific Styling */
.payment-logo {
    width: 70px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.payment-card-premium:hover .payment-logo {
    filter: drop-shadow(0 4px 12px rgba(255, 95, 21, 0.3));
}

/* Font Awesome icons for those without logos */
.payment-icon-fa {
    font-size: 45px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.payment-card-premium:hover .payment-icon-fa {
    animation: iconPulse 0.6s ease;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.payment-name-premium {
    font-size: 16px;
    font-weight: 700;
    color: white;
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.payment-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 95, 21, 0.9);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.payment-card-premium:hover .payment-badge {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 767px) {
    .payment-showcase {
        max-width: 400px;
        gap: 20px;
    }

    .payment-card-premium {
        min-height: 160px;
        padding: 25px 15px;
    }

    .payment-icon-wrapper {
        width: 75px;
        height: 75px;
    }

    .payment-logo {
        width: 60px;
    }

    .payment-icon-fa {
        font-size: 38px;
    }

    .payment-name-premium {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .payment-showcase {
        max-width: 320px;
        gap: 15px;
    }

    .payment-card-premium {
        min-height: 140px;
        padding: 20px 12px;
    }

    .payment-icon-wrapper {
        width: 65px;
        height: 65px;
    }

    .payment-logo {
        width: 50px;
    }

    .payment-icon-fa {
        font-size: 32px;
    }

    .payment-name-premium {
        font-size: 13px;
    }
}

/* Carousel Controls */
.carousel-controls {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 20;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 95, 21, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    width: 40px;
    border-radius: 6px;
    background: var(--gradient-primary);
    border-color: var(--primary-orange);
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 95, 21, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
}

.carousel-nav:hover {
    background: var(--gradient-primary);
    border-color: var(--primary-orange);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 30px;
}

.carousel-next {
    right: 30px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .slide-content {
        grid-template-columns: 1fr;
        gap: 30px;
        /* max-height: calc(100vh - 160px); */
        /* height: 100% !important; */
        /* overflow-y: auto; */
    }

    .slide-content::-webkit-scrollbar {
        width: 6px;
    }

    .slide-content::-webkit-scrollbar-thumb {
        background: rgba(255, 95, 21, 0.4);
        border-radius: 10px;
    }

    .slide-visual {
        /* max-height: none; */
        overflow-y: visible;
    }

    .slide-text {
        text-align: center;
        order: 2;
        /* justify-content:center !important;
        margin: auto !important; */
        align-items: center;
    }

    .slide-visual {
        order: 1;
    }


    .slide-features {
        justify-content: center;
    }


    .slide-title {
        font-size: 1.3rem;
        white-space: nowrap;
    }

    .slide-features li {
        font-size: 0.9rem;
        text-align: start;
    }
}

@media (max-width: 767px) {
    .hero-carousel-section {
        padding: 60px 0 80px 0;
        margin-top: 3rem;
    }

    /* .slide-content {
        max-height: calc(100vh - 140px);
    } */

    .bill-phone-frame {
        width: 320px;
        height: 600px;
    }


    .edu-dashboard,
    .insurance-display,
    .travel-ticket,
    .payment-grid {
        max-width: 350px;
    }

    .insurance-main-box {
        max-height: 600px;
    }

    .carousel-slide {
        padding: 0 3%;
    }

    .bill-grid,
    .payment-grid {
        max-width: 350px;
        gap: 15px;
    }

    .bill-card,
    .payment-method {
        padding: 20px 12px;
    }

    .edu-phone {
        width: 280px;
        height: 540px;
    }

    .insurance-policy-cards {
        grid-template-columns: 1fr;
    }

    .insurance-shield {
        width: 300px;
        height: 400px;
    }

    .travel-ticket {
        width: 350px;
        height: 480px;
    }

    .carousel-nav {
        display: none;
    }

    .carousel-controls {
        bottom: -50px;
    }
}

@media (max-width: 480px) {

    .hero-carousel-section {
        padding: 50px 0 70px 0;
    }

    .slide-content {
        /* max-height: calc(100vh - 120px); */
        gap: 20px;
    }

    .bill-phone-frame {
        width: 290px;
        height: 600px;
    }

    .edu-dashboard,
    .insurance-display,
    .travel-ticket {
        max-width: 300px;
    }

    .payment-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 300px;
        gap: 15px;
    }

    .insurance-main-box {
        max-height: 600px;
        padding: 25px;
    }

    .slide-badge {
        font-size: 12px;
        padding: 10px 18px;
    }

    .bill-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
    }

    .payment-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 300px;
    }

    .edu-phone {
        width: 250px;
        height: 500px;
    }

    .insurance-shield {
        width: 260px;
        height: 350px;
    }

    .shield-icon {
        width: 80px;
        height: 80px;
        font-size: 36px;
    }

    .travel-ticket {
        width: 300px;
        height: 450px;
    }

    .route-code {
        font-size: 22px;
    }
}



/* hero section end   */


















.pay-bill-revolution-section {
    position: relative;
    min-height: 86vh;
    background: linear-gradient(135deg, #0a0e1f 0%, #1a1f3a 50%, #0d163e 100%);
    padding: 0px;
    overflow: hidden;
}

/* Animated Background */
.pay-bill-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.pay-bill-main-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

.container-fluid.oneee {
    padding: 60px 40px;
}

.pay-bill-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    animation: payBillOrbFloat 35s ease-in-out infinite;
}

.orb-primary {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #FF5F15, #FFA802);
    top: -250px;
    right: -150px;
}

.orb-secondary {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #FFA802, #FF5F15);
    bottom: -200px;
    left: -150px;
    animation-delay: 12s;
}

.orb-tertiary {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #FF8C00, #FF5F15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 24s;
}

@keyframes payBillOrbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(60px, -60px) scale(1.15) rotate(120deg);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.9) rotate(240deg);
    }
}

.pay-bill-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255, 95, 21, 0.04) 79px, rgba(255, 95, 21, 0.04) 80px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 95, 21, 0.04) 79px, rgba(255, 95, 21, 0.04) 80px);
    animation: payBillGridScroll 50s linear infinite;
}

@keyframes payBillGridScroll {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(80px, 80px);
    }
}

/* ============================================
   LEFT CONTENT ZONE
   ============================================ */

.pay-bill-content-zone {
    position: relative;
    z-index: 2;
    padding: 0px;
    display: flex;
    align-items: center;
}

.pay-bill-content-wrapper {
    max-width: 650px;
    animation: payBillSlideInLeft 1s ease-out;
}

@keyframes payBillSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

/* Top Badge */
.pay-bill-top-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 95, 21, 0.3);
    padding: 14px 28px;
    border-radius: 60px;
    margin-bottom: 35px;
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.pay-bill-badge-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.4), transparent);
    animation: payBillBadgeShine 3s ease-in-out infinite;
}

@keyframes payBillBadgeShine {

    0%,
    100% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(200%);
    }
}

.pay-bill-top-badge i {
    font-size: 20px;
    color: #FF5F15;
    position: relative;
    z-index: 1;
}

.pay-bill-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.pay-bill-badge-title {
    font-size: 14px;
    font-weight: 800;
    color: #FFA802;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.pay-bill-badge-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* Main Heading */
.pay-bill-mega-title {
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: 900;
    color: white;
    line-height: 1.15;
    margin-bottom: 28px;
    letter-spacing: -1px;
}

.pay-bill-gradient-text {
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    animation: payBillTextShine 3.5s ease-in-out infinite;
}

@keyframes payBillTextShine {

    0%,
    100% {
        filter: brightness(1) hue-rotate(0deg);
    }

    50% {
        filter: brightness(1.4) hue-rotate(10deg);
    }
}

/* Rich Description */
.pay-bill-rich-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: 45px;
    max-width: 580px;
}

/* Payment Methods Grid */
.pay-bill-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.pay-bill-method-card {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 95, 21, 0.15);
    border-radius: 20px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pay-bill-method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.08), transparent);
    transition: left 0.6s;
}

.pay-bill-method-card:hover {
    background: rgba(255, 95, 21, 0.08);
    border-color: rgba(255, 95, 21, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255, 95, 21, 0.25);
}

.pay-bill-method-card:hover::before {
    left: 100%;
}

.pay-bill-method-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.pay-bill-method-card:hover .pay-bill-method-icon {
    transform: scale(1.15) rotateY(360deg);
}

.upi-gradient {
    background: linear-gradient(135deg, #00D9FF, #0080FF);
}

.cards-gradient {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.banking-gradient {
    background: linear-gradient(135deg, #22C55E, #16A34A);
}

.wallet-gradient {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.pay-bill-method-text h4 {
    font-size: 17px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
    line-height: 1.3;
}

.pay-bill-method-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0;
}

.pay-bill-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 95, 21, 0.15);
    border: 1px solid rgba(255, 95, 21, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #FFA802;
    width: fit-content;
}

/* Key Features */
.pay-bill-features-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.pay-bill-feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.pay-bill-feature-item i {
    font-size: 18px;
    color: #22C55E;
    flex-shrink: 0;
}

/* CTA Buttons */
.pay-bill-action-zone {
    display: flex;
    gap: 20px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.pay-bill-cta-primary,
.pay-bill-cta-outline {
    padding: 18px 35px;
    border-radius: 60px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pay-bill-cta-primary {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    color: white;
    box-shadow: 0 15px 35px rgba(255, 95, 21, 0.4);
}

.pay-bill-cta-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.pay-bill-cta-primary:hover::before {
    width: 400px;
    height: 400px;
}

.pay-bill-cta-primary:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.6);
}

.pay-bill-cta-primary span,
.pay-bill-cta-primary i {
    position: relative;
    z-index: 1;
}

.pay-bill-cta-outline {
    background: transparent;
    border: 2px solid rgba(255, 95, 21, 0.4);
    color: white;
    backdrop-filter: blur(10px);
}

.pay-bill-cta-outline:hover {
    background: rgba(255, 95, 21, 0.1);
    border-color: rgba(255, 95, 21, 0.6);
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(255, 95, 21, 0.25);
}

/* Trust Metrics */
.pay-bill-metrics-bar {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.pay-bill-metric-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pay-bill-metric-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 95, 21, 0.1);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFA802;
    font-size: 20px;
}

.pay-bill-metric-data {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pay-bill-metric-data strong {
    font-size: 20px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.pay-bill-metric-data span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.pay-bill-metric-divider {
    width: 2px;
    height: 45px;
    background: rgba(255, 95, 21, 0.2);
}

/* ============================================
   RIGHT VIDEO ZONE
   ============================================ */

.pay-bill-visual-zone {
    position: relative;
    z-index: 2;
    /* padding: 80px 60px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-bill-video-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    animation: payBillSlideInRight 1s ease-out 0.3s both;
}

@keyframes payBillSlideInRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

.pay-bill-video-frame {
    position: relative;
    width: 100%;
    height: 600px;
    /* aspect-ratio: 9 / 16; */
    border-radius: 30px;
    overflow: hidden;
    border: 4px solid rgba(255, 95, 21, 0.3);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(255, 95, 21, 0.3);
    animation: payBillVideoFloat 5s ease-in-out infinite;
}

@keyframes payBillVideoFloat {

    0%,
    100% {
        transform: translateY(0) rotateY(-5deg);
    }

    50% {
        transform: translateY(-20px) rotateY(-8deg);
    }
}

/*.pay-bill-video-player {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: fill;*/
/*    object-position: top;*/
/*}*/

.pay-bill-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: linear-gradient(135deg, #0a0e1f 0%, #1a1f3a 50%, #0d163e 100%);

}

.pay-bill-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 95, 21, 0.1) 0%,
            transparent 50%,
            rgba(255, 168, 2, 0.1) 100%);
    pointer-events: none;
}

/* Floating Badges */
.pay-bill-floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(25px);
    border: 2px solid rgba(255, 95, 21, 0.35);
    border-radius: 18px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    animation: payBillBadgeFloat 4s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s;
}

.pay-bill-floating-badge:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(255, 95, 21, 0.35);
}

.badge-top {
    top: -30px;
    left: -40px;
    animation-delay: 0s;
}

.badge-bottom {
    bottom: 0px;
    right: -30px;
    animation-delay: 2s;
}

@keyframes payBillBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.pay-bill-badge-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 95, 21, 0.4);
}

.pay-bill-badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pay-bill-badge-content strong {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 800;
    line-height: 1.2;
}

.pay-bill-badge-content span {
    font-size: 11px;
    color: #666;
    font-weight: 600;
}

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

@media (max-width: 1199px) {

    .pay-bill-content-zone,
    .pay-bill-visual-zone {
        padding: 60px 50px;
    }

    .pay-bill-video-container {
        max-width: 500px;
    }
}

@media (max-width: 991px) {
    .pay-bill-revolution-section {
        padding: 80px 0;
    }

    .pay-bill-content-zone {
        padding: 40px 30px;
    }

    .pay-bill-visual-zone {
        padding: 40px 30px 60px;
        margin-top: 40px;
    }

    .pay-bill-content-wrapper {
        max-width: 100%;
        margin: 0 auto;
    }

    .pay-bill-mega-title {
        text-align: center;
    }

    .pay-bill-rich-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .pay-bill-top-badge {
        margin: 0 auto 30px;
    }

    /* .pay-bill-methods-grid {
        grid-template-columns: 1fr;
    } */

    .pay-bill-action-zone {
        justify-content: center;
    }

    .pay-bill-metrics-bar {
        justify-content: center;
    }

    .pay-bill-features-list {
        align-items: center;
    }
}

@media (max-width: 767px) {

    .container-fluid.oneee {
        padding: 0px 9px !important;
    }

    .pay-bill-revolution-section {
        padding: 60px 0;
    }

    .pay-bill-content-zone,
    .pay-bill-visual-zone {
        padding: 30px 20px;
    }

    .pay-bill-mega-title {
        font-size: 2rem;
    }

    .pay-bill-rich-desc {
        font-size: 1rem;
    }

    .pay-bill-methods-grid {
        gap: 15px;
    }

    .pay-bill-method-card {
        padding: 20px 16px;
    }

    .pay-bill-method-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .pay-bill-action-zone {
        flex-direction: column;
        width: 100%;
    }

    .pay-bill-cta-primary,
    .pay-bill-cta-outline {
        width: 100%;
        justify-content: center;
    }

    .pay-bill-metrics-bar {
        flex-direction: column;
        gap: 20px;
        display: none;
    }

    .pay-bill-metric-divider {
        display: none;
    }

    .pay-bill-video-container {
        max-width: 400px;
    }

    .badge-top {
        top: -20px;
        right: -20px;
    }

    .badge-bottom {
        bottom: -20px;
        left: -20px;
    }
}

@media (max-width: 576px) {
    .pay-bill-method-icon {
        display: none !important;
    }

    .pmnt-bill-center-logo {
        top: 60% !important;
        left: 51% !important;
        transform: translate(-48%, -48%) !important;
    }


    .pay-bill-method-text p {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.5;
        margin: 0;
    }


    .pay-bill-method-text h4 {
        font-size: 1rem;
        font-weight: 700;
        color: white;
        margin-bottom: 5px;
        line-height: 1.3;
    }

    .pay-bill-method-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .pmnt-bill-service-circle {
        top: 44% !important;
        left: 38% !important;
        transform: translate(-44%, -44%) !important;
    }

    .pmnt-bill-logo-badge {
        display: none !important;
    }

    .hero-carousel {
        overflow: hidden;
    }

    .slide-btn {
        padding: 16px 30px;
        font-size: 15px;
    }

    .pay-bill-top-badge {
        padding: 12px 22px;
    }

    .pay-bill-badge-title {
        font-size: 12px;
    }

    .pay-bill-mega-title {
        font-size: 1.75rem;
    }

    .pay-bill-rich-desc {
        font-size: 0.95rem;
    }

    .pay-bill-method-card {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }



    .pay-bill-cta-primary,
    .pay-bill-cta-outline {
        padding: 16px 30px;
        font-size: 15px;
    }

    .pay-bill-video-container {
        max-width: 320px;
    }

    .pay-bill-floating-badge {
        padding: 12px 16px;
    }

    .pay-bill-badge-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .badge-top,
    .badge-bottom {
        position: static;
        margin: 15px auto;
    }

    .services-search-bar {
        display: none !important;
    }
}







.about-nexora-reimagined {
    position: relative;
    min-height: 90vh;
    background: linear-gradient(135deg, #050816 0%, #0a0f1e 25%, #0d1230 50%, #0a0f1e 75%, #050816 100%);
    padding: 0;
    overflow: hidden;
}

.about-nexora-reimagined-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

/* Animated Background */
.about-reimagined-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.about-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    animation: aboutOrbFloat 35s ease-in-out infinite;
}

.about-orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #FF5F15 0%, transparent 70%);
    top: -250px;
    right: -150px;
}

.about-orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #FFA802 0%, transparent 70%);
    bottom: -200px;
    left: -150px;
    animation-delay: 12s;
}

.about-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #FFD93D 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 24s;
}

@keyframes aboutOrbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.95);
    }
}

.about-hex-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l26 15v30L30 60 4 45V15z' fill='none' stroke='%23FF5F15' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 70px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 70%);
    animation: hexDrift 40s linear infinite;
}

@keyframes hexDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 60px 70px;
    }
}

.about-particles-flow {
    position: absolute;
    inset: 0;
}

.about-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 50%;
    opacity: 0;
    animation: particleRise 20s infinite;
}

.about-particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.about-particle:nth-child(2) {
    left: 30%;
    animation-delay: 3s;
}

.about-particle:nth-child(3) {
    left: 50%;
    animation-delay: 6s;
}

.about-particle:nth-child(4) {
    left: 70%;
    animation-delay: 9s;
}

.about-particle:nth-child(5) {
    left: 85%;
    animation-delay: 12s;
}

.about-particle:nth-child(6) {
    left: 20%;
    animation-delay: 15s;
}

@keyframes particleRise {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0);
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(50px);
    }
}

/* ==========================================
   LEFT SIDE - IMAGE SHOWCASE (UNCHANGED)
   ========================================== */

.about-image-showcase {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
}

/* Decorative Rings */
.showcase-deco-ring {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(255, 95, 21, 0.15);
    animation: ringRotate 30s linear infinite;
}

.ring-2 {
    width: 580px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: dashed;
    border-color: rgba(255, 168, 2, 0.1);
    animation: ringRotate 45s linear infinite reverse;
}

.ring-3 {
    width: 460px;
    height: 460px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(255, 95, 21, 0.08);
    animation: ringRotate 20s linear infinite;
}

@keyframes ringRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Floating Data Points */
.showcase-data-point {
    position: absolute;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    animation: dataPointFloat 6s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-data-point:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.3);
}

.point-1 {
    top: 5%;
    right: 10%;
    animation-delay: 0s;
}

.point-2 {
    bottom: 10%;
    left: 5%;
    animation-delay: 2s;
}

.point-3 {
    top: 50%;
    left: -5%;
    animation-delay: 4s;
}

@keyframes dataPointFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.data-point-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    box-shadow: 0 5px 15px rgba(255, 95, 21, 0.4);
}

.data-point-value {
    font-size: 18px;
    font-weight: 800;
    color: white;
    display: block;
    line-height: 1;
}

.data-point-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}

/* Main Image Frame */
.about-image-frame {
    position: relative;
    width: 100%;
    max-height: 750px;
    border-radius: 30px;
    overflow: hidden;
    z-index: 5;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(255, 95, 21, 0.2);
}

.about-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.about-image-frame:hover .about-main-image {
    transform: scale(1.05);
}

.image-glow-effect {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 95, 21, 0.3) 0%, transparent 60%);
    opacity: 0.5;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

.image-border-animate {
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #FF5F15, #FFA802, #FFD93D, #FFA802, #FF5F15);
    background-size: 400% 400%;
    border-radius: 32px;
    z-index: -1;
    animation: borderFlow 5s ease infinite;
}

@keyframes borderFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.image-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Floating Badges */
.showcase-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #FF5F15;
    z-index: 10;
    animation: badgeFloat 4s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.badge-top-left {
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.badge-bottom-right {
    bottom: -10px;
    right: -10px;
    animation-delay: 2s;
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.showcase-badge i {
    font-size: 16px;
}

/* ==========================================
   RIGHT SIDE - NEW PREMIUM TIMELINE LAYOUT
   ========================================== */

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

/* Premium Badge */
.about-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 1px solid rgba(255, 95, 21, 0.4);
    padding: 10px 22px;
    border-radius: 50px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.badge-glow-effect {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 95, 21, 0.3), transparent 30%);
    animation: badgeGlowRotate 4s linear infinite;
}

@keyframes badgeGlowRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.about-top-badge i {
    font-size: 16px;
    color: #FF5F15;
    position: relative;
    z-index: 1;
}

.badge-text {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FFA802;
    position: relative;
    z-index: 1;
}

/* Main Title */
.about-main-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 20px;
}

.title-gradient {
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 50%, #FFD93D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    animation: textShine 3s linear infinite;
}

@keyframes textShine {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

/* Description */
.about-description {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: 35px;
}

/* BENTO GRID LAYOUT - NEW */
.about-features-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

/* Large Feature Card - Spans 12 columns */
.bento-feature-large {
    grid-column: span 12;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 28px;
    padding: 15px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    min-height: 200px;
}

/* Medium Feature Cards - Span 6 columns each */
.bento-feature-medium {
    grid-column: span 6;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 95, 21, 0.15);
    border-radius: 24px;
    padding: 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    min-height: 200px;
}

/* Morphing Background Effect */
.bento-feature-large::before,
.bento-feature-medium::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.8s ease;
    animation: morphBlob 8s ease-in-out infinite;
}

@keyframes morphBlob {

    0%,
    100% {
        transform: translate(0%, 0%) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    25% {
        transform: translate(10%, -10%) scale(1.1);
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    }

    50% {
        transform: translate(-10%, 10%) scale(0.9);
        border-radius: 30% 60% 70% 40% / 60% 30% 70% 40%;
    }

    75% {
        transform: translate(5%, 5%) scale(1.05);
        border-radius: 70% 30% 40% 60% / 40% 70% 50% 60%;
    }
}

.bento-feature-large:hover::before,
.bento-feature-medium:hover::before {
    opacity: 1;
    animation-play-state: paused;
}

/* Ambient Glow on Hover */
.bento-feature-large::after,
.bento-feature-medium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #FF5F15, #FFA802, #FFD93D);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bento-feature-large:hover,
.bento-feature-medium:hover {
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.12), rgba(255, 168, 2, 0.06));
    border-color: rgba(255, 95, 21, 0.5);
    transform: translateY(-8px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(255, 95, 21, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bento-feature-large:hover::after,
.bento-feature-medium:hover::after {
    opacity: 1;
}

/* Card Content Styling */
.bento-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bento-card-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0;
}

/* Floating Icon Orb */
.bento-icon-orb {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 2px solid rgba(255, 95, 21, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24x;
    color: #FFA802;
    position: relative;
    flex-shrink: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bento-icon-orb::before {
    content: '';
    position: absolute;
    inset: -6px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 50%;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.4s ease;
}

.bento-feature-large:hover .bento-icon-orb,
.bento-feature-medium:hover .bento-icon-orb {
    /* background: linear-gradient(135deg, #FF5F15, #FFA802); */
    color: white;
    transform: scale(1.2) rotate(360deg);
    /* box-shadow: 0 10px 40px rgba(255, 95, 21, 0.6); */
}

.bento-feature-large:hover .bento-icon-orb::before,
.bento-feature-medium:hover .bento-icon-orb::before {
    opacity: 1;

}

/* Orbiting Ring */
.icon-orbit-ring {
    position: absolute;
    inset: -8px;
    border: 2px dashed rgba(255, 95, 21, 0.3);
    border-radius: 50%;
    animation: orbitRotate 15s linear infinite;
}

@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.bento-card-content {
    flex: 1;
}

.bento-card-label {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 95, 21, 0.1);
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    color: #FFA802;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.bento-card-title {
    font-size: 18px;
    font-weight: 800;
    color: orange;
    margin: 0 0 12px 0;
    line-height: 1.3;
    transition: all 0.4s ease;
}

.bento-feature-large:hover .bento-card-title,
.bento-feature-medium:hover .bento-card-title {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateX(8px);
}

.bento-card-desc {
    font-size: 16px;
    color: white;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}

.bento-card-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: auto;
    padding-top: 16px;
}

.bento-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.bento-meta-item i {
    color: #FFA802;
    font-size: 16px;
}


/* NEW CIRCULAR STATS DESIGN - Different from bar layout */
.about-stats-circular {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 0px;
    flex-wrap: wrap;
    align-items: center;
}

.circular-stat-item {
    position: relative;
    width: 154px;
    height: 154px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s ease;
    padding: 10px;
}

.circular-stat-item:hover {
    transform: scale(1.1);
}

/* Circular Border */
.stat-circle-border {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #FF5F15, #FFA802, #FFD93D);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: statCircleRotate 8s linear infinite;
}

@keyframes statCircleRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.circular-stat-item:hover .stat-circle-border {
    animation-duration: 2s;
}

/* Inner Circle */
.stat-circle-inner {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(10, 15, 30, 0.95), rgba(5, 8, 22, 0.98));
    border: 1px solid rgba(255, 95, 21, 0.1);
}

.circular-stat-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.circular-stat-number {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    display: block;
}

.circular-stat-label {
    font-size: 14px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

/* Hover Glow */
.stat-hover-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.circular-stat-item:hover .stat-hover-glow {
    opacity: 1;
}

/* NEW CTA DESIGN - Split button style */
.about-cta-split {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.3);
    max-width: 380px;
}

.cta-main-btn {
    flex: 1;
    padding: 18px 30px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.cta-main-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.cta-main-btn:hover::before {
    left: 100%;
}

.cta-main-btn:hover {
    background: linear-gradient(135deg, #FFA802, #FF5F15);
}

.cta-main-btn span {
    font-size: 18px;
    font-weight: 700;
    color: white;
    position: relative;
    z-index: 1;
}

.cta-main-btn i {
    font-size: 14px;
    color: white;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.cta-main-btn:hover i {
    transform: translateX(5px);
}

.cta-icon-btn {
    width: 60px;
    background: rgba(255, 95, 21, 0.15);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.cta-icon-btn i {
    font-size: 18px;
    color: #FFA802;
    transition: all 0.3s ease;
}

.cta-icon-btn:hover {
    background: rgba(255, 95, 21, 0.3);
}

.cta-icon-btn:hover i {
    color: white;
    transform: scale(1.2);
}



@media (max-width: 991px) {
    .bento-feature-medium {
        grid-column: span 12;
    }


    .why-stats-bar {
        padding: 30px 0px !important;
        gap: 0px !important;
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 767px) {


    .bento-feature-large,
    .bento-feature-medium {
        padding: 24px;
        min-height: auto;
    }

    .bento-icon-orb {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }


}

@media (max-width: 576px) {
    .bento-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .bento-icon-orb {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .bento-card-title {
        font-size: 19px;
    }


}

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

@media (max-width: 991px) {
    .about-nexora-reimagined {
        padding: 70px 0;
    }

    .about-image-showcase {
        max-width: 500px;
        margin-bottom: 50px;
    }

    .about-features-timeline {
        padding-left: 25px;
    }

    .timeline-feature-item::before {
        left: -32px;
        width: 14px;
        height: 14px;
    }

    .timeline-feature-item::after {
        left: -19px;
        width: 19px;
    }
}

@media (max-width: 767px) {
    .about-nexora-reimagined {
        padding: 60px 0;
    }

    .about-image-frame {
        height: 400px;
    }

    .about-main-title {
        font-size: 1.85rem;
    }

    .about-stats-circular {
        gap: 15px;
    }

    .circular-stat-item {
        width: 95px;
        height: 95px;
    }

    .circular-stat-number {
        font-size: 18px;
    }

    .timeline-feature-desc {
        padding-left: 0;
        margin-top: 10px;
    }

    .about-cta-split {
        max-width: 100%;
    }

    .point-3 {
        left: auto;
        right: 5%;
    }
}

@media (max-width: 576px) {
    .about-image-showcase {
        padding: 20px;
    }

    .about-image-frame {
        height: 350px;
    }

    .ring-1,
    .ring-2,
    .ring-3 {
        width: 380px;
        height: 380px;
    }

    .showcase-data-point {
        padding: 10px 14px;
    }

    .data-point-value {
        font-size: 16px;
    }

    .about-main-title {
        font-size: 1.6rem;
    }

    .about-features-timeline {
        padding-left: 22px;
    }

    .timeline-feature-item {
        padding: 15px 18px;
    }

    .timeline-feature-item::before {
        left: -28px;
        width: 12px;
        height: 12px;
    }

    .timeline-feature-item::after {
        left: -17px;
        width: 17px;
    }

    .timeline-icon-box {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .timeline-feature-title {
        font-size: 15px;
    }

    .about-stats-circular {
        gap: 12px;
    }

    .circular-stat-item {
        width: 85px;
        height: 85px;
    }

    .circular-stat-number {
        font-size: 16px;
    }

    .circular-stat-label {
        font-size: 8px;
    }

    .about-cta-split {
        flex-direction: column;
        border-radius: 20px;
    }

    .cta-main-btn {
        border-radius: 20px 20px 0 0;
        padding: 16px 25px;
    }

    .cta-icon-btn {
        width: 100%;
        height: 50px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 20px 20px;
    }
}




/* Premium Services Section */
.premium-services-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d163e 100%);
    min-height: 100vh;
    overflow: visible;
}

/* Animated Background */
.services-animated-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #FFA802, #FF5F15);
    bottom: -150px;
    left: -100px;
    animation-delay: 7s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

.bg-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 95, 21, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 95, 21, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* Left Panel Styling - Updated */
.services-left-panel {
    position: sticky;
    top: 120px;
    height: fit-content;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 95, 21, 0.15);
    border-radius: 30px;
    padding: 30px;
    margin-right: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10;
    /* Added z-index */
    align-self: flex-start;
    /* Added for proper alignment */
}

/* Panel Header */
.panel-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255, 95, 21, 0.2);
}

.header-icon-box {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 42px;
    color: #ffffff;
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.5);
    animation: iconPulse 3s ease-in-out infinite;
    position: relative;
}

.header-icon-box::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 24px;
    z-index: -1;
    opacity: 0.3;
    filter: blur(15px);
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 15px 40px rgba(255, 95, 21, 0.5);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 20px 50px rgba(255, 95, 21, 0.7);
    }
}

.panel-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 15px;
}

.panel-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: 500;
}

/* Panel Filters - Updated */
.panel-filters {
    margin-bottom: 0;
}

.filter-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 5px;
}

.filter-title i {
    color: #FFA802;
    font-size: 20px;
}

.filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 95, 21, 0.15);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.15), transparent);
    transition: left 0.6s;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn:hover {
    background: rgba(255, 95, 21, 0.1);
    border-color: rgba(255, 95, 21, 0.35);
    transform: translateX(8px);
    color: #FFA802;
    box-shadow: 0 8px 25px rgba(255, 95, 21, 0.2);
}

.filter-btn.active {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 12px 35px rgba(255, 95, 21, 0.45);
    transform: translateX(8px);
}

.filter-btn.active::before {
    display: none;
}

.btn-icon-wrapper {
    width: 42px;
    height: 42px;
    background: rgba(255, 95, 21, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.filter-btn.active .btn-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
}

.filter-btn:hover .btn-icon-wrapper {
    background: rgba(255, 95, 21, 0.25);
    transform: scale(1.1);
}

.filter-btn.active:hover .btn-icon-wrapper {
    background: rgba(255, 255, 255, 0.3);
}

.btn-text {
    flex: 1;
    text-align: left;
    margin-left: 15px;
    font-size: 15px;
}

.btn-count {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.filter-btn.active .btn-count {
    background: rgba(255, 255, 255, 0.25);
}

.filter-btn:hover .btn-count {
    background: rgba(255, 95, 21, 0.3);
}

.filter-btn.active:hover .btn-count {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

/* Responsive Updates */
@media (max-width: 1199px) {
    .services-left-panel {
        margin-right: 20px;
        padding: 35px 25px;
    }

    .panel-title {
        font-size: 30px;
    }

    .header-icon-box {
        width: 80px;
        height: 80px;
        font-size: 38px;
    }

    .filter-btn {
        padding: 16px 6px;
    }

    .btn-icon-wrapper {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .services-left-panel {
        position: relative;
        top: 0;
        margin-right: 0;
        margin-bottom: 40px;
    }

    .filter-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .services-left-panel {
        padding: 30px 20px;
        border-radius: 25px;
    }

    .header-icon-box {
        width: 70px;
        height: 70px;
        font-size: 34px;
    }

    .panel-title {
        font-size: 1.3rem !important;
    }

    .panel-subtitle {
        font-size: 0.9rem !important;
    }

    .filter-title {
        font-size: 16px;
    }

    .filter-buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .filter-btn {
        padding: 15px 18px;
        font-size: 15px;
    }

    .btn-icon-wrapper {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .btn-text {
        margin-left: 12px;
        font-size: 14px;
    }

    .btn-count {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .header-icon-box {
        width: 65px;
        height: 65px;
        font-size: 32px;
    }

    .panel-title {
        font-size: 1.3rem !important;
    }

    .filter-btn {
        padding: 14px 16px;
    }

    .btn-icon-wrapper {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}

/* Right Content Area */
.services-right-content {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    /* Ensure enough height for scrolling */
}

/* Search Bar */
.services-search-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    align-items: center;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
}

.search-input-wrapper i {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
}

.search-input {
    width: 100%;
    padding: 18px 25px 18px 60px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 15px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
    outline: none;
    border-color: rgba(255, 95, 21, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(255, 95, 21, 0.2);
}

.view-toggle-btn {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 50%;
    color: #FFA802;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-btn:hover {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-color: transparent;
    color: #ffffff;
    transform: rotate(90deg);
    box-shadow: 0 10px 30px rgba(255, 95, 21, 0.4);
}

/* Premium Cards Grid */
.premium-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    position: relative;
}

/* Premium Service Card */
.premium-service-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 95, 21, 0.15);
    border-radius: 25px;
    padding: 20px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.service-badge img {
    width: 44px;
}

/* Shine Effect */
.card-shine-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: rotate(45deg);
    transition: all 0.6s;
    opacity: 0;
}

.premium-service-card:hover .card-shine-effect {
    left: 100%;
    opacity: 1;
}

.premium-service-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 95, 21, 0.4);
    transform: translateY(-10px) rotateX(2deg);
    box-shadow: 0 30px 70px rgba(255, 95, 21, 0.3);
}

/* Card Header */
.card-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.service-badge {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ffffff;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.premium-service-card:hover .service-badge {
    transform: scale(1.15) rotateY(360deg);
}

/* Badge Gradients */
/*.electricity-badge {*/
/*    background: linear-gradient(135deg, #FFD700, #FFA500);*/
/*}*/

/*.mobile-badge {*/
/*    background: linear-gradient(135deg, #00D9FF, #0080FF);*/
/*}*/

/*.dth-badge {*/
/*    background: linear-gradient(135deg, #8A2BE2, #4B0082);*/
/*}*/

/*.gas-badge {*/
/*    background: linear-gradient(135deg, #FF6347, #FF4500);*/
/*}*/

/*.water-badge {*/
/*    background: linear-gradient(135deg, #1E90FF, #0000CD);*/
/*}*/

/*.broadband-badge {*/
/*    background: linear-gradient(135deg, #32CD32, #228B22);*/
/*}*/

/*.insurance-badge {*/
/*    background: linear-gradient(135deg, #DC143C, #B22222);*/
/*}*/

/*.loan-badge {*/
/*    background: linear-gradient(135deg, #FF8C00, #FF7F50);*/
/*}*/

/*.education-badge {*/
/*    background: linear-gradient(135deg, #9370DB, #8B008B);*/
/*}*/

/*.credit-badge {*/
/*    background: linear-gradient(135deg, #4169E1, #0000FF);*/
/*}*/

/*.flight-badge {*/
/*    background: linear-gradient(135deg, #FF4500, #FF6347);*/
/*}*/

/*.hotel-badge {*/
/*    background: linear-gradient(135deg, #F7971E, #FFD200);*/
/*}*/

/*.bus-badge {*/
/*    background: linear-gradient(135deg, #009efd, #2af598);*/
/*}*/

/*.fastag-badge {*/
/*    background: linear-gradient(135deg, #00FF7F, #00FA9A);*/
/*}*/

/*.cable-badge {*/
/*    background: linear-gradient(135deg, #FF69B4, #FF1493);*/
/*}*/

/*.subscription-badge {*/
/*    background: linear-gradient(135deg, #845ec2, #d65db1);*/
/*}*/

.popular-tag {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: tagBounce 2s ease-in-out infinite;
}

@keyframes tagBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Card Body */
.card-body-section {
    margin-bottom: 25px;
}

.service-title {
    font-size: 18px;
    font-weight: 700;
    color: orange;
    margin-bottom: 12px;
    line-height: 1.3;
}

.service-description {
    font-size: 16px;
    color: white;
    line-height: 1.6;
    margin-bottom: 18px;
}

.service-features {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.feature-tag {
    background: rgba(255, 95, 21, 0.1);
    border: 1px solid rgba(255, 95, 21, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.feature-tag i {
    color: #FFA802;
    font-size: 13px;
}

.premium-service-card:hover .feature-tag {
    background: rgba(255, 95, 21, 0.15);
    border-color: rgba(255, 95, 21, 0.3);
}

/* Card Footer */
.card-footer-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.service-cta-btn {
    flex: 1;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border: none;
    color: #ffffff;
    padding: 12px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(255, 95, 21, 0.3);
    position: relative;
    overflow: hidden;
}

.service-cta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.service-cta-btn:hover::before {
    width: 300px;
    height: 300px;
}

.service-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.5);
}

.service-cta-btn i {
    transition: transform 0.3s ease;
}

.service-cta-btn:hover i {
    transform: translateX(5px);
}

.service-info-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFA802;
    font-size: 18px;
    cursor: help;
    transition: all 0.3s ease;
    position: relative;
}

.service-info-icon:hover {
    background: rgba(255, 95, 21, 0.15);
    border-color: rgba(255, 95, 21, 0.4);
    transform: scale(1.1);
}

.service-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.service-info-icon::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 15px;
    border: 8px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.service-info-icon:hover::after,
.service-info-icon:hover::before {
    opacity: 1;
}

/* No Results Message */
.no-results-message {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.no-results-message i {
    font-size: 80px;
    color: rgba(255, 95, 21, 0.3);
    margin-bottom: 25px;
}

.no-results-message h3 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.no-results-message p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

/* List View Mode */
.premium-cards-grid.list-view {
    grid-template-columns: 1fr;
}

.premium-cards-grid.list-view .premium-service-card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 25px 30px;
}

.premium-cards-grid.list-view .card-header-section {
    margin-bottom: 0;
}

.premium-cards-grid.list-view .service-badge {
    width: 60px;
    height: 60px;
    font-size: 28px;
}

.premium-cards-grid.list-view .card-body-section {
    flex: 1;
    margin-bottom: 0;
}

.premium-cards-grid.list-view .card-footer-section {
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .premium-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 1199px) {
    .services-left-panel {
        margin-right: 20px;
        padding: 30px 25px;
    }

    .panel-title {
        font-size: 28px;
    }

    .header-icon-box {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    .premium-services-section {
        padding: 80px 0;
    }

    .services-left-panel {
        position: relative;
        top: 0;
        margin-right: 0;
        margin-bottom: 40px;
        z-index: auto;
    }

    .premium-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }

    .panel-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .stat-item {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .premium-services-section {
        padding: 60px 0;
    }

    .services-left-panel {
        padding: 25px 20px;
        border-radius: 25px;
    }

    .header-icon-box {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }



    .panel-stats {
        grid-template-columns: 1fr;
    }

    .filter-buttons {
        gap: 10px;
    }

    .filter-btn {
        padding: 14px 18px;
        font-size: 14px;
    }

    .services-search-bar {
        flex-direction: column;
    }

    .view-toggle-btn {
        /* width: auto; */
        height: 50px;
        border-radius: 25px;
        /* display: none; */
    }


    .premium-cards-grid.list-view .premium-service-card {
        flex-direction: column;
    }


    .premium-cards-grid.list-view .card-header-section {
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }


    .premium-cards-grid.list-view .card-footer-section {
        /* flex-shrink: 0; */
        display: flex;
        width: 100%;
    }

    .premium-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .premium-service-card {
        padding: 25px;
    }

    .service-badge {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .service-title {
        font-size: 20px;
    }

    .card-footer-section {
        flex-direction: column;
    }

    .service-cta-btn {
        width: 100%;
    }

    .service-info-icon {
        width: 100%;
        height: 45px;
        border-radius: 25px;
    }

    .service-info-icon::after {
        right: 50%;
        transform: translateX(50%);
        white-space: normal;
        max-width: 250px;
        text-align: center;
    }

    .service-info-icon::before {
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 576px) {




    .stat-number {
        font-size: 24px;
    }

    .filter-btn {
        padding: 12px 16px;
    }

    .btn-icon {
        font-size: 18px;
    }

    .search-input {
        padding: 16px 20px 16px 55px;
        font-size: 15px;
    }

    .service-badge {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }

    .service-title {
        font-size: 18px;
    }

    .service-description {
        font-size: 13px;
    }

    .service-cta-btn {
        padding: 13px 22px;
        font-size: 14px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.premium-service-card {
    animation: fadeInUp 0.6s ease-out backwards;
}

.premium-service-card:nth-child(1) {
    animation-delay: 0.1s;
}

.premium-service-card:nth-child(2) {
    animation-delay: 0.15s;
}

.premium-service-card:nth-child(3) {
    animation-delay: 0.2s;
}

.premium-service-card:nth-child(4) {
    animation-delay: 0.25s;
}

.premium-service-card:nth-child(5) {
    animation-delay: 0.3s;
}

.premium-service-card:nth-child(6) {
    animation-delay: 0.35s;
}

.premium-service-card:nth-child(7) {
    animation-delay: 0.4s;
}

.premium-service-card:nth-child(8) {
    animation-delay: 0.45s;
}

.premium-service-card:nth-child(9) {
    animation-delay: 0.5s;
}

.premium-service-card:nth-child(10) {
    animation-delay: 0.55s;
}

.premium-service-card:nth-child(11) {
    animation-delay: 0.6s;
}

.premium-service-card:nth-child(12) {
    animation-delay: 0.65s;
}

.premium-service-card:nth-child(13) {
    animation-delay: 0.7s;
}

.premium-service-card:nth-child(14) {
    animation-delay: 0.75s;
}

.premium-service-card:nth-child(15) {
    animation-delay: 0.8s;
}

.premium-service-card:nth-child(16) {
    animation-delay: 0.85s;
}

/* Hide filtered cards */
.premium-service-card.hidden {
    display: none;
}


/* App Download section style start  */

/* Android App Showcase Section */

.n1pay-download-premium-section {
    position: relative;
    min-height: 90vh;
    background: linear-gradient(135deg, #050816 0%, #0a0f1e 25%, #0d1230 50%, #0a0f1e 75%, #050816 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
}

.n1pay-download-premium-section-main-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

/* Advanced Background */
.n1pay-bg-universe {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.n1pay-cosmic-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(200px);
    opacity: 0.15;
    animation: cosmicFloat 40s ease-in-out infinite;
}

.orb-primary {
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle, #FF5F15 0%, #FFA802 40%, transparent 70%);
    top: -500px;
    right: -400px;
}

.orb-secondary {
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, #8B5CF6 0%, #EC4899 40%, transparent 70%);
    bottom: -350px;
    left: -300px;
    animation-delay: 20s;
}

.orb-tertiary {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #3B82F6 0%, #06B6D4 40%, transparent 70%);
    top: 50%;
    left: 50%;
    animation-delay: 30s;
}

@keyframes cosmicFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(120px, -100px) scale(1.2);
    }

    66% {
        transform: translate(-100px, 100px) scale(0.9);
    }
}

.n1pay-grid-matrix {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 95, 21, 0.03) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(255, 95, 21, 0.03) 1.5px, transparent 1.5px);
    background-size: 100px 100px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
}

/* LEFT SIDE - Enhanced Phone Showcase */
.n1pay-phone-showcase {
    position: relative;
    z-index: 2;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n1pay-phone-wrapper {
    position: relative;
    width: 100%;
    max-width: 650px;
    padding: 80px 40px;
}

/* Enhanced Decorative Rings */
.n1pay-deco-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.deco-ring-1 {
    width: 700px;
    height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 95, 21, 0.08);
    border-style: dashed;
    animation: ringRotate 50s linear infinite;
}

.deco-ring-2 {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(139, 92, 246, 0.08);
    animation: ringRotate 40s linear infinite reverse;
}

.deco-ring-3 {
    width: 800px;
    height: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(59, 130, 246, 0.06);
    animation: ringRotate 60s linear infinite;
}

@keyframes ringRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Enhanced Phone Display */
.n1pay-phone-display {
    position: relative;
    z-index: 10;
    animation: phoneFloat 8s ease-in-out infinite;
    filter: drop-shadow(0 60px 120px rgba(255, 95, 21, 0.4));
}

@keyframes phoneFloat {

    0%,
    100% {
        transform: translateY(0) rotateY(-5deg) rotateZ(-1deg);
    }

    50% {
        transform: translateY(-30px) rotateY(-8deg) rotateZ(-2deg);
    }
}

.n1pay-phone-display img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

/* Enhanced Phone Glow */
.n1pay-phone-glow-layer {
    position: absolute;
    inset: -10%;
    background: linear-gradient(135deg, #ff5f15be, #ffa602b9, #ffd83d8e, #ffa602bd, #ff5f15b4);
    background-size: 400% 400%;
    border-radius: 80px;
    z-index: -1;
    filter: blur(60px);
    opacity: 0.5;
    animation: glowPulse 10s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        background-position: 0% 50%;
        opacity: 0.4;
        transform: scale(0.95);
    }

    50% {
        background-position: 100% 50%;
        opacity: 0.7;
        transform: scale(1.08);
    }
}

.n1pay-phone-shadow-base {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 150px;
    background: radial-gradient(ellipse, rgba(255, 95, 21, 0.6) 0%, transparent 70%);
    filter: blur(60px);
    animation: shadowPulse 8s ease-in-out infinite;
}

@keyframes shadowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.9;
        transform: translateX(-50%) scale(1.2);
    }
}

/* Enhanced Floating Info Badges */
.n1pay-info-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 95, 21, 0.4);
    border-radius: 24px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
    animation: badgeFloat 7s ease-in-out infinite;
}

.badge-pos-1 {
    top: 5%;
    left: 32%;
    animation-delay: 0s;
}

.badge-pos-2 {
    bottom: 12%;
    right: -10%;
    animation-delay: 2.5s;
}

.badge-pos-3 {
    BOTTOM: 12%;
    left: -12%;
    animation-delay: 5s;
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}

.n1pay-badge-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 10px 25px rgba(255, 95, 21, 0.5);
}

.n1pay-badge-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.n1pay-badge-content strong {
    font-size: 17px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
}

.n1pay-badge-content span {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
}

/* RIGHT SIDE - Premium Redesigned Content */
.n1pay-content-area {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}



/* Premium Badge */
.n1pay-launch-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.5);
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 30px;
    overflow: hidden;
}

.n1pay-badge-spinner {
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(255, 95, 21, 0.6), transparent 40%);
    animation: spinBadge 4s linear infinite;
}

@keyframes spinBadge {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.n1pay-launch-badge i {
    font-size: 16px;
    color: #FF5F15;
    position: relative;
    z-index: 2;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.n1pay-launch-badge span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
    position: relative;
    z-index: 2;
}

/* Headline Section */
.n1pay-headline-zone {
    margin-bottom: 20px;
}

.n1pay-main-headline {
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: 900;
    color: white;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -1.5px;
}

.n1pay-gradient-shine {
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 25%, #FFD93D 50%, #FFA802 75%, #FF5F15 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShine 4s linear infinite;
    display: inline-block;
}

@keyframes gradientShine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }
}

.n1pay-sub-description {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Compact Features List */
.n1pay-features-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

/* Enhanced Feature Item Hover */
.n1pay-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.n1pay-feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.1), rgba(255, 168, 2, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.n1pay-feature-item:hover {
    background: rgba(255, 95, 21, 0.12);
    border-color: rgba(255, 95, 21, 0.6);
    transform: translateX(12px) scale(1.02);
    box-shadow: 0 12px 35px rgba(255, 95, 21, 0.25);
}

.n1pay-feature-item:hover::before {
    opacity: 1;
}

.n1pay-feature-icon-mini {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-mini-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.icon-mini-2 {
    background: linear-gradient(135deg, #22C55E, #16A34A);
}

.icon-mini-3 {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.icon-mini-4 {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.n1pay-feature-item:hover .n1pay-feature-icon-mini {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.n1pay-feature-text {
    font-size: 14px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Download Section */
.n1pay-download-section {
    margin-bottom: 35px;
}

.n1pay-section-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.n1pay-download-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.n1pay-feature-item:hover .n1pay-feature-text {
    letter-spacing: 0.5px;
}

/* Enhanced Store Button Hover */
.n1pay-store-button {
    position: relative;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: block;
}

.n1pay-store-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.15));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.n1pay-store-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 95, 21, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.n1pay-store-button:hover {
    background: rgba(255, 95, 21, 0.15);
    border-color: rgba(255, 95, 21, 0.8);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 60px rgba(255, 95, 21, 0.4);
}


.n1pay-store-button:hover::before {
    opacity: 1;
}

.n1pay-store-button:hover::after {
    width: 300px;
    height: 300px;
}

.n1pay-button-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.n1pay-store-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.n1pay-store-button:hover .n1pay-store-icon {
    transform: scale(1.2) rotate(10deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.btn-google .n1pay-store-icon {
    color: #34A853;
}

.btn-apple .n1pay-store-icon {
    color: white;
}

.n1pay-store-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.n1pay-store-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.n1pay-store-name {
    font-size: 16px;
    font-weight: 800;
    color: white;
    transition: all 0.3s ease;
}

.n1pay-store-button:hover .n1pay-store-name {
    letter-spacing: 1px;
}


/* Enhanced QR Card Hover */
.n1pay-qr-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 18px;
    margin-bottom: 35px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.n1pay-qr-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.08), rgba(255, 168, 2, 0.08));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.n1pay-qr-card:hover {
    background: rgba(255, 95, 21, 0.08);
    border-color: rgba(255, 95, 21, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.25);
}

.n1pay-qr-card:hover::before {
    opacity: 1;
}


.n1pay-qr-box {
    width: 90px;
    height: 90px;
    background: white;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.n1pay-qr-card:hover .n1pay-qr-box {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.4);
}

.n1pay-qr-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.n1pay-qr-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.n1pay-qr-info h5 {
    font-size: 15px;
    font-weight: 800;
    color: white;
    margin: 0 0 6px 0;
    transition: all 0.3s ease;
}

.n1pay-qr-card:hover .n1pay-qr-info h5 {
    letter-spacing: 0.5px;
    color: #FFA802;
}

.n1pay-qr-info p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.n1pay-qr-card:hover .n1pay-qr-info p {
    color: rgba(255, 255, 255, 0.8);
}






/* Premium Content Inner Wrapper */
.n1pay-content-inner {
    /* max-width: 660px; */
    /* padding: 0px 60px; */
}

/* Enhanced Sub Description */
.n1pay-sub-description {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: 35px;
    font-weight: 400;
}

/* Mini Stats Grid */
.n1pay-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.n1pay-stat-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 95, 21, 0.25);
    border-radius: 16px;
    padding: 18px 12px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.n1pay-stat-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.1), rgba(255, 168, 2, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.n1pay-stat-box:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 95, 21, 0.6);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.25);
}

.n1pay-stat-box:hover::before {
    opacity: 1;
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

.stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

/* Premium Features Grid */
.n1pay-features-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.n1pay-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 95, 21, 0.2);
    border-radius: 20px;
    padding: 14px 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.feature-card-glow {
    position: absolute;
    inset: -100%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 95, 21, 0.3), transparent 30%);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rotateGlow 4s linear infinite;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.n1pay-feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 95, 21, 0.6);
    background: rgba(255, 95, 21, 0.08);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.3);
}

.n1pay-feature-card:hover .feature-card-glow {
    opacity: 1;
}

.feature-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.n1pay-feature-card:hover .feature-icon-box {
    transform: scale(1.15) rotate(-5deg);
}

.icon-lightning {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    box-shadow: 0 10px 30px rgba(255, 165, 0, 0.4);
}

.icon-shield {
    background: linear-gradient(135deg, #22C55E, #16A34A);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
}

.icon-ai {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.icon-support {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.n1pay-feature-card h4 {
    font-size: 18px;
    font-weight: 800;
    color: #FFA802;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.n1pay-feature-card:hover h4 {
    color: #FFA802;
    letter-spacing: 0.5px;
}

.n1pay-feature-card p {
    font-size: 16px;
    color: white;
    line-height: 1.5;
    margin: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.n1pay-feature-card:hover p {
    color: rgba(255, 255, 255, 0.85);
}

/* Download CTA Section */
/* .n1pay-download-cta {
    margin-bottom: 35px;
} */

.cta-headline {
    font-size: 22px;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.5px;
}

.cta-headline i {
    color: #FF5F15;
    font-size: 20px;
    animation: downloadBounce 2s ease-in-out infinite;
}

@keyframes downloadBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Premium Store Buttons */
.n1pay-store-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.n1pay-premium-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 18px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-btn-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.n1pay-premium-button:hover .premium-btn-glow {
    opacity: 1;
    animation: btnGlowSlide 1.5s ease-in-out infinite;
}

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

    100% {
        transform: translateX(100%);
    }
}

.n1pay-premium-button:hover {
    transform: translateX(10px);
    border-color: rgba(255, 95, 21, 0.8);
    background: rgba(255, 95, 21, 0.12);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.35);
}

.premium-btn-content {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.premium-btn-content i {
    font-size: 36px;
    transition: all 0.4s ease;
}

.btn-google-premium i {
    color: #34A853;
}

.btn-apple-premium i {
    color: white;
}

.n1pay-premium-button:hover .premium-btn-content i {
    transform: scale(1.2) rotate(10deg);
}

.premium-btn-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-store {
    font-size: 20px;
    color: white;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.n1pay-premium-button:hover .btn-store {
    letter-spacing: 1.5px;
}

.btn-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255, 95, 21, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.n1pay-premium-button:hover .btn-arrow {
    background: rgba(255, 95, 21, 0.8);
    transform: translateX(8px);
}

/* Premium QR Card */
.n1pay-qr-premium {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 95, 21, 0.25);
    border-radius: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.n1pay-qr-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.08), rgba(255, 168, 2, 0.08));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.n1pay-qr-premium:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 95, 21, 0.5);
    box-shadow: 0 25px 60px rgba(255, 95, 21, 0.3);
}

.n1pay-qr-premium:hover::before {
    opacity: 1;
}

.qr-premium-left {
    position: relative;
    z-index: 2;
}

.qr-scan-box {
    width: 100px;
    height: 100px;
    background: white;
    padding: 12px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.n1pay-qr-premium:hover .qr-scan-box {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.5);
}

.qr-scan-corners {
    position: absolute;
    inset: -6px;
    pointer-events: none;
}

.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #FF5F15;
}

.corner-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.corner-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-radius: 0 8px 0 0;
}

.corner-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 8px;
}

.corner-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

.qr-scan-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-premium-right {
    flex: 1;
    position: relative;
    z-index: 2;
}

.qr-icon-pulse {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    margin-bottom: 12px;
    animation: iconPulseAnim 2s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(255, 95, 21, 0.4);
}

@keyframes iconPulseAnim {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(255, 95, 21, 0.4);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 15px 40px rgba(255, 95, 21, 0.6);
    }
}

.qr-premium-right h4 {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.n1pay-qr-premium:hover .qr-premium-right h4 {
    color: #FFA802;
    letter-spacing: 0.5px;
}

.qr-premium-right p {
    font-size: 18px;
    color: white;
    line-height: 1.6;
    margin: 0;
    transition: all 0.3s ease;
}

.n1pay-qr-premium:hover .qr-premium-right p {
    color: rgba(255, 255, 255, 0.85);
}

/* Trust Badges */
.n1pay-trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.trust-badge:hover {
    background: rgba(255, 95, 21, 0.1);
    border-color: rgba(255, 95, 21, 0.5);
    transform: translateY(-3px);
}

.trust-badge i {
    color: #22C55E;
    font-size: 16px;
}

.trust-badge span {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
}

/* RESPONSIVE DESIGN - APP DOWNLOAD SECTION */
/* ============================================
   RESPONSIVE DESIGN - APP DOWNLOAD SECTION
   Complete Responsive Code (Replace All Existing)
   ============================================ */

/* Extra Large Screens (1400px - 1600px) */
@media (max-width: 1600px) {
    .n1pay-download-premium-section-main-card {
        padding: 35px;
    }

    .n1pay-phone-wrapper {
        max-width: 600px;
        padding: 70px 35px;
    }

    .deco-ring-1 {
        width: 650px;
        height: 650px;
    }

    .deco-ring-2 {
        width: 550px;
        height: 550px;
    }

    .deco-ring-3 {
        width: 750px;
        height: 750px;
    }

    .n1pay-content-inner {
        padding: 0px 40px;
    }

    .app-main-title {
        font-size: 2.8rem;
    }
}

/* Large Desktop (1200px - 1400px) */
@media (max-width: 1400px) {


    .n1pay-download-premium-section {
        padding: 60px 0;
    }

    .n1pay-download-premium-section-main-card {
        padding: 30px;
    }

    .n1pay-phone-wrapper {
        max-width: 550px;
        padding: 60px 30px;
    }

    .deco-ring-1 {
        width: 600px;
        height: 600px;
    }

    .deco-ring-2 {
        width: 500px;
        height: 500px;
    }

    .deco-ring-3 {
        width: 700px;
        height: 700px;
    }

    .n1pay-content-inner {
        padding: 0px 35px;
    }

    .app-main-title {
        font-size: 2.6rem;
    }

    .n1pay-info-badge {
        padding: 16px 24px;
    }

    .n1pay-badge-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .n1pay-badge-content strong {
        font-size: 16px;
    }
}

/* Desktop (992px - 1200px) */
@media (max-width: 1200px) {


    .n1pay-download-premium-section {
        padding: 50px 0;
    }

    .n1pay-download-premium-section-main-card {
        padding: 25px;
    }

    .n1pay-phone-showcase {
        padding: 40px 20px;
    }

    .n1pay-content-area {
        padding: 40px 20px;
    }

    .n1pay-phone-wrapper {
        max-width: 480px;
        padding: 50px 25px;
    }

    .deco-ring-1 {
        width: 550px;
        height: 550px;
    }

    .deco-ring-2 {
        width: 450px;
        height: 450px;
    }

    .deco-ring-3 {
        width: 650px;
        height: 650px;
    }

    .n1pay-content-inner {
        padding: 0px 25px;
    }

    .app-main-title {
        font-size: 2.4rem;
    }

    .n1pay-sub-description {
        font-size: 1rem;
    }

    .n1pay-feature-card h4 {
        font-size: 17px;
    }

    .n1pay-feature-card p {
        font-size: 15px;
    }

    .n1pay-info-badge {
        padding: 14px 20px;
    }

    .n1pay-badge-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

/* Tablet Landscape (768px - 992px) */
@media (max-width: 991px) {
    .n1pay-download-premium-section {
        padding: 40px 0;
        min-height: auto;
    }

    .n1pay-download-premium-section-main-card {
        padding: 20px;
    }

    .n1pay-phone-showcase {
        padding: 30px 15px;
        margin-bottom: 30px;
        order: 2;
    }

    .n1pay-content-area {
        padding: 30px 15px;
        order: 1;
    }

    .n1pay-phone-wrapper {
        max-width: 420px;
        padding: 40px 20px;
        margin: 0 auto;
    }

    .deco-ring-1 {
        width: 480px;
        height: 480px;
    }

    .deco-ring-2 {
        width: 400px;
        height: 400px;
    }

    .deco-ring-3 {
        width: 560px;
        height: 560px;
    }

    /* Hide floating badges on tablet */
    .n1pay-info-badge {
        display: none;
    }

    .n1pay-content-inner {
        padding: 0;
        max-width: 100%;
    }

    .header-badge {
        margin-bottom: 20px;
    }

    .app-main-title {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .n1pay-features-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-bottom: 25px;
    }

    .n1pay-store-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .cta-headline {
        font-size: 20px;
        margin-bottom: 15px;
    }
}

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

    .n1pay-download-premium-section {
        padding: 35px 0;
    }

    .n1pay-download-premium-section-main-card {
        padding: 18px;
        border-radius: 24px;
    }

    .n1pay-phone-showcase {
        padding: 25px 10px;
        margin-bottom: 25px;
    }

    .n1pay-content-area {
        padding: 25px 10px;
    }

    .n1pay-phone-wrapper {
        max-width: 360px;
        padding: 35px 15px;
    }

    .deco-ring-1 {
        width: 400px;
        height: 400px;
    }

    .deco-ring-2 {
        width: 330px;
        height: 330px;
    }

    .deco-ring-3 {
        width: 480px;
        height: 480px;
    }

    .n1pay-phone-glow-layer {
        inset: -8%;
        border-radius: 60px;
    }

    .header-badge {
        padding: 10px 22px;
        margin-bottom: 18px;
    }

    .header-badge span {
        font-size: 11px;
    }

    .app-main-title {
        font-size: 2rem;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .n1pay-gradient-shine {
        display: block;
    }

    .n1pay-sub-description {
        font-size: 0.95rem;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .n1pay-features-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .n1pay-feature-card {
        padding: 14px 18px;
        border-radius: 16px;
    }

    .feature-icon-box {
        width: 38px;
        height: 38px;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .n1pay-feature-card h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .n1pay-feature-card p {
        font-size: 14px;
    }

    .cta-headline {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .n1pay-store-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .n1pay-premium-button {
        padding: 16px 20px;
    }

    .premium-btn-content {
        gap: 14px;
    }

    .premium-btn-content i {
        font-size: 30px;
    }

    .btn-label {
        font-size: 10px;
    }

    .btn-store {
        font-size: 16px;
    }

    .btn-arrow {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .n1pay-qr-premium {
        padding: 16px 20px;
        gap: 18px;
        margin-bottom: 20px;
    }

    .qr-scan-box {
        width: 85px;
        height: 85px;
        padding: 8px;
    }

    .corner {
        width: 16px;
        height: 16px;
        border-width: 2.5px;
    }

    .qr-icon-pulse {
        width: 42px;
        height: 42px;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .qr-premium-right h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .qr-premium-right p {
        font-size: 14px;
    }

    .n1pay-trust-badges {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .trust-badge {
        padding: 8px 14px;
    }

    .trust-badge span {
        font-size: 11px;
    }
}

/* Mobile Large (481px - 576px) */
@media (max-width: 576px) {


    .n1pay-download-premium-section {
        padding: 30px 0;
    }

    .n1pay-download-premium-section-main-card {
        padding: 16px;
        border-radius: 20px;
    }

    .n1pay-phone-showcase {
        padding: 20px 8px;
        margin-bottom: 20px;
    }

    .n1pay-content-area {
        padding: 20px 8px;
    }

    .n1pay-phone-wrapper {
        max-width: 300px;
        padding: 30px 12px;
    }

    .deco-ring-1 {
        width: 340px;
        height: 340px;
    }

    .deco-ring-2 {
        width: 280px;
        height: 280px;
    }

    .deco-ring-3 {
        width: 400px;
        height: 400px;
    }

    .n1pay-phone-glow-layer {
        inset: -12%;
        filter: blur(50px);
    }

    .n1pay-phone-shadow-base {
        bottom: -80px;
        width: 280px;
        height: 100px;
    }

    .header-badge {
        padding: 9px 20px;
        margin-bottom: 15px;
    }

    .header-badge span {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .app-main-title {
        font-size: 1.75rem;
        margin-bottom: 10px;
    }

    .n1pay-sub-description {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }

    .n1pay-features-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }

    .n1pay-feature-card {
        padding: 12px 16px;
        border-radius: 14px;
    }

    .feature-icon-box {
        width: 34px;
        height: 34px;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .n1pay-feature-card h4 {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .n1pay-feature-card p {
        font-size: 13px;
        line-height: 1.4;
    }

    .cta-headline {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .cta-headline i {
        font-size: 16px;
    }

    .n1pay-store-grid {
        gap: 10px;
        margin-bottom: 18px;
    }

    .n1pay-premium-button {
        padding: 14px 18px;
        border-radius: 15px;
    }

    .premium-btn-content {
        gap: 12px;
    }

    .premium-btn-content i {
        font-size: 26px;
    }

    .btn-label {
        font-size: 9px;
    }

    .btn-store {
        font-size: 15px;
    }

    .btn-arrow {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .n1pay-qr-premium {
        flex-direction: column;
        text-align: center;
        padding: 14px 16px;
        gap: 14px;
        margin-bottom: 18px;
    }

    .qr-scan-box {
        width: 75px;
        height: 75px;
        padding: 6px;
        margin: 0 auto;
    }

    .corner {
        width: 14px;
        height: 14px;
    }

    .qr-icon-pulse {
        width: 38px;
        height: 38px;
        font-size: 18px;
        margin: 0 auto 8px;
    }

    .qr-premium-right h4 {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .qr-premium-right p {
        font-size: 13px;
        line-height: 1.5;
    }

    .n1pay-trust-badges {
        gap: 8px;
    }

    .trust-badge {
        padding: 7px 12px;
    }

    .trust-badge i {
        font-size: 13px;
    }

    .trust-badge span {
        font-size: 10px;
    }
}

/* Mobile Medium (376px - 480px) */
@media (max-width: 480px) {
    .n1pay-download-premium-section {
        padding: 25px 0;
    }

    .n1pay-download-premium-section-main-card {
        padding: 14px;
        border-radius: 18px;
    }

    .n1pay-phone-showcase {
        padding: 18px 6px;
        margin-bottom: 18px;
    }

    .n1pay-content-area {
        padding: 18px 6px;
    }

    .n1pay-phone-wrapper {
        max-width: 260px;
        padding: 25px 10px;
    }

    .deco-ring-1 {
        width: 300px;
        height: 300px;
    }

    .deco-ring-2 {
        width: 250px;
        height: 250px;
    }

    .deco-ring-3 {
        width: 360px;
        height: 360px;
    }

    .header-badge {
        padding: 8px 18px;
        margin-bottom: 12px;
    }

    .header-badge span {
        font-size: 9px;
    }

    .app-main-title {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .n1pay-sub-description {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    .n1pay-features-premium {
        gap: 8px;
        margin-bottom: 15px;
    }

    .n1pay-feature-card {
        padding: 10px 14px;
        border-radius: 12px;
    }

    .feature-icon-box {
        width: 30px;
        height: 30px;
        font-size: 16px;
        margin-bottom: 6px;
    }

    .n1pay-feature-card h4 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .n1pay-feature-card p {
        font-size: 12px;
    }

    .cta-headline {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .n1pay-store-grid {
        gap: 8px;
        margin-bottom: 15px;
    }

    .n1pay-premium-button {
        padding: 12px 16px;
    }

    .premium-btn-content i {
        font-size: 24px;
    }

    .btn-label {
        font-size: 8px;
    }

    .btn-store {
        font-size: 14px;
    }

    .btn-arrow {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .qr-scan-box {
        width: 70px;
        height: 70px;
    }

    .qr-icon-pulse {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .qr-premium-right h4 {
        font-size: 14px;
    }

    .qr-premium-right p {
        font-size: 12px;
    }

    .trust-badge {
        padding: 6px 10px;
    }

    .trust-badge span {
        font-size: 9px;
    }
}

/* Mobile Small (320px - 375px) */
@media (max-width: 375px) {
    .n1pay-download-premium-section {
        padding: 20px 0;
    }

    .n1pay-download-premium-section-main-card {
        padding: 12px;
        border-radius: 16px;
    }

    .n1pay-phone-showcase {
        padding: 15px 5px;
        margin-bottom: 15px;
    }

    .n1pay-content-area {
        padding: 15px 5px;
    }

    .n1pay-phone-wrapper {
        max-width: 240px;
        padding: 20px 8px;
    }

    .deco-ring-1 {
        width: 270px;
        height: 270px;
    }

    .deco-ring-2 {
        width: 220px;
        height: 220px;
    }

    .deco-ring-3 {
        width: 320px;
        height: 320px;
    }

    .n1pay-phone-glow-layer {
        filter: blur(40px);
    }

    .header-badge {
        padding: 7px 16px;
        margin-bottom: 10px;
    }

    .app-main-title {
        font-size: 1.45rem;
        margin-bottom: 7px;
    }

    .n1pay-sub-description {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

    .n1pay-features-premium {
        gap: 7px;
        margin-bottom: 12px;
    }

    .n1pay-feature-card {
        padding: 9px 12px;
        border-radius: 10px;
    }

    .feature-icon-box {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin-bottom: 5px;
        border-radius: 8px;
    }

    .n1pay-feature-card h4 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .n1pay-feature-card p {
        font-size: 11px;
    }

    .cta-headline {
        font-size: 15px;
        margin-bottom: 8px;
        gap: 8px;
    }

    .cta-headline i {
        font-size: 14px;
    }

    .n1pay-store-grid {
        gap: 7px;
        margin-bottom: 12px;
    }

    .n1pay-premium-button {
        padding: 11px 14px;
        border-radius: 12px;
    }

    .premium-btn-content {
        gap: 10px;
    }

    .premium-btn-content i {
        font-size: 22px;
    }

    .btn-label {
        font-size: 7px;
    }

    .btn-store {
        font-size: 13px;
    }

    .btn-arrow {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-radius: 8px;
    }

    .n1pay-qr-premium {
        padding: 12px 14px;
        gap: 12px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .qr-scan-box {
        width: 65px;
        height: 65px;
        padding: 5px;
        border-radius: 10px;
    }

    .corner {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .qr-icon-pulse {
        width: 32px;
        height: 32px;
        font-size: 15px;
        margin-bottom: 6px;
        border-radius: 8px;
    }

    .qr-premium-right h4 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .qr-premium-right p {
        font-size: 11px;
    }

    .n1pay-trust-badges {
        gap: 6px;
    }

    .trust-badge {
        padding: 5px 9px;
        border-radius: 40px;
    }

    .trust-badge i {
        font-size: 12px;
    }

    .trust-badge span {
        font-size: 8px;
    }
}

/* Mobile Extra Small (< 320px) */
@media (max-width: 320px) {
    .n1pay-download-premium-section-main-card {
        padding: 10px;
    }

    .n1pay-phone-wrapper {
        max-width: 220px;
        padding: 18px 6px;
    }

    .deco-ring-1 {
        width: 240px;
        height: 240px;
    }

    .deco-ring-2 {
        width: 200px;
        height: 200px;
    }

    .deco-ring-3 {
        width: 280px;
        height: 280px;
    }

    .app-main-title {
        font-size: 1.3rem;
    }

    .n1pay-sub-description {
        font-size: 0.75rem;
    }

    .n1pay-feature-card {
        padding: 8px 10px;
    }

    .feature-icon-box {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .n1pay-feature-card h4 {
        font-size: 12px;
    }

    .n1pay-feature-card p {
        font-size: 10px;
    }

    .btn-store {
        font-size: 12px;
    }

    .qr-scan-box {
        width: 60px;
        height: 60px;
    }
}

/* App Download section style end  */




/* na pay merchant section style  */

.n1m-ultra-section {
    position: relative;
    min-height: 90vh;
    background: linear-gradient(165deg, #060a1a 0%, #0d1633 35%, #141e42 70%, #0a1029 100%);
    padding: 0;
    overflow: hidden;
}

/* Premium Animated Background */
.n1m-bg-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.n1m-hex-grid {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l26 15v30L30 60 4 45V15z' fill='none' stroke='%23FF5F15' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 70px;
    animation: n1mHexDrift 30s linear infinite;
}

@keyframes n1mHexDrift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 70px);
    }
}

.n1m-glow-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
}

.n1m-sphere-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #FF5F15 0%, transparent 70%);
    top: -200px;
    right: -150px;
    animation: n1mSphereFloat 12s ease-in-out infinite;
}

.n1m-sphere-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #FFA802 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    animation: n1mSphereFloat 10s ease-in-out infinite reverse;
}

.n1m-sphere-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #FF7B3D 0%, transparent 70%);
    top: 40%;
    left: 30%;
    animation: n1mSphereFloat 8s ease-in-out infinite 2s;
}

@keyframes n1mSphereFloat {

    0%,
    100% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.15) translate(20px, -20px);
    }
}

/* Floating Particles */
.n1m-particles-wrap {
    position: absolute;
    inset: 0;
}

.n1m-particle {
    position: absolute;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 50%;
    opacity: 0;
    animation: n1mParticleRise 10s infinite;
}

.n1m-particle:nth-child(1) {
    width: 6px;
    height: 6px;
    left: 5%;
    animation-delay: 0s;
}

.n1m-particle:nth-child(2) {
    width: 4px;
    height: 4px;
    left: 15%;
    animation-delay: 2s;
}

.n1m-particle:nth-child(3) {
    width: 8px;
    height: 8px;
    left: 25%;
    animation-delay: 4s;
}

.n1m-particle:nth-child(4) {
    width: 5px;
    height: 5px;
    left: 45%;
    animation-delay: 1s;
}

.n1m-particle:nth-child(5) {
    width: 7px;
    height: 7px;
    left: 65%;
    animation-delay: 3s;
}

.n1m-particle:nth-child(6) {
    width: 4px;
    height: 4px;
    left: 75%;
    animation-delay: 5s;
}

.n1m-particle:nth-child(7) {
    width: 6px;
    height: 6px;
    left: 85%;
    animation-delay: 2.5s;
}

.n1m-particle:nth-child(8) {
    width: 5px;
    height: 5px;
    left: 95%;
    animation-delay: 4.5s;
}

@keyframes n1mParticleRise {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0) scale(0);
    }

    10% {
        opacity: 0.8;
        transform: scale(1);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(50px) scale(0.5);
    }
}

/* Main Container */
.n1m-main-container {
    position: relative;
    z-index: 10;
    max-width: 1850px;
    margin: 0 auto;
    padding: 60px 40px;
}

.n1m-main-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}


/* Section Header - Centered */
.n1m-header-zone {
    text-align: center;
    margin-bottom: 30px;
}

.n1m-badge-elite {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 2px solid rgba(255, 95, 21, 0.4);
    padding: 10px 24px;
    border-radius: 60px;
    margin-bottom: 20px;
    backdrop-filter: blur(20px);
    animation: n1mBadgePulse 3s ease-in-out infinite;
}

@keyframes n1mBadgePulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 95, 21, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 95, 21, 0.4);
    }
}

.n1m-badge-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

.n1m-badge-text {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



/* ========================================
   UNIQUE HEXAGONAL SHOWCASE LAYOUT
   ======================================== */
.n1m-showcase-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

/* Left Side - Hexagonal Features */
.n1m-hex-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    max-width: 500px;
}

.n1m-hex-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 95, 21, 0.03));
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #FF5F15, #FFA802) 1;
    border-radius: 0 20px 20px 0;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.n1m-hex-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 95, 21, 0.1), transparent);
    transition: width 0.5s ease;
}

.n1m-hex-item:hover::before {
    width: 100%;
}

.n1m-hex-item:hover {
    transform: translateX(15px);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.2);
}

.n1m-hex-icon-wrap {
    width: 52px;
    height: 52px;
    position: relative;
    flex-shrink: 0;
}

.n1m-hex-icon-wrap svg {
    position: absolute;
    inset: 0;
}

.n1m-hex-shape {
    fill: none;
    stroke: url(#n1mHexGrad);
    stroke-width: 2;
    transition: all 0.4s ease;
}

.n1m-hex-item:hover .n1m-hex-shape {
    stroke-width: 3;
    filter: drop-shadow(0 0 10px rgba(255, 95, 21, 0.5));
}

.n1m-hex-icon-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.n1m-hex-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: orange;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.n1m-hex-item:hover .n1m-hex-content h4 {
    color: #FFA802;
}

.n1m-hex-content p {
    font-size: 16px;
    color: white;
    line-height: 1.5;
    margin: 0;
}

/* Center - Premium Phone Showcase */
.n1m-phone-showcase {
    position: relative;
    flex-shrink: 0;
}

.n1m-phone-container {
    position: relative;
    z-index: 2;
}

.n1m-phone-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FF5F15, #FFA802, #FFD93D, #FFA802, #FF5F15);
    opacity: 0.15;
    animation: n1mRingRotate 10s linear infinite;
    filter: blur(40px);
}

@keyframes n1mRingRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Enhanced premium phone device styling */
.n1m-phone-device {
    width: 300px;
    height: 620px;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0d0d0d 100%);
    border-radius: 45px;
    padding: 10px;
    box-shadow:
        0 60px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 0 4px rgba(30, 30, 30, 1),
        0 0 0 5px rgba(255, 95, 21, 0.2),
        0 0 80px rgba(255, 95, 21, 0.15),
        inset 0 0 50px rgba(255, 95, 21, 0.03);
    position: relative;
    animation: n1mPhoneFloat 6s ease-in-out infinite;
}

/* Premium metallic frame effect */
.n1m-phone-device::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 95, 21, 0.3) 20%,
            rgba(255, 168, 2, 0.2) 40%,
            rgba(255, 95, 21, 0.3) 60%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(255, 95, 21, 0.2) 100%);
    border-radius: 47px;
    z-index: -1;
    animation: n1mFrameShine 4s ease-in-out infinite;
}

@keyframes n1mFrameShine {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Side buttons for premium look */
.n1m-phone-device::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 100px;
    width: 3px;
    height: 50px;
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a, #1a1a1a);
    border-radius: 0 3px 3px 0;
    box-shadow:
        0 -30px 0 0 linear-gradient(180deg, #3a3a3a, #2a2a2a),
        0 30px 0 0 linear-gradient(180deg, #3a3a3a, #2a2a2a);
}

@keyframes n1mPhoneFloat {

    0%,
    100% {
        transform: translateY(0) rotateY(0deg);
    }

    50% {
        transform: translateY(-15px) rotateY(2deg);
    }
}

.n1m-phone-notch {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 30px;
    background: #000;
    border-radius: 0 0 18px 18px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.n1m-notch-cam {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #1a3a5c, #0a1a2c);
    border-radius: 50%;
    border: 2px solid #2a2a2a;
    box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.3);
}

.n1m-notch-speaker {
    width: 45px;
    height: 4px;
    background: #1a1a1a;
    border-radius: 10px;
}

.n1m-phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0f1628 0%, #1a2240 100%);
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Made app UI scrollable */
.n1m-app-ui {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 55px 18px 18px;
    overflow-y: auto;

}

.n1m-app-ui::-webkit-scrollbar {
    width: 0px;
}

.n1m-app-ui::-webkit-scrollbar-track {
    background: transparent;
}

.n1m-app-ui::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FF5F15, #FFA802);
    border-radius: 10px;
}

.n1m-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.n1m-app-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.n1m-app-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 95, 21, 0.4);
}

.n1m-app-logo-text {
    font-size: 15px;
    font-weight: 800;
    color: white;
}

.n1m-app-notif {
    position: relative;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.n1m-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #FF5F15;
    border-radius: 50%;
    border: 2px solid #0f1628;
    animation: n1mDotPulse 2s ease-in-out infinite;
}

@keyframes n1mDotPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

/* Revenue Display */
.n1m-revenue-display {
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 18px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.n1m-revenue-display::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 168, 2, 0.15) 0%, transparent 70%);
}

.n1m-revenue-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.n1m-revenue-amount {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    position: relative;
}

.n1m-revenue-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    position: relative;
}

/* Quick Stats Row */
.n1m-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.n1m-stat-mini {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
}

.n1m-stat-mini-val {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 3px;
}

.n1m-stat-mini-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* Action Buttons Grid */
.n1m-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.n1m-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.n1m-action-btn:hover {
    background: rgba(255, 95, 21, 0.15);
    border-color: rgba(255, 95, 21, 0.3);
    transform: translateY(-3px);
}

.n1m-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.n1m-action-btn span {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* Transaction Section */
.n1m-transaction-section {
    flex: 1;
    min-height: 0;
}

.n1m-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.n1m-section-head h5 {
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.n1m-section-head a {
    font-size: 11px;
    color: #FFA802;
    text-decoration: none;
    font-weight: 600;
}

.n1m-txn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.n1m-txn-icon {
    width: 40px;
    height: 40px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22C55E;
    font-size: 16px;
}

.n1m-txn-info {
    flex: 1;
}

.n1m-txn-title {
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
}

.n1m-txn-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.n1m-txn-amount {
    font-size: 14px;
    font-weight: 800;
    color: #22C55E;
}

/* Right Side - Stats & CTA */
.n1m-right-zone {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
    max-width: 400px;
}

/* Circular Stats */
.n1m-circular-stats {
    display: flex;
    gap: 25px;
    justify-content: center;
}

.n1m-circle-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.n1m-circle-ring {
    width: 110px;
    height: 110px;
    position: relative;
}

.n1m-circle-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.n1m-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.n1m-circle-progress {
    fill: none;
    stroke: url(#n1mCircleGrad);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 1s ease;
}

.n1m-circle-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.n1m-circle-num {
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.n1m-circle-unit {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.n1m-circle-label {
    font-size: 19px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* Trust Badges */
.n1m-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.n1m-trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.n1m-trust-badge:hover {
    background: rgba(255, 95, 21, 0.1);
    border-color: rgba(255, 95, 21, 0.3);
    transform: translateY(-3px);
}

.n1m-trust-badge i {
    font-size: 20px;
    color: #FFA802;
}

.n1m-trust-badge span {
    font-size: 14px;
    font-weight: 700;
    color: white;
}

/* CTA Zone */
.n1m-cta-zone {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.n1m-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 20px 45px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border: none;
    border-radius: 15px;
    color: white;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 50px rgba(255, 95, 21, 0.4);
    position: relative;
    overflow: hidden;
}

.n1m-cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.n1m-cta-primary:hover::before {
    left: 100%;
}

.n1m-cta-primary:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 30px 70px rgba(255, 95, 21, 0.5);
}

.n1m-cta-icons {
    display: flex;
    gap: 8px;
}

.n1m-cta-icons i {
    font-size: 20px;
}

.n1m-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    background: transparent;
    border: 2px solid rgba(255, 95, 21, 0.5);
    border-radius: 50px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.n1m-cta-secondary:hover {
    background: rgba(255, 95, 21, 0.1);
    border-color: #FF5F15;
    transform: translateX(5px);
}

.n1m-cta-secondary i {
    transition: transform 0.3s ease;
}

.n1m-cta-secondary:hover i {
    transform: translateX(5px);
}

/* Bottom Metrics Bar */
.n1m-metrics-bar {
    display: flex;
    justify-content: center;
    gap: 90px;
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.n1m-metric {
    text-align: center;
}

.n1m-metric-value {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.n1m-metric-label {
    font-size: 14px;
    color: white;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1200px) {
    .n1m-showcase-wrapper {
        flex-direction: column;
        gap: 60px;
    }

    .n1m-hex-features,
    .n1m-right-zone {
        max-width: 100%;
    }

    .n1m-hex-features {
        order: 2;
    }

    .n1m-phone-showcase {
        order: 1;
    }

    .n1m-right-zone {
        order: 3;
    }
}

@media (max-width: 768px) {
    .n1m-ultra-section {
        padding: 60px 0;
    }

    .n1m-header-zone {
        margin-bottom: 50px;
    }

    .n1m-phone-device {
        width: 260px;
        height: 540px;
    }

    .n1m-phone-glow-ring {
        width: 350px;
        height: 350px;
    }

    .n1m-hex-item {
        padding: 20px 25px;
    }

    .n1m-hex-icon-wrap {
        width: 55px;
        height: 55px;
    }

    .n1m-circular-stats {
        /* flex-direction: column; */
        gap: 30px;
    }

    .why-main-card {
        padding: 10px !important;
    }

    .pay-bill-main-card {
        padding: 10px !important;

    }

    .n1m-main-card {
        padding: 10px !important;

    }

    .n1m-metrics-bar {
        gap: 30px;
        margin-top: 50px;
        padding-top: 30px;
    }

    .n1m-metric-value {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .n1m-main-container {
        padding: 0 15px;
    }

    .n1m-phone-device {
        width: 240px;
        height: 500px;
    }

    .n1m-hex-item {
        padding: 16px 20px;
        gap: 15px;
    }

    .n1m-hex-icon-wrap {
        width: 50px;
        height: 50px;
    }

    .n1m-hex-content h4 {
        font-size: 1rem;
    }

    .n1m-hex-content p {
        font-size: 0.85rem;
    }

    .n1m-trust-badges {
        flex-direction: column;
        align-items: center;
    }

    .n1m-cta-primary {
        padding: 16px 30px;
        font-size: 15px;
    }

    .n1m-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* ============================================
   N1 PAY ULTIMATE CREDIT CARD SECTION
   ============================================ */

.n1-credit-section {
    position: relative;
    padding: 0;
    background: linear-gradient(135deg, #030712 0%, #0a0f1f 50%, #030712 100%);
    overflow: hidden;
}

.n1-credit-section-main-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

/* Enhanced Background Effects */
.credit-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.4) 0%, transparent 70%);
    top: -150px;
    right: -50px;
    animation: orbPulse 8s ease-in-out infinite;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 168, 2, 0.3) 0%, transparent 70%);
    bottom: -100px;
    left: -50px;
    animation: orbPulse 8s ease-in-out infinite 4s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbPulse 10s ease-in-out infinite 2s;
}

@keyframes orbPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

.bg-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 95, 21, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 95, 21, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.floating-particles {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(255, 168, 2, 0.6), transparent),
        radial-gradient(2px 2px at 30% 60%, rgba(255, 95, 21, 0.5), transparent),
        radial-gradient(1px 1px at 50% 30%, rgba(255, 168, 2, 0.7), transparent),
        radial-gradient(2px 2px at 70% 70%, rgba(255, 95, 21, 0.4), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255, 168, 2, 0.5), transparent);
    animation: particlesFloat 25s linear infinite;
}

@keyframes particlesFloat {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(-50px) rotate(2deg);
    }
}

/* Premium Header */
.credit-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 1px solid rgba(255, 95, 21, 0.4);
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    border-radius: 50%;
    animation: dotGlow 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 95, 21, 0.6);
}

@keyframes dotGlow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 95, 21, 0.6);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 95, 21, 0.9);
        transform: scale(1.2);
    }
}

.header-badge>span:not(.badge-dot):not(.badge-shine) {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #ffa802, #ff5f15);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.badge-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.credit-main-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 0 40px rgba(255, 95, 21, 0.2);
}

.gradient-text {
    background: linear-gradient(135deg, #ff5f15, #ffa802, #ff5f15, #ffa802);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 5s linear infinite;
}

@keyframes gradientFlow {
    from {
        background-position: 0% center;
    }

    to {
        background-position: 300% center;
    }
}

/* Main Grid Layout */
.credit-main-grid {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 10;
}

/* ==========================================
   PREMIUM CREDIT CARD DESIGN
   ========================================== */
.card-showcase {
    position: sticky;
    top: 100px;
}

.card-wrapper {
    position: relative;
    perspective: 1500px;
    margin-bottom: 30px;
    /* padding: 30px; */
}

/* Orbit Rings */
.card-orbit-ring {
    position: absolute;
    border: 1px solid rgba(255, 95, 21, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    width: 450px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ringRotate 20s linear infinite;
}

.ring-2 {
    width: 500px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ringRotate 25s linear infinite reverse;
    border-style: dashed;
}

@keyframes ringRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 95, 21, 0.4) 0%, transparent 60%);
    border-radius: 30px;
    filter: blur(40px);
    animation: cardGlowPulse 4s ease-in-out infinite;
}

.card-reflection-glow {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 100px;
    background: radial-gradient(ellipse, rgba(255, 95, 21, 0.3) 0%, transparent 70%);
    filter: blur(30px);
}

@keyframes cardGlowPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Premium Card Styling */
.credit-card-3d {
    width: 400px;
    height: auto;
    background: linear-gradient(145deg,
            #1a1f3c 0%,
            #252b4d 20%,
            #1e2444 40%,
            #2a3158 60%,
            #1a1f3c 100%);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transform: rotateY(-10deg) rotateX(8deg);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    animation: cardPremiumFloat 8s ease-in-out infinite;
    transform-style: preserve-3d;
}

.credit-card-3d:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.03) translateZ(30px);
    box-shadow:
        0 60px 120px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(255, 95, 21, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

@keyframes cardPremiumFloat {

    0%,
    100% {
        transform: rotateY(-10deg) rotateX(8deg) translateY(0);
    }

    50% {
        transform: rotateY(-10deg) rotateX(8deg) translateY(-12px);
    }
}

/* Holographic Effect */
.card-holographic {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(255, 95, 21, 0.1) 20%,
            rgba(147, 51, 234, 0.1) 40%,
            rgba(59, 130, 246, 0.1) 60%,
            rgba(255, 168, 2, 0.1) 80%,
            transparent 100%);
    background-size: 400% 400%;
    animation: holographicShift 8s ease-in-out infinite;
    pointer-events: none;
    border-radius: 24px;
}

@keyframes holographicShift {

    0%,
    100% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0% 100%;
    }
}

/* Card Shine */
.card-shine {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.03) 40%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 60%,
            transparent 70%);
    animation: premiumShine 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes premiumShine {

    0%,
    100% {
        transform: translateX(-30%) translateY(-30%) rotate(45deg);
    }

    50% {
        transform: translateX(30%) translateY(30%) rotate(45deg);
    }
}

/* Metallic Texture */
.card-metallic-texture {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.01) 1px,
            transparent 2px);
    pointer-events: none;
    border-radius: 24px;
}

/* Card Border Glow */
.card-border-glow {
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.5), rgba(255, 168, 2, 0.3), rgba(147, 51, 234, 0.2), rgba(255, 95, 21, 0.5));
    background-size: 300% 300%;
    animation: borderGlow 6s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.credit-card-3d:hover .card-border-glow {
    opacity: 1;
}

@keyframes borderGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Card Content */
.card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-logo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-n1 {
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    text-shadow: 0 0 30px rgba(255, 95, 21, 0.5);
}

.logo-text {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 4px;
}

.card-wifi {
    color: rgba(255, 255, 255, 0.7);
    transform: rotate(90deg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* Premium Card Chip */
.card-chip-section {
    margin: 5px 0;
}

.card-chip {
    width: 55px;
    height: 42px;
    background: linear-gradient(145deg, #d4a853, #f4d794, #c9973f);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.chip-gold-layer {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    animation: chipGoldShine 4s ease-in-out infinite;
}

@keyframes chipGoldShine {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.chip-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 32px;
    height: 26px;
}

.chip-lines span {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: 2px;
}

.chip-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 40%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 60%);
    animation: chipShine 5s ease-in-out infinite;
}

@keyframes chipShine {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }

    100% {
        transform: translateX(50%) translateY(50%) rotate(45deg);
    }
}

/* Card Number */
.card-number-display {
    display: flex;
    gap: 20px;
    margin: 10px 0;
}

.num-group {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 4px;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 255, 255, 0.1);
}

/* Card Footer */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-info small {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.card-info strong {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

.card-brand-logo {
    position: relative;
}

.visa-v {
    font-size: 32px;
    font-weight: 900;
    font-style: italic;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.visa-hologram {
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 30px;
    height: 20px;
    background: linear-gradient(135deg,
            rgba(255, 95, 21, 0.4),
            rgba(147, 51, 234, 0.4),
            rgba(59, 130, 246, 0.4));
    border-radius: 3px;
    animation: holoShift 3s ease-in-out infinite;
}

@keyframes holoShift {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Premium Quick Stats */
.quick-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 20px;
    padding: 22px 30px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.quick-stat:hover {
    background: rgba(255, 95, 21, 0.1);
}

.quick-stat:hover .stat-glow {
    opacity: 1;
}

.stat-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.stat-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.2), rgba(255, 168, 2, 0.15));
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.quick-stat:hover .stat-icon {
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(255, 95, 21, 0.4);
}

.stat-icon i {
    font-size: 18px;
    color: #fff;
    transition: all 0.4s ease;
}

.quick-stat:hover .stat-icon i {
    color: #fff;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 45px;
    background: linear-gradient(180deg, transparent, rgba(255, 95, 21, 0.3), transparent);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.trust-badge:hover {
    background: rgba(34, 197, 94, 0.15);
    transform: translateY(-3px);
}

.trust-badge i {
    font-size: 14px;
    color: #22c55e;
}

.trust-badge span {
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   PREMIUM FEATURES SECTION
   ========================================== */
.features-showcase {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Premium Category Tabs */
.category-tabs-wrapper {
    position: relative;
}

.tabs-glow-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.3), transparent);
}

.category-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 15px;
}

.cat-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.tab-icon-wrap {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.tab-icon-wrap i {
    font-size: 16px;
    transition: all 0.4s ease;
}

.tab-active-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff5f15, #ffa802);
    border-radius: 3px 3px 0 0;
    transition: width 0.4s ease;
}

.cat-tab:hover {
    background: rgba(255, 95, 21, 0.08);
    border-color: rgba(255, 95, 21, 0.25);
    color: #fff;
    transform: translateY(-3px);
}

.cat-tab:hover .tab-icon-wrap {
    background: rgba(255, 95, 21, 0.2);
}

.cat-tab:hover .tab-icon-wrap i {
    color: #ffa802;
    transform: scale(1.1);
}

.cat-tab.active {
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border-color: rgba(255, 95, 21, 0.5);
    color: #fff;
    box-shadow: 0 10px 30px rgba(255, 95, 21, 0.2);
}

.cat-tab.active .tab-icon-wrap {
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    box-shadow: 0 5px 20px rgba(255, 95, 21, 0.4);
}

.cat-tab.active .tab-icon-wrap i {
    color: #fff;
}

.cat-tab.active .tab-active-indicator {
    width: 60%;
}

/* Premium Tab Panels */
.tab-panels {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    min-height: 360px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.panel-glass-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(255, 95, 21, 0.05), transparent);
    pointer-events: none;
}

.tab-panel {
    display: none;
    animation: panelSlideIn 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 1;
}

.tab-panel.active {
    display: block;
}

@keyframes panelSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

/* Panel Header */
.panel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-icon-wrapper {
    position: relative;
}

.panel-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 15px 40px rgba(255, 95, 21, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.panel-icon i {
    font-size: 28px;
    color: #fff;
}

.icon-pulse-ring {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 22px;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.panel-title h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px 0;
}

.panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 25px;
    font-size: 12px;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-badge i {
    font-size: 11px;
}

/* Premium Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.feature-hover-effect {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 95, 21, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.feature-item:hover {
    background: rgba(255, 95, 21, 0.08);
    border-color: rgba(255, 95, 21, 0.35);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 95, 21, 0.15);
}

.feature-item:hover .feature-hover-effect {
    opacity: 1;
}

.feature-icon-box {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s ease;
}

.icon-glow {
    position: absolute;
    inset: -5px;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.4) 0%, transparent 70%);
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-item:hover .feature-icon-box {
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    border-color: transparent;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(255, 95, 21, 0.5);
}

.feature-item:hover .icon-glow {
    opacity: 1;
}

.feature-icon-box i {
    font-size: 22px;
    color: #ffa802;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.feature-item:hover .feature-icon-box i {
    color: #fff;
    transform: scale(1.1);
}

.feature-item span {
    font-size: 19px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    transition: all 0.3s ease;
}

.feature-item:hover span {
    color: #fff;
}

/* Premium Benefits List */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.benefits-list li:hover {
    background: rgba(34, 197, 94, 0.08);
    transform: translateX(8px);
}

.benefit-check {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-check i {
    font-size: 10px;
    color: #22c55e;
}

/* Premium CTA Buttons */
.cta-buttons {
    display: flex;
    gap: 16px;
}

.btn-primary-cta {
    flex: 1;
    position: relative;
    padding: 18px 32px;
    background: linear-gradient(135deg, #ff5f15, #ffa802);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-primary-cta .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.btn-primary-cta .btn-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.btn-primary-cta i {
    font-size: 16px;
    color: #fff;
    transition: transform 0.3s ease;
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-glow {
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #ff5f15, #ffa802, #ff5f15);
    border-radius: 18px;
    z-index: -1;
    filter: blur(15px);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.btn-primary-cta:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 25px 50px rgba(255, 95, 21, 0.4);
}

.btn-primary-cta:hover .btn-shine {
    left: 100%;
}

.btn-primary-cta:hover .btn-glow {
    opacity: 0.8;
    filter: blur(25px);
}

.btn-primary-cta:hover i {
    transform: translateX(5px);
}

.btn-secondary-cta {
    flex: 1;
    position: relative;
    padding: 18px 22px;
    background: transparent;
    border: 2px solid rgba(255, 95, 21, 0.4);
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-secondary-cta .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.btn-secondary-cta .btn-text {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.btn-secondary-cta i {
    font-size: 16px;
    color: #ffa802;
    transition: all 0.3s ease;
}

.btn-border-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.5), rgba(255, 168, 2, 0.3));
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-secondary-cta:hover {
    background: rgba(255, 95, 21, 0.1);
    border-color: #ff5f15;
    transform: translateY(-5px);
}

.btn-secondary-cta:hover .btn-border-glow {
    opacity: 1;
    filter: blur(10px);
}

.btn-secondary-cta:hover i {
    transform: rotate(15deg) scale(1.2);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 1200px) {
    .credit-main-grid {
        grid-template-columns: 400px 1fr;
        gap: 40px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .credit-card-3d {
        width: 360px;
        height: auto;
    }
}

@media (max-width: 992px) {
    .credit-main-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .card-showcase {
        position: relative;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-wrapper {
        padding: 20px;
    }

    .credit-card-3d {
        width: 380px;
        height: 240px;
    }

    .quick-stats {
        width: 100%;
        max-width: 420px;
    }

    .trust-badges {
        width: 100%;
        max-width: 420px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .n1-credit-section {
        padding: 60px 0;
    }

    .category-tabs {
        justify-content: center;
    }

    .cat-tab span {
        display: none;
    }

    .cat-tab {
        padding: 12px 16px;
    }

    .tab-icon-wrap {
        width: 32px;
        height: 32px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .feature-item {
        padding: 16px 10px;
    }

    .feature-icon-box {
        width: 44px;
        height: 44px;
    }

    .credit-card-3d {
        width: 320px;
        height: 200px;
        padding: 22px;
    }

    .num-group {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .card-number-display {
        gap: 12px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .quick-stats {
        padding: 18px 20px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
    }

    .stat-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .credit-card-3d {
        width: 290px;
        height: 182px;
        padding: 18px;
    }

    .logo-n1 {
        font-size: 22px;
    }

    .num-group {
        font-size: 16px;
    }

    .card-chip {
        width: 45px;
        height: 35px;
    }

    .quick-stats {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .stat-divider {
        display: none;
    }

    .tab-panels {
        padding: 24px 18px;
    }

    .panel-icon {
        width: 52px;
        height: 52px;
    }

    .panel-icon i {
        font-size: 22px;
    }

    .panel-title h3 {
        font-size: 1.3rem;
    }

    .trust-badges {
        flex-direction: column;
        gap: 10px;
    }
}



/* ==========================================
   <CHANGE> COMPLETELY NEW LEFT SIDE - FUTURISTIC CARD DISPLAY
   ========================================== */

.card-showcase {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* NEW: Hexagonal Frame Container */
.card-wrapper {
    position: relative;
    perspective: 2000px;
    margin-bottom: 35px;
    padding: 50px 40px;
    background:
        linear-gradient(135deg, rgba(255, 95, 21, 0.08) 0%, transparent 50%),
        linear-gradient(225deg, rgba(147, 51, 234, 0.06) 0%, transparent 50%);
    border-radius: 32px;
    border: 1px solid rgba(255, 95, 21, 0.15);
    backdrop-filter: blur(20px);
}

/* NEW: Animated Corner Accents */
.card-wrapper::before,
.card-wrapper::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    pointer-events: none;
}

.card-wrapper::before {
    top: -1px;
    left: -1px;
    border-top-color: #ff5f15;
    border-left-color: #ff5f15;
    border-radius: 32px 0 0 0;
    animation: cornerPulse 3s ease-in-out infinite;
}

.card-wrapper::after {
    bottom: -1px;
    right: -1px;
    border-bottom-color: #ffa802;
    border-right-color: #ffa802;
    border-radius: 0 0 32px 0;
    animation: cornerPulse 3s ease-in-out infinite 1.5s;
}

@keyframes cornerPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 95, 21, 0.5);
    }
}

/* NEW: Floating Tech Lines */
.tech-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.6), transparent);
    height: 1px;
    animation: techLineMove 4s linear infinite;
}

.tech-line-1 {
    width: 60%;
    top: 20%;
    left: -10%;
    animation-delay: 0s;
}

.tech-line-2 {
    width: 40%;
    bottom: 30%;
    right: -10%;
    animation-delay: 2s;
}

@keyframes techLineMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(200%);
        opacity: 0;
    }
}

/* Remove old orbit rings */
.card-orbit-ring {
    display: none;
}

/* NEW: Holographic Scanner Effect */
.scanner-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 95, 21, 0.8) 20%,
            rgba(255, 168, 2, 1) 50%,
            rgba(255, 95, 21, 0.8) 80%,
            transparent 100%);
    filter: blur(1px);
    box-shadow: 0 0 20px rgba(255, 95, 21, 0.8), 0 0 40px rgba(255, 168, 2, 0.5);
    animation: scanMove 3s ease-in-out infinite;
    z-index: 100;
    border-radius: 2px;
}

@keyframes scanMove {

    0%,
    100% {
        top: 10%;
        opacity: 0.3;
    }

    50% {
        top: 85%;
        opacity: 1;
    }
}

/* NEW: Card Glow Enhanced */
.card-glow {
    position: absolute;
    inset: 20px;
    background: conic-gradient(from 0deg,
            rgba(255, 95, 21, 0.4),
            rgba(255, 168, 2, 0.3),
            rgba(147, 51, 234, 0.2),
            rgba(255, 95, 21, 0.4));
    border-radius: 30px;
    filter: blur(50px);
    animation: conicRotate 8s linear infinite;
    opacity: 0.6;
}

@keyframes conicRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.card-reflection-glow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80px;
    background: radial-gradient(ellipse, rgba(255, 95, 21, 0.4) 0%, transparent 70%);
    filter: blur(25px);
    animation: reflectionPulse 4s ease-in-out infinite;
}

@keyframes reflectionPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(-50%) scaleX(0.9);
    }

    50% {
        opacity: 0.7;
        transform: translateX(-50%) scaleX(1.1);
    }
}

/* NEW: Data Points Around Card */
.data-point {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    animation: dataFloat 6s ease-in-out infinite;
    z-index: 50;
}

.data-point-1 {
    top: -5%;
    right: -5%;
    animation-delay: 0s;
}

.data-point-2 {
    bottom: -5%;
    left: -20%;
    animation-delay: 2s;
}

.data-point-3 {
    top: -5%;
    left: -20%;
    animation-delay: 4s;
}

@keyframes dataFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-8px) scale(1.05);
        opacity: 1;
    }
}

.data-point .dp-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.3), rgba(255, 168, 2, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.data-point .dp-icon i {
    font-size: 12px;
    color: #ffa802;
}

.data-point .dp-info {
    display: flex;
    flex-direction: column;
}

.data-point .dp-value {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.data-point .dp-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}




/* NEW: Security Badge */
.security-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 20px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 30px;
}

.security-badge i {
    font-size: 16px;
    color: #22c55e;
}

.security-badge span {
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Trust Badges - Hidden for cleaner look */
.trust-badges {
    display: none;
}

/* ==========================================
   RESPONSIVE - Left Side Updates
   ========================================== */
@media (max-width: 992px) {
    .card-wrapper {
        padding: 40px 30px;
    }

    .data-point {
        display: none;
    }

    .quick-stats {
        max-width: 100%;
    }

    .cta-buttons {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .card-wrapper {
        padding: 30px 20px;
    }

    .quick-stat {
        padding: 14px 18px;
    }

    .stat-icon {
        width: 42px;
        height: 42px;
    }

    .stat-value {
        font-size: 1.3rem;
    }

    .stat-arrow {
        display: none;
    }

    .btn-primary-cta {
        padding: 16px 24px;
    }

    .btn-primary-cta .btn-icon-circle {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {

    .card-wrapper::before,
    .card-wrapper::after {
        width: 50px;
        height: 50px;
    }

    .scanner-line {
        display: none;
    }
}



.why-nexora-premium {
    position: relative;
    min-height: 90vh;
    background: linear-gradient(135deg, #050816 0%, #0a0f1e 25%, #0d1230 50%, #0a0f1e 75%, #050816 100%);
    padding: 0px;
    overflow: hidden;
}

.why-main-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

/* Premium Animated Background */
.why-nexora-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.why-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    animation: whyOrbFloat 40s ease-in-out infinite;
}

.why-orb-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, #FF5F15 0%, #FF8C42 50%, transparent 70%);
    top: -300px;
    right: -200px;
}

.why-orb-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #FFA802 0%, #FFD93D 50%, transparent 70%);
    bottom: -250px;
    left: -200px;
    animation-delay: 15s;
}

.why-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #FF6B35 0%, transparent 70%);
    top: 40%;
    left: 30%;
    animation-delay: 25s;
}

@keyframes whyOrbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, -30px) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) scale(0.95);
    }

    75% {
        transform: translate(30px, 30px) scale(1.05);
    }
}

.why-mesh-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 95, 21, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 95, 21, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
}

/* Enhanced floating particles with multiple sizes and colors */
.why-particles {
    position: absolute;
    inset: 0;
}

.why-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: whyParticleFloat 25s infinite;
}

.why-particle::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: inherit;
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0.5;
}

.why-particle:nth-child(1) {
    left: 10%;
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    animation-delay: 0s;
    animation-duration: 20s;
}

.why-particle:nth-child(2) {
    left: 25%;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #FFA802, #FFD93D);
    animation-delay: 3s;
    animation-duration: 22s;
}

.why-particle:nth-child(3) {
    left: 45%;
    width: 3px;
    height: 3px;
    background: linear-gradient(135deg, #FF6B6B, #FF5F15);
    animation-delay: 6s;
    animation-duration: 18s;
}

.why-particle:nth-child(4) {
    left: 65%;
    width: 5px;
    height: 5px;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    animation-delay: 9s;
    animation-duration: 24s;
}

.why-particle:nth-child(5) {
    left: 80%;
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, #22C55E, #3B82F6);
    animation-delay: 12s;
    animation-duration: 21s;
}

.why-particle:nth-child(6) {
    left: 90%;
    width: 7px;
    height: 7px;
    background: linear-gradient(135deg, #FF5F15, #FFD93D);
    animation-delay: 15s;
    animation-duration: 19s;
}

.why-particle:nth-child(7) {
    left: 15%;
    width: 5px;
    height: 5px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    animation-delay: 4s;
    animation-duration: 23s;
}

.why-particle:nth-child(8) {
    left: 55%;
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, #EC4899, #FF6B6B);
    animation-delay: 8s;
    animation-duration: 20s;
}

@keyframes whyParticleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
        transform: translateY(80vh) translateX(20px) scale(1) rotate(90deg);
    }

    50% {
        transform: translateY(40vh) translateX(-20px) scale(1.2) rotate(180deg);
    }

    90% {
        opacity: 0.9;
    }

    100% {
        transform: translateY(-20vh) translateX(30px) scale(0.5) rotate(360deg);
        opacity: 0;
    }
}

/* Added aurora effect for premium background */
.why-aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 50% at 50% 100%, rgba(255, 95, 21, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 80% 40% at 80% 50%, rgba(255, 168, 2, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse 60% 30% at 20% 30%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
    animation: auroraShift 20s ease-in-out infinite alternate;
}

@keyframes auroraShift {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Section Header - Premium */
.why-nexora-header {
    text-align: center;
    margin-bottom: 45px;
    position: relative;
    z-index: 2;
}

/* Enhanced header badge with pulse ring */
.why-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.08));
    border: 1px solid rgba(255, 95, 21, 0.3);
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 28px;
    backdrop-filter: blur(15px);
    animation: whyBadgeIn 0.8s ease-out;
    position: relative;
    overflow: hidden;
}

.why-header-badge::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 95, 21, 0.3), transparent 30%);
    animation: badgeRotate 4s linear infinite;
}

.why-header-badge::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: linear-gradient(135deg, rgba(5, 8, 22, 0.95), rgba(10, 15, 30, 0.95));
    border-radius: 50px;
    z-index: -1;
}

@keyframes badgeRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes whyBadgeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

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

.why-header-badge i {
    font-size: 14px;
    color: #FF5F15;
    animation: whyStarPulse 2.5s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes whyStarPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 5px #FF5F15);
    }

    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.8;
        filter: drop-shadow(0 0 15px #FF5F15);
    }
}

.why-header-badge span {
    font-size: 12px;
    font-weight: 700;
    color: #FFA802;
    letter-spacing: 2px;
    text-transform: uppercase;

    position: relative;
    z-index: 1;
}

/* Enhanced title with letter animation */
.why-nexora-title {
    font-size: clamp(2.2rem, 4.5vw, 2.5rem);
    font-weight: 800;
    color: white;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1px;

    text-shadow: 0 0 60px rgba(255, 95, 21, 0.2);
}

.why-gradient-text {
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 30%, #FFD93D 50%, #FFA802 70%, #FF5F15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    background-size: 300% auto;
    animation: whyTextShine 4s linear infinite;
    position: relative;
}

.why-gradient-text::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FF5F15, #FFA802, #FF5F15, transparent);
    border-radius: 3px;
    animation: underlineGlow 3s ease-in-out infinite;
}

@keyframes underlineGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes whyTextShine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }
}

.why-nexora-subtitle {
    font-size: 18px;
    /*color: rgba(255, 255, 255, 0.6);*/
    color: white;
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 400;
}

/* =======================================
   LEFT SIDE - CENTRAL VISUAL HUB - ENHANCED
   ======================================= */

.why-visual-hub {
    position: relative;
    width: 100%;
    max-width: 400px;
    font-size: clamp(2rem, 4vw, 2.5rem);

    height: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* <CHANGE> Added Hexagon Pattern Background */
.hexagon-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.15;
    z-index: 0;
}

.hexagon-pattern svg {
    width: 100%;
    height: 100%;
}

/* <CHANGE> Added Floating Data Cards */
.floating-card {
    position: absolute;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 16px;
    padding: 14px 18px;
    z-index: 5;
    animation: floatCard 6s ease-in-out infinite;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 95, 21, 0.1);
}

.floating-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.5), transparent);
}

.floating-card-1 {
    top: 5%;
    left: -5%;
    animation-delay: 0s;
}

.floating-card-2 {
    top: 5%;
    right: -5%;
    animation-delay: 1.5s;
}

.floating-card-3 {
    bottom: 8%;
    left: -5%;
    animation-delay: 3s;
}

.floating-card-4 {
    bottom: 8%;
    right: -5%;
    animation-delay: 4.5s;
}

@keyframes floatCard {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(1deg);
    }

    50% {
        transform: translateY(-5px) rotate(-1deg);
    }

    75% {
        transform: translateY(-15px) rotate(0.5deg);
    }
}

.card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    margin-bottom: 8px;
}

.card-value {
    font-size: 18px;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 2px;
}

.card-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* <CHANGE> Added Energy Beam Lines */
.energy-beams {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.energy-beam {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.4), rgba(255, 168, 2, 0.6), rgba(255, 95, 21, 0.4), transparent);
    height: 2px;
    border-radius: 2px;
    animation: beamMove 3s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 95, 21, 0.5), 0 0 20px rgba(255, 95, 21, 0.3);
}

.energy-beam-1 {
    width: 100px;
    top: 25%;
    left: 0;
    animation-delay: 0s;
    transform: rotate(45deg);
}

.energy-beam-2 {
    width: 80px;
    top: 60%;
    right: 5%;
    animation-delay: 1s;
    transform: rotate(-30deg);
}

.energy-beam-3 {
    width: 60px;
    bottom: 30%;
    left: 10%;
    animation-delay: 2s;
    transform: rotate(15deg);
}

@keyframes beamMove {

    0%,
    100% {
        opacity: 0.3;
        transform: translateX(0) scaleX(1);
    }

    50% {
        opacity: 1;
        transform: translateX(20px) scaleX(1.5);
    }
}

/* <CHANGE> Added Pulsing Data Nodes */
.data-nodes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
}

.data-node {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #FF5F15, #FFA802);
    border-radius: 50%;
    animation: nodeGlow 2s ease-in-out infinite;
}

.data-node::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 50%;
    animation: nodeRing 2s ease-in-out infinite;
}

.data-node::after {
    content: '';
    position: absolute;
    inset: -16px;
    border: 1px solid rgba(255, 95, 21, 0.15);
    border-radius: 50%;
    animation: nodeRing 2s ease-in-out infinite 0.3s;
}

.data-node-1 {
    top: 8%;
    left: 20%;
    animation-delay: 0s;
}

.data-node-2 {
    top: 12%;
    right: 15%;
    animation-delay: 0.5s;
}

.data-node-3 {
    bottom: 25%;
    left: 8%;
    animation-delay: 1s;
}

.data-node-4 {
    bottom: 12%;
    right: 20%;
    animation-delay: 1.5s;
}

.data-node-5 {
    top: 45%;
    left: 2%;
    animation-delay: 0.7s;
}

.data-node-6 {
    top: 35%;
    right: 5%;
    animation-delay: 1.2s;
}

@keyframes nodeGlow {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 95, 21, 0.5);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 25px rgba(255, 95, 21, 0.8), 0 0 50px rgba(255, 95, 21, 0.4);
    }
}

@keyframes nodeRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* <CHANGE> Added Animated Connection Paths */
.connection-paths {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.connection-paths svg {
    width: 100%;
    height: 100%;
}

.conn-path {
    fill: none;
    stroke: url(#pathGradient);
    stroke-width: 1.5;
    stroke-dasharray: 10 5;
    animation: pathFlow 4s linear infinite;
    opacity: 0.4;
}

@keyframes pathFlow {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -30;
    }
}

/* <CHANGE> Added Mini Stats Bubbles */
.mini-stat-bubble {
    position: absolute;
    background: rgba(255, 95, 21, 0.1);
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 30px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
    animation: bubbleFloat 5s ease-in-out infinite;
}

.mini-stat-bubble i {
    font-size: 12px;
    color: #FFA802;
}

.mini-stat-bubble span {
    font-size: 11px;
    font-weight: 700;
    color: white;
}

.bubble-1 {
    top: 2%;
    left: 35%;
    animation-delay: 0s;
}

.bubble-2 {
    bottom: 5%;
    left: 25%;
    animation-delay: 1.5s;
}

.bubble-3 {
    top: 40%;
    right: 0;
    animation-delay: 3s;
}

@keyframes bubbleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

/* <CHANGE> Added Rotating Ring Decorations */
.deco-ring-outer {
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px dashed rgba(255, 95, 21, 0.08);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: decoRingSpin 60s linear infinite;
}

.deco-ring-outer::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FF5F15;
    border-radius: 50%;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px #FF5F15;
}

.deco-ring-inner {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px dotted rgba(255, 168, 2, 0.06);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: decoRingSpin 45s linear infinite reverse;
}

@keyframes decoRingSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Central Core - Premium */
.why-central-core {
    position: relative;
    width: 160px;
    height: 160px;
    z-index: 10;
}

/* Enhanced outer ring with gradient and glow */
.core-outer-ring {
    position: absolute;
    inset: -35px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(#050816, #050816) padding-box,
        linear-gradient(135deg, rgba(255, 95, 21, 0.5), rgba(255, 168, 2, 0.2), rgba(255, 95, 21, 0.5)) border-box;
    animation: whyCoreRotate 25s linear infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.3);
    }
}

.core-middle-ring {
    position: absolute;
    inset: -20px;
    border: 1px dashed rgba(255, 95, 21, 0.3);
    border-radius: 50%;
    animation: whyCoreRotate 18s linear infinite reverse;
}

@keyframes whyCoreRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Enhanced core with better glow and pulse */
.core-inner-circle {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 95, 21, 0.2), rgba(255, 168, 2, 0.1));
    backdrop-filter: blur(25px);
    border: 2px solid rgba(255, 95, 21, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 100px rgba(255, 95, 21, 0.3),
        0 0 60px rgba(255, 95, 21, 0.2),
        0 0 30px rgba(255, 95, 21, 0.1),
        inset 0 0 50px rgba(255, 95, 21, 0.15),
        inset 0 -20px 40px rgba(255, 168, 2, 0.1);
    animation: whyCorePulse 4s ease-in-out infinite;
    overflow: hidden;
}


.core-inner-circle img {
    object-fit: contain;
    height: 80px;
}

.core-inner-circle::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255, 95, 21, 0.1) 10%, transparent 20%);
    animation: coreRotateGlow 8s linear infinite;
}

@keyframes coreRotateGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes whyCorePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 100px rgba(255, 95, 21, 0.3), 0 0 60px rgba(255, 95, 21, 0.2), 0 0 30px rgba(255, 95, 21, 0.1), inset 0 0 50px rgba(255, 95, 21, 0.15);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 120px rgba(255, 95, 21, 0.4), 0 0 80px rgba(255, 95, 21, 0.3), 0 0 40px rgba(255, 95, 21, 0.15), inset 0 0 60px rgba(255, 95, 21, 0.2);
    }
}

.core-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 95, 21, 0.4));
}

/* Enhanced logo text with 3D effect */
.core-logo-text {
    font-size: 46px;
    font-weight: 900;

    background: linear-gradient(180deg, #FFD93D 0%, #FFA802 40%, #FF5F15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(255, 95, 21, 0.4)) drop-shadow(0 0 30px rgba(255, 95, 21, 0.3));
    position: relative;
    z-index: 2;
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Rotating Text Around Core */
.core-rotating-text {
    position: absolute;
    inset: -55px;
    animation: whyCoreRotate 35s linear infinite;
}

.rotating-svg {
    width: 100%;
    height: 100%;
}

.circular-text {
    fill: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;

}

/* =======================================
   ORBITING FEATURE ICONS - PERFECT CIRCLE
   ======================================= */

/* Enhanced orbit ring with gradient border */
.why-orbit-ring {
    position: absolute;
    width: 450px;
    height: 450px;
    border: 2px solid transparent;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(#050816, #050816) padding-box,
        linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.05), rgba(255, 95, 21, 0.15)) border-box;
    box-shadow:
        0 0 60px rgba(255, 95, 21, 0.05),
        inset 0 0 60px rgba(255, 95, 21, 0.03);
}

.why-orbit-ring::before {
    content: '';
    position: absolute;
    inset: 25px;
    border: 1px dashed rgba(255, 95, 21, 0.1);
    border-radius: 50%;
}

.why-orbit-ring::after {
    content: '';
    position: absolute;
    inset: -15px;
    border: 1px solid rgba(255, 95, 21, 0.05);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite;
}

@keyframes ringPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Update orbit rotation to detect top position */
.why-orbit-container {
    position: absolute;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: whyOrbitSpin 40s linear infinite;
}

/* Update individual orbit items to sync with rotation */
.why-orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: whyOrbitCounterSpin 40s linear infinite;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Position each item on circle - radius 225px */
.orbit-pos-1 {
    transform: rotate(0deg) translateY(-225px);
}

.orbit-pos-2 {
    transform: rotate(60deg) translateY(-225px);
}

.orbit-pos-3 {
    transform: rotate(120deg) translateY(-225px);
}

.orbit-pos-4 {
    transform: rotate(180deg) translateY(-225px);
}

.orbit-pos-5 {
    transform: rotate(240deg) translateY(-225px);
}

.orbit-pos-6 {
    transform: rotate(300deg) translateY(-225px);
}

@keyframes whyOrbitSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes whyOrbitCounterSpin {
    0% {
        transform: rotate(0deg) translateY(-225px) rotate(0deg);
    }

    100% {
        transform: rotate(0deg) translateY(-225px) rotate(-360deg);
    }
}

/* Counteract parent rotation to keep icons upright */
.orbit-pos-1 {
    animation-name: orbit1Counter;
}

.orbit-pos-2 {
    animation-name: orbit2Counter;
}

.orbit-pos-3 {
    animation-name: orbit3Counter;
}

.orbit-pos-4 {
    animation-name: orbit4Counter;
}

.orbit-pos-5 {
    animation-name: orbit5Counter;
}

.orbit-pos-6 {
    animation-name: orbit6Counter;
}

@keyframes orbit1Counter {
    from {
        transform: rotate(0deg) translateY(-225px) rotate(0deg);
    }

    to {
        transform: rotate(0deg) translateY(-225px) rotate(-360deg);
    }
}

@keyframes orbit2Counter {
    from {
        transform: rotate(60deg) translateY(-225px) rotate(-60deg);
    }

    to {
        transform: rotate(60deg) translateY(-225px) rotate(-420deg);
    }
}

@keyframes orbit3Counter {
    from {
        transform: rotate(120deg) translateY(-225px) rotate(-120deg);
    }

    to {
        transform: rotate(120deg) translateY(-225px) rotate(-480deg);
    }
}

@keyframes orbit4Counter {
    from {
        transform: rotate(180deg) translateY(-225px) rotate(-180deg);
    }

    to {
        transform: rotate(180deg) translateY(-225px) rotate(-540deg);
    }
}

@keyframes orbit5Counter {
    from {
        transform: rotate(240deg) translateY(-225px) rotate(-240deg);
    }

    to {
        transform: rotate(240deg) translateY(-225px) rotate(-600deg);
    }
}

@keyframes orbit6Counter {
    from {
        transform: rotate(300deg) translateY(-225px) rotate(-300deg);
    }

    to {
        transform: rotate(300deg) translateY(-225px) rotate(-660deg);
    }
}



.why-orbit-item:hover .orbit-bubble {
    transform: scale(1.15);
}

/* Orbit Bubble */
.orbit-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced orbit icons with 3D effects and better shadows */
.orbit-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 5px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 -3px 10px rgba(0, 0, 0, 0.2) inset;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Glass reflection effect */
.orbit-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%);
    transition: 0.6s ease;
}

/* Top highlight */
.orbit-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    border-radius: 22px 22px 50% 50%;
    pointer-events: none;
}

.why-orbit-item:hover .orbit-icon::before {
    left: 100%;
}

.why-orbit-item:hover .orbit-icon {
    transform: translateY(-8px) scale(1.08);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 40px var(--glow-color, rgba(255, 95, 21, 0.5)),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

/* Active state for orbit items */
.why-orbit-item.active .orbit-icon {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 50px var(--glow-color, rgba(255, 95, 21, 0.6)),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset;
}

/* Gradient Backgrounds - Premium with enhanced colors */
.security-gradient {
    background: linear-gradient(145deg, #FF6B6B 0%, #EE5A6F 50%, #D64545 100%);
    --glow-color: rgba(255, 107, 107, 0.6);
}

.speed-gradient {
    background: linear-gradient(145deg, #FFD93D 0%, #F6C23E 50%, #E5B12F 100%);
    --glow-color: rgba(255, 217, 61, 0.6);
}

.support-gradient {
    background: linear-gradient(145deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
    --glow-color: rgba(59, 130, 246, 0.6);
}

.innovation-gradient {
    background: linear-gradient(145deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    --glow-color: rgba(139, 92, 246, 0.6);
}

.reliability-gradient {
    background: linear-gradient(145deg, #22C55E 0%, #16A34A 50%, #15803D 100%);
    --glow-color: rgba(34, 197, 94, 0.6);
}

.rewards-gradient {
    background: linear-gradient(145deg, #EC4899 0%, #DB2777 50%, #BE185D 100%);
    --glow-color: rgba(236, 72, 153, 0.6);
}

.orbit-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 1;
    transition: all 0.4s ease;
}

.orbit-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 1.2;

    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.orbit-subtitle {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Enhanced connection lines with animated gradient */
.why-connection-lines {
    position: absolute;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.conn-line {
    stroke: url(#lineGradient);
    stroke-width: 1;
    stroke-dasharray: 8, 8;
    animation: whyLineDash 2s linear infinite;
    transition: all 0.4s ease;
    opacity: 0.4;
}

.conn-line.active {
    stroke-width: 2;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 95, 21, 0.5));
}

@keyframes whyLineDash {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 16;
    }
}

/* =======================================
   RIGHT SIDE - FEATURE DETAILS PANEL
   ======================================= */

.why-details-panel {
    position: relative;
    height: 55vh;
    overflow: hidden;
}

/* Enhanced detail box with better glassmorphism */
.why-detail-box {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 95, 21, 0.15);
    border-radius: 28px;
    padding: 30px;
    opacity: 0;
    transform: translateX(80px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}

.why-detail-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.5), transparent);
}

/* Added animated border glow */
.why-detail-box::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 95, 21, 0.1) 50%, transparent 60%);
    border-radius: 30px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.why-detail-box.active::after {
    opacity: 1;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.why-detail-box.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

/* Enhanced icon wrap with floating animation */
.detail-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    flex-shrink: 0;
    position: relative;
    animation: iconFloat 4s ease-in-out infinite;
}

.detail-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: inherit;
    opacity: 0.3;
    filter: blur(10px);
    z-index: -1;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.detail-title-wrap {
    flex: 1;
}

.detail-title {
    font-size: 24px;
    font-weight: 800;
    color: orange;
    margin-bottom: 10px;
    line-height: 1.2;

}

/* Enhanced badge with shimmer effect */
.detail-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.2), rgba(255, 168, 2, 0.15));
    border: 1px solid rgba(255, 95, 21, 0.35);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: #FFA802;
    text-transform: uppercase;
    letter-spacing: 1px;

    position: relative;
    overflow: hidden;
}

.detail-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: badgeShimmer 3s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.detail-description {
    font-size: 16px;
    color: white;
    line-height: 1.8;
    margin-bottom: 20px;
}

.detail-points {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Enhanced list items with hover effect */
.detail-points li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: default;
}

.detail-points li:hover {
    background: rgba(255, 95, 21, 0.08);
    transform: translateX(5px);
}

.detail-points i {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22C55E;
    font-size: 11px;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

/* Enhanced metric card with animated border */
.detail-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(255, 95, 21, 0.1), rgba(255, 168, 2, 0.05));
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.detail-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF5F15, #FFA802, #FF5F15, transparent);
    animation: metricLine 3s ease-in-out infinite;
}

@keyframes metricLine {

    0%,
    100% {
        opacity: 0.5;
        transform: scaleX(0.5);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.detail-metric::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 95, 21, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.metric-value {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #FF5F15, #FFA802, #FFD93D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;

    position: relative;
    z-index: 1;
    text-shadow: 0 0 40px rgba(255, 95, 21, 0.3);
}

.metric-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;

    position: relative;
    z-index: 1;
}

/* =======================================
   BOTTOM STATS BAR
   ======================================= */

/* Enhanced stats bar with premium styling */
.why-stats-bar {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 95, 21, 0.12);
    border-radius: 28px;
    flex-wrap: wrap;
    overflow: hidden;
}

.why-stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.4), transparent);
}

.why-stats-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(255, 95, 21, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
    z-index: 1;
}

.stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 95, 21, 0.08);
}

/* Enhanced stat icon with better 3D effect */
.stat-icon {
    width: 58px;
    height: 58px;
    background: linear-gradient(145deg, #FF5F15, #FFA802);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow:
        0 15px 40px rgba(255, 95, 21, 0.35),
        0 5px 15px rgba(255, 95, 21, 0.2),
        inset 0 -3px 10px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.stat-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.stat-item:hover .stat-icon::before {
    left: 100%;
}

.stat-item:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow:
        0 20px 50px rgba(255, 95, 21, 0.45),
        0 10px 20px rgba(255, 95, 21, 0.25),
        inset 0 -3px 10px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.stat-number {
    font-size: 24px;
    font-weight: 800;
    color: white;
    line-height: 1;

}

.stat-label {
    font-size: 16px;
    /*color: rgba(255, 255, 255, 0.55);*/
    color: white;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgba(255, 95, 21, 0.25), transparent);
}

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

@media (max-width: 1199px) {
    .why-visual-hub {
        max-width: 450px;
        height: 450px;
    }

    .deco-ring-outer {
        width: 420px;
        height: 420px;
    }

    .deco-ring-inner {
        width: 400px;
        height: 400px;
    }

    .why-orbit-ring,
    .why-orbit-container,
    .why-connection-lines {
        width: 350px;
        height: 350px;
    }

    .orbit-pos-1 {
        transform: rotate(0deg) translateY(-180px);
    }

    .orbit-pos-2 {
        transform: rotate(60deg) translateY(-180px);
    }

    .orbit-pos-3 {
        transform: rotate(120deg) translateY(-180px);
    }

    .orbit-pos-4 {
        transform: rotate(180deg) translateY(-180px);
    }

    .orbit-pos-5 {
        transform: rotate(240deg) translateY(-180px);
    }

    .orbit-pos-6 {
        transform: rotate(300deg) translateY(-180px);
    }

    @keyframes orbit1Counter-md {
        from {
            transform: rotate(0deg) translateY(-200px) rotate(0deg);
        }

        to {
            transform: rotate(0deg) translateY(-200px) rotate(-360deg);
        }
    }

    @keyframes orbit2Counter-md {
        from {
            transform: rotate(60deg) translateY(-200px) rotate(-60deg);
        }

        to {
            transform: rotate(60deg) translateY(-200px) rotate(-420deg);
        }
    }

    @keyframes orbit3Counter-md {
        from {
            transform: rotate(120deg) translateY(-200px) rotate(-120deg);
        }

        to {
            transform: rotate(120deg) translateY(-200px) rotate(-480deg);
        }
    }

    @keyframes orbit4Counter-md {
        from {
            transform: rotate(180deg) translateY(-200px) rotate(-180deg);
        }

        to {
            transform: rotate(180deg) translateY(-200px) rotate(-540deg);
        }
    }

    @keyframes orbit5Counter-md {
        from {
            transform: rotate(240deg) translateY(-200px) rotate(-240deg);
        }

        to {
            transform: rotate(240deg) translateY(-200px) rotate(-600deg);
        }
    }

    @keyframes orbit6Counter-md {
        from {
            transform: rotate(300deg) translateY(-200px) rotate(-300deg);
        }

        to {
            transform: rotate(300deg) translateY(-200px) rotate(-660deg);
        }
    }

    .why-details-panel {
        height: 600px;
    }

    .floating-card {
        padding: 12px 14px;
    }

    .card-value {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    /* .why-nexora-premium {
        padding: 70px 0;
    } */

    .why-visual-hub {
        max-width: 450px;
        height: 450px;
        margin-bottom: 50px;
    }

    .deco-ring-outer,
    .deco-ring-inner {
        display: none;
    }

    .floating-card-2,
    .floating-card-4 {
        display: none;
    }

    .data-node-5,
    .data-node-6 {
        display: none;
    }

    .why-orbit-ring,
    .why-orbit-container,
    .why-connection-lines {
        width: 380px;
        height: 380px;
    }

    .orbit-pos-1 {
        animation-name: orbit1Counter-sm;
    }

    .orbit-pos-2 {
        animation-name: orbit2Counter-sm;
    }

    .orbit-pos-3 {
        animation-name: orbit3Counter-sm;
    }

    .orbit-pos-4 {
        animation-name: orbit4Counter-sm;
    }

    .orbit-pos-5 {
        animation-name: orbit5Counter-sm;
    }

    .orbit-pos-6 {
        animation-name: orbit6Counter-sm;
    }

    @keyframes orbit1Counter-sm {
        from {
            transform: rotate(0deg) translateY(-190px) rotate(0deg);
        }

        to {
            transform: rotate(0deg) translateY(-190px) rotate(-360deg);
        }
    }

    @keyframes orbit2Counter-sm {
        from {
            transform: rotate(60deg) translateY(-190px) rotate(-60deg);
        }

        to {
            transform: rotate(60deg) translateY(-190px) rotate(-420deg);
        }
    }

    @keyframes orbit3Counter-sm {
        from {
            transform: rotate(120deg) translateY(-190px) rotate(-120deg);
        }

        to {
            transform: rotate(120deg) translateY(-190px) rotate(-480deg);
        }
    }

    @keyframes orbit4Counter-sm {
        from {
            transform: rotate(180deg) translateY(-190px) rotate(-180deg);
        }

        to {
            transform: rotate(180deg) translateY(-190px) rotate(-540deg);
        }
    }

    @keyframes orbit5Counter-sm {
        from {
            transform: rotate(240deg) translateY(-190px) rotate(-240deg);
        }

        to {
            transform: rotate(240deg) translateY(-190px) rotate(-600deg);
        }
    }

    @keyframes orbit6Counter-sm {
        from {
            transform: rotate(300deg) translateY(-190px) rotate(-300deg);
        }

        to {
            transform: rotate(300deg) translateY(-190px) rotate(-660deg);
        }
    }

    .why-details-panel {
        height: auto;
        min-height: 600px;
    }

    .why-stats-bar {
        gap: 25px;
        padding: 30px 35px;
    }

    .stat-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .why-nexora-premium {
        padding: 60px 0;
    }

    .why-nexora-header {
        margin-bottom: 50px;
    }

    .why-nexora-title {
        font-size: 1.3rem;
    }

    .why-visual-hub {
        max-width: 360px;
        height: 360px;
    }

    .floating-card,
    .mini-stat-bubble,
    .energy-beams,
    .data-nodes,
    .connection-paths {
        display: none;
    }

    .why-orbit-ring,
    .why-orbit-container,
    .why-connection-lines {
        width: 320px;
        height: 320px;
    }

    .orbit-pos-1 {
        animation-name: orbit1Counter-xs;
    }

    .orbit-pos-2 {
        animation-name: orbit2Counter-xs;
    }

    .orbit-pos-3 {
        animation-name: orbit3Counter-xs;
    }

    .orbit-pos-4 {
        animation-name: orbit4Counter-xs;
    }

    .orbit-pos-5 {
        animation-name: orbit5Counter-xs;
    }

    .orbit-pos-6 {
        animation-name: orbit6Counter-xs;
    }

    @keyframes orbit1Counter-xs {
        from {
            transform: rotate(0deg) translateY(-160px) rotate(0deg);
        }

        to {
            transform: rotate(0deg) translateY(-160px) rotate(-360deg);
        }
    }

    @keyframes orbit2Counter-xs {
        from {
            transform: rotate(60deg) translateY(-160px) rotate(-60deg);
        }

        to {
            transform: rotate(60deg) translateY(-160px) rotate(-420deg);
        }
    }

    @keyframes orbit3Counter-xs {
        from {
            transform: rotate(120deg) translateY(-160px) rotate(-120deg);
        }

        to {
            transform: rotate(120deg) translateY(-160px) rotate(-480deg);
        }
    }

    @keyframes orbit4Counter-xs {
        from {
            transform: rotate(180deg) translateY(-160px) rotate(-180deg);
        }

        to {
            transform: rotate(180deg) translateY(-160px) rotate(-540deg);
        }
    }

    @keyframes orbit5Counter-xs {
        from {
            transform: rotate(240deg) translateY(-160px) rotate(-240deg);
        }

        to {
            transform: rotate(240deg) translateY(-160px) rotate(-600deg);
        }
    }

    @keyframes orbit6Counter-xs {
        from {
            transform: rotate(300deg) translateY(-160px) rotate(-300deg);
        }

        to {
            transform: rotate(300deg) translateY(-160px) rotate(-660deg);
        }
    }

    .why-central-core {
        width: 130px;
        height: 130px;
    }

    .core-logo,
    .core-logo-text {
        width: 65px;
        height: 65px;
        font-size: 32px;
    }

    .orbit-icon {
        width: 55px;
        height: 55px;
        font-size: 22px;
        border-radius: 16px;
    }

    .orbit-title {
        font-size: 10px;
    }

    .orbit-subtitle {
        font-size: 9px;
    }

    .why-detail-box {
        padding: 28px;
    }

    .detail-icon-wrap {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .detail-title {
        font-size: 20px;
    }

    .why-stats-bar {
        flex-direction: column;
        gap: 20px;
        padding: 28px;
    }

    .stat-item {
        width: 100%;
        justify-content: flex-start;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .why-nexora-premium {
        padding: 50px 0;
    }

    .why-header-badge {
        padding: 8px 18px;
    }

    .why-header-badge span {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .why-nexora-title {
        font-size: 1.3rem;
    }

    .why-nexora-subtitle {
        font-size: 0.9rem;
    }

    .why-visual-hub {
        max-width: 300px;
        height: 300px;
    }

    .why-orbit-ring,
    .why-orbit-container,
    .why-connection-lines {
        width: 280px;
        height: 280px;
    }

    .orbit-pos-1 {
        animation-name: orbit1Counter-xxs;
    }

    .orbit-pos-2 {
        animation-name: orbit2Counter-xxs;
    }

    .orbit-pos-3 {
        animation-name: orbit3Counter-xxs;
    }

    .orbit-pos-4 {
        animation-name: orbit4Counter-xxs;
    }

    .orbit-pos-5 {
        animation-name: orbit5Counter-xxs;
    }

    .orbit-pos-6 {
        animation-name: orbit6Counter-xxs;
    }

    @keyframes orbit1Counter-xxs {
        from {
            transform: rotate(0deg) translateY(-140px) rotate(0deg);
        }

        to {
            transform: rotate(0deg) translateY(-140px) rotate(-360deg);
        }
    }

    @keyframes orbit2Counter-xxs {
        from {
            transform: rotate(60deg) translateY(-140px) rotate(-60deg);
        }

        to {
            transform: rotate(60deg) translateY(-140px) rotate(-420deg);
        }
    }

    @keyframes orbit3Counter-xxs {
        from {
            transform: rotate(120deg) translateY(-140px) rotate(-120deg);
        }

        to {
            transform: rotate(120deg) translateY(-140px) rotate(-480deg);
        }
    }

    @keyframes orbit4Counter-xxs {
        from {
            transform: rotate(180deg) translateY(-140px) rotate(-180deg);
        }

        to {
            transform: rotate(180deg) translateY(-140px) rotate(-540deg);
        }
    }

    @keyframes orbit5Counter-xxs {
        from {
            transform: rotate(240deg) translateY(-140px) rotate(-240deg);
        }

        to {
            transform: rotate(240deg) translateY(-140px) rotate(-600deg);
        }
    }

    @keyframes orbit6Counter-xxs {
        from {
            transform: rotate(300deg) translateY(-140px) rotate(-300deg);
        }

        to {
            transform: rotate(300deg) translateY(-140px) rotate(-660deg);
        }
    }

    .why-central-core {
        width: 100px;
        height: 100px;
    }

    .core-outer-ring {
        inset: -25px;
    }

    .core-middle-ring {
        inset: -15px;
    }

    .core-rotating-text {
        inset: -40px;
    }

    .core-logo,
    .core-logo-text {
        width: 55px;
        height: 55px;
        font-size: 28px;
    }

    .orbit-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
        border-radius: 14px;
    }

    .why-orbit-item {
        width: 86px;
        height: 86px;
        margin-top: -43px;
        margin-left: -43px;
    }

    .orbit-label {
        display: none;
    }

    .why-detail-box {
        padding: 22px;
    }

    .detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .detail-title-wrap {
        text-align: center;
    }

    .detail-icon-wrap {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .detail-title {
        font-size: 18px;
    }

    .detail-description {
        font-size: 13px;
        text-align: center;
    }

    .detail-points li {
        font-size: 12px;
    }

    .metric-value {
        font-size: 36px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .stat-number {
        font-size: 22px;
        text-align: start;
    }

    .stat-label {
        font-size: 11px;
        text-align: start;
    }
}





/* Updated Card Wrapper for Dual Cards */
.card-wrapper-dual {
    position: relative;
    perspective: 2000px;
    margin-bottom: 30px;
    padding: 40px;
    height: 380px;
}




/* Primary Card (Front) - Rotated Left */
.card-primary {
    position: absolute;
    top: 15px;
    left: 10px;
    z-index: 2;
    transform: rotateY(-18deg) rotateX(8deg) rotateZ(-5deg);
    animation: cardPrimaryFloat 10s ease-in-out infinite;
}

@keyframes cardPrimaryFloat {

    0%,
    100% {
        transform: rotateY(-18deg) rotateX(8deg) rotateZ(-5deg) translateY(0) translateX(0);
    }

    33% {
        transform: rotateY(-18deg) rotateX(8deg) rotateZ(-5deg) translateY(-15px) translateX(5px);
    }

    66% {
        transform: rotateY(-18deg) rotateX(8deg) rotateZ(-5deg) translateY(-8px) translateX(-5px);
    }
}

/* Secondary Card (Back) - Rotated Right */
.card-secondary {
    margin-left: 1rem;
    z-index: 1;
    background: linear-gradient(145deg,
            #2a1f4d 0%,
            #3d2b6d 20%,
            #2f2459 40%,
            #4a357a 60%,
            #2a1f4d 100%);
    transform: rotateY(15deg) rotateX(-6deg) rotateZ(4deg);
    animation: cardSecondaryFloat 12s ease-in-out infinite 1s;
    opacity: 0.85;
}

@keyframes cardSecondaryFloat {

    0%,
    100% {
        transform: rotateY(15deg) rotateX(-6deg) rotateZ(4deg) translateY(0) translateX(0);
        opacity: 0.85;
    }

    33% {
        transform: rotateY(15deg) rotateX(-6deg) rotateZ(4deg) translateY(12px) translateX(-8px);
        opacity: 0.9;
    }

    66% {
        transform: rotateY(15deg) rotateX(-6deg) rotateZ(4deg) translateY(-10px) translateX(5px);
        opacity: 0.88;
    }
}





/* Card Hover Effects */
.card-wrapper-dual:hover .card-primary {
    transform: rotateY(-12deg) rotateX(5deg) rotateZ(-3deg) scale(1.02) translateZ(40px);
    z-index: 3;
    opacity: 1;
}

.card-wrapper-dual:hover .card-secondary {
    transform: rotateY(10deg) rotateX(-4deg) rotateZ(2deg) scale(0.98) translateZ(-20px);
    opacity: 0.75;
}

/* Card Type Badge for Secondary Card */
.card-type-badge {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(218, 165, 32, 0.2));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-type-badge i {
    color: #ffd700;
    font-size: 18px;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

/* Mastercard Logo Styling */
.mastercard-logo {
    display: flex;
    align-items: center;
    gap: -8px;
    position: relative;
}

.mc-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: relative;
}

.mc-red {
    background: #eb001b;
    z-index: 2;
}

.mc-yellow {
    background: #f79e1b;
    margin-left: -12px;
    z-index: 1;
}

/* Enhanced Glow Effects */
.card-wrapper-dual .card-glow {
    background: radial-gradient(ellipse at 35% 50%,
            rgba(255, 95, 21, 0.5) 0%,
            rgba(147, 51, 234, 0.3) 50%,
            transparent 70%);
    filter: blur(50px);
}

/* Individual Card Shadows */
.card-primary {
    box-shadow:
        -15px 30px 80px rgba(255, 95, 21, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.card-secondary {
    box-shadow:
        15px 35px 90px rgba(147, 51, 234, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .card-wrapper-dual {
        height: 350px;
        padding: 30px;
    }

    .card-primary {
        top: 30px;
        left: 10px;
        transform: rotateY(-12deg) rotateX(6deg) rotateZ(-3deg);
    }

    .card-secondary {
        top: 60px;
        right: 0;
        transform: rotateY(12deg) rotateX(-5deg) rotateZ(3deg);
    }
}

@media (max-width: 768px) {
    .card-wrapper-dual {
        height: 320px;
        padding: 20px;
    }

    .card-primary,
    .card-secondary {
        width: 320px;
        height: 200px;
    }

    .card-primary {
        top: 20px;
        left: 20px;
        transform: rotateY(-8deg) rotateX(4deg) rotateZ(-2deg);
    }

    .card-secondary {
        top: 50px;
        right: 10px;
        transform: rotateY(8deg) rotateX(-4deg) rotateZ(2deg);
    }
}

@media (max-width: 480px) {
    .card-wrapper-dual {
        height: 280px;
    }

    .card-primary,
    .card-secondary {
        width: 260px;
        height: 165px;
    }

    .card-primary {
        left: 5px;
        top: 15px;
    }

    .card-secondary {
        right: 5px;
        top: 45px;
    }
}





/* Shop Image Container - Replacing Phone Device */
.n1m-shop-image-container {
    width: 600px;
    height: 450px;
    position: relative;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 60px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 0 4px rgba(30, 30, 30, 1),
        0 0 0 5px rgba(255, 95, 21, 0.2),
        0 0 80px rgba(255, 95, 21, 0.15);
    animation: n1mPhoneFloat 6s ease-in-out infinite;
}

.n1m-shop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Premium border effect */
.n1m-shop-image-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 95, 21, 0.3) 20%,
            rgba(255, 168, 2, 0.2) 40%,
            rgba(255, 95, 21, 0.3) 60%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(255, 95, 21, 0.2) 100%);
    border-radius: 22px;
    z-index: -1;
    animation: n1mFrameShine 4s ease-in-out infinite;
    pointer-events: none;
}

@media (max-width: 768px) {
    .n1m-shop-image-container {
        width: 320px;
        height: 400px;
    }
}

@media (max-width: 480px) {
    .n1m-shop-image-container {
        width: 280px;
        height: 350px;
    }
}



.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 95, 21, 0.1);
    border: 2px solid rgba(255, 95, 21, 0.3);
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 25px;
    color: #FFA802;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: slideInDown 0.8s ease-out;
}

.app-badge i {
    font-size: 16px;
    animation: pulse 2s ease-in-out infinite;
}

.app-main-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    animation: slideInLeft 0.8s ease-out 0.2s both;
}

.gradient-word {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 500px;
    animation: slideInLeft 0.8s ease-out 0.3s both;
}








/* n1 pay consumer section start  */


/* ============================================
   N1 PAY CONSUMER SECTION - ORANGE THEME
   ============================================ */

.n1consumer-ultra-section {
    position: relative;
    min-height: 90vh;
    background: linear-gradient(135deg, #050816 0%, #0a0f1e 25%, #0d1230 50%, #0a0f1e 75%, #050816 100%);
    padding: 0;
    overflow: hidden;
}

.n1consumer-ultra-section-card {
    position: relative;
    border-radius: 36px;
    padding: 40px;
    overflow: hidden;

    border: 2px solid rgba(255, 95, 21, 0.4);
    background: rgba(5, 8, 22, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(255, 95, 21, 0.12);
}

/* Background Effects - Orange Theme */
.n1consumer-cosmic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.n1consumer-nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    animation: n1consumerNebulaFloat 35s ease-in-out infinite;
}

.nebula-orange {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #FF5F15 0%, transparent 70%);
    top: -250px;
    right: -150px;
}

.nebula-amber {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #FFA802 0%, transparent 70%);
    bottom: -200px;
    left: -150px;
    animation-delay: 12s;
}

.nebula-gold {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #FFD93D 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 24s;
}

@keyframes n1consumerNebulaFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.95);
    }
}

/* Hex Pattern */
.n1consumer-hex-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l26 15v30L30 60 4 45V15z' fill='none' stroke='%23FF5F15' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 70px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 70%);
    animation: hexDrift 40s linear infinite;
}

@keyframes hexDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 60px 70px;
    }
}

/* Particles Flow */
.n1consumer-particles-flow {
    position: absolute;
    inset: 0;
}

.n1consumer-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 50%;
    opacity: 0;
    animation: particleRise 20s infinite;
}

.n1consumer-particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.n1consumer-particle:nth-child(2) {
    left: 30%;
    animation-delay: 3s;
}

.n1consumer-particle:nth-child(3) {
    left: 50%;
    animation-delay: 6s;
}

.n1consumer-particle:nth-child(4) {
    left: 70%;
    animation-delay: 9s;
}

.n1consumer-particle:nth-child(5) {
    left: 85%;
    animation-delay: 12s;
}

.n1consumer-particle:nth-child(6) {
    left: 20%;
    animation-delay: 15s;
}

@keyframes particleRise {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0);
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(50px);
    }
}

/* Star Field */
.n1consumer-star-field {
    position: absolute;
    inset: 0;
}

.n1consumer-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: n1consumerStarTwinkle 3s infinite;
}

.n1consumer-star:nth-child(1) {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.n1consumer-star:nth-child(2) {
    top: 25%;
    left: 40%;
    animation-delay: 0.5s;
}

.n1consumer-star:nth-child(3) {
    top: 60%;
    left: 70%;
    animation-delay: 1s;
}

.n1consumer-star:nth-child(4) {
    top: 80%;
    left: 25%;
    animation-delay: 1.5s;
}

.n1consumer-star:nth-child(5) {
    top: 15%;
    right: 20%;
    animation-delay: 0.3s;
}

.n1consumer-star:nth-child(6) {
    top: 45%;
    right: 10%;
    animation-delay: 0.8s;
}

.n1consumer-star:nth-child(7) {
    top: 70%;
    left: 55%;
    animation-delay: 1.2s;
}

.n1consumer-star:nth-child(8) {
    top: 35%;
    left: 80%;
    animation-delay: 1.8s;
}

@keyframes n1consumerStarTwinkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* Header Zone */
.n1consumer-header-zone {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

.n1consumer-hologram-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 2px solid rgba(255, 95, 21, 0.4);
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.hologram-shimmer {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg,
            transparent,
            rgba(255, 95, 21, 0.4),
            transparent 30%);
    animation: n1consumerHologramSpin 4s linear infinite;
}

@keyframes n1consumerHologramSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.n1consumer-hologram-badge i {
    font-size: 18px;
    color: #FF5F15;
    position: relative;
    z-index: 1;
}

.n1consumer-hologram-badge span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #FFA802;
    position: relative;
    z-index: 1;
}

.n1consumer-mega-heading {
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: 900;
    color: white;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}

.n1consumer-gradient-flow {
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 50%, #FFD93D 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: n1consumerGradientFlow 3s linear infinite;
    display: inline-block;
}

@keyframes n1consumerGradientFlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

.n1consumer-tagline {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================
   LEFT SIDE - BENEFITS CONTENT
   ============================================ */

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

/* Premium Features Grid */
.n1consumer-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.n1consumer-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 95, 21, 0.15);
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.n1consumer-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 95, 21, 0.1), transparent);
    transition: left 0.5s ease;
}

.n1consumer-feature-card:hover::before {
    left: 100%;
}

.n1consumer-feature-card:hover {
    background: rgba(255, 95, 21, 0.08);
    border-color: rgba(255, 95, 21, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.2);
}

.feature-icon-wrap {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.2), rgba(255, 168, 2, 0.15));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #FFA802;
    flex-shrink: 0;
    position: relative;
    transition: all 0.4s ease;
}

.consumer-icon-glow {
    position: absolute;
    inset: -5px;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.4) 0%, transparent 70%);
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.n1consumer-feature-card:hover .consumer-icon-glow {
    opacity: 1;
}

.n1consumer-feature-card:hover .feature-icon-wrap {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    color: white;
    transform: scale(1.1) rotate(5deg);
}

.consumer-feature-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: orange;
    margin-bottom: 5px;
}

.consumer-feature-content p {
    font-size: 16px;
    color: white;
    line-height: 1.5;
    margin: 0;
    text-align: justify;
}

/* Stats Bar */
.n1consumer-stats-showcase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 95, 21, 0.2);
    border-radius: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.n1consumer-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.consumer-stat-number {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.consumer-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(255, 95, 21, 0.3), transparent);
}

/* CTA Button */
.n1consumer-cta-premium {
    position: relative;
    padding: 18px 38px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.4);
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.btn-text {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.btn-content i {
    font-size: 16px;
    color: white;
    transition: transform 0.3s ease;
}

.n1consumer-cta-premium:hover .btn-content i {
    transform: translateX(5px);
}

.btn-shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.n1consumer-cta-premium:hover .btn-shine-effect {
    left: 100%;
}

.btn-glow-effect {
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 52px;
    z-index: -1;
    filter: blur(15px);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.n1consumer-cta-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(255, 95, 21, 0.6);
}

.n1consumer-cta-premium:hover .btn-glow-effect {
    opacity: 0.8;
    filter: blur(25px);
}

/* ============================================
   RIGHT SIDE - MOCKUP SHOWCASE
   ============================================ */

.n1consumer-mockup-showcase {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 25px;
}

/* Decorative Rings */
.showcase-deco-ring {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(255, 95, 21, 0.15);
    animation: ringRotate 30s linear infinite;
}

.ring-2 {
    width: 580px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: dashed;
    border-color: rgba(255, 168, 2, 0.1);
    animation: ringRotate 45s linear infinite reverse;
}

.ring-3 {
    width: 460px;
    height: 460px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(255, 95, 21, 0.08);
    animation: ringRotate 20s linear infinite;
}

@keyframes ringRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Floating Data Points */
.showcase-data-point {
    position: absolute;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 95, 21, 0.3);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    animation: dataPointFloat 6s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-data-point:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.3);
}

.point-1 {
    top: 5%;
    right: 10%;
    animation-delay: 0s;
}

.point-2 {
    bottom: 10%;
    left: 5%;
    animation-delay: 2s;
}

.point-3 {
    top: 50%;
    left: -5%;
    animation-delay: 4s;
}

@keyframes dataPointFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.data-point-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    box-shadow: 0 5px 15px rgba(255, 95, 21, 0.4);
}

.data-point-value {
    font-size: 18px;
    font-weight: 800;
    color: white;
    display: block;
    line-height: 1;
}

.data-point-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}

/* Main Mockup Frame */
.n1consumer-mockup-frame {
    position: relative;
    width: 100%;
    max-height: 750px;
    border-radius: 30px;
    overflow: hidden;
    z-index: 5;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(255, 95, 21, 0.2);
}

.n1consumer-mockup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.n1consumer-mockup-frame:hover .n1consumer-mockup-image {
    transform: scale(1.05);
}

.mockup-glow-effect {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 95, 21, 0.3) 0%, transparent 60%);
    opacity: 0.5;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

.mockup-border-animate {
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, #FF5F15, #FFA802, #FFD93D, #FFA802, #FF5F15);
    background-size: 400% 400%;
    border-radius: 32px;
    z-index: -1;
    animation: borderFlow 5s ease infinite;
}

@keyframes borderFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.mockup-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Floating Badges */
.showcase-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 95, 21, 0.3);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #FF5F15;
    z-index: 10;
    animation: badgeFloat 4s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.badge-top-left {
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.badge-bottom-right {
    bottom: -10px;
    right: -10px;
    animation-delay: 2s;
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.showcase-badge i {
    font-size: 16px;
}

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

@media (max-width: 991px) {
    .n1consumer-ultra-section {
        padding: 70px 0;
    }

    .n1consumer-mockup-showcase {
        max-width: 500px;
        margin-top: 50px;
    }

    .n1consumer-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .credit-main-title {
        font-size: 1.3rem;
    }


    .app-main-title {
        font-size: 1.3rem;
    }

    .n1consumer-ultra-section {
        padding: 60px 0;
    }

    .n1consumer-header-zone {
        margin-bottom: 50px;
    }

    .n1consumer-mega-heading {
        font-size: 2rem;
    }

    .n1consumer-mockup-frame {
        max-height: 400px;
    }

    .n1consumer-features-grid {
        gap: 15px;
    }

    .n1consumer-feature-card {
        padding: 18px;
    }

    .n1consumer-stats-showcase {
        flex-direction: column;
        gap: 15px;
    }

    .stat-divider {
        display: none;
    }

    .point-3 {
        left: auto;
        right: 5%;
    }
}

@media (max-width: 576px) {

    .card-showcase {
        display: none;
    }

    .n1consumer-mockup-showcase {
        padding: 20px;
    }

    .n1consumer-mockup-frame {
        max-height: 350px;
    }

    .ring-1,
    .ring-2,
    .ring-3 {
        width: 380px;
        height: 380px;
    }

    .showcase-data-point {
        padding: 10px 14px;
    }

    .data-point-value {
        font-size: 16px;
    }

    .n1consumer-mega-heading {
        font-size: 1.6rem;
    }

    .feature-icon-wrap {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .n1consumer-cta-premium {
        width: 100%;
        justify-content: center;
    }
}

/* n1 pay consumer section end   */









/* 3d scroll section start  */
/* ==========================================
           3D OFFERS CAROUSEL SECTION
           ========================================== */
.n1pay-offers-3d-section {
    position: relative;
    min-height: auto;
    background: linear-gradient(135deg, #050816 0%, #0a0f1e 25%, #0d1230 50%, #0a0f1e 75%, #050816 100%);
    padding: 60px 40px;
    overflow: hidden;
}

/* Animated Background */
.offers-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.offers-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    animation: orbFloat 35s ease-in-out infinite;
}

.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #ff5f1591 0%, transparent 70%);
    top: -250px;
    right: -150px;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #FFA802 0%, transparent 70%);
    bottom: -200px;
    left: -150px;
    animation-delay: 12s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #FFD93D 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 24s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.95);
    }
}

.hex-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l26 15v30L30 60 4 45V15z' fill='none' stroke='%23FF5F15' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 70px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 70%);
}

/* Section Header */
.offers-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.offers-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.15), rgba(255, 168, 2, 0.1));
    border: 2px solid rgba(255, 95, 21, 0.4);
    padding: 12px 28px;
    border-radius: 50px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.badge-shine {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 95, 21, 0.4), transparent 30%);
    animation: badgeRotate 4s linear infinite;
}

@keyframes badgeRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.offers-badge i {
    font-size: 16px;
    color: #FF5F15;
    position: relative;
    z-index: 1;
}

.offers-badge span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #FFA802;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.offers-title {
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: 900;
    color: white;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}

.gradient-text {
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 50%, #FFD93D 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 3s linear infinite;
    display: inline-block;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

.offers-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

/* 3D Carousel Container */
.offers-3d-carousel {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 500px;
    perspective: 2000px;
    z-index: 2;
}

.carousel-3d-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.offer-card-3d {
    position: absolute;
    width: 500px;
    height: 320px;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.offer-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 2px solid rgba(255, 95, 21, 0.3);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(255, 95, 21, 0.2);
    backdrop-filter: blur(20px);
}

.offer-card-3d:hover .offer-card-inner {
    border-color: rgba(255, 95, 21, 0.6);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(255, 95, 21, 0.4);
}

.offer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.offer-card-3d:hover .offer-overlay {
    opacity: 1;
}

.offer-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.offer-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.offer-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(255, 95, 21, 0.4);
}

/* Card Positioning in 3D Space */
.offer-card-3d.active-card:nth-child(1) {
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(400px) scale(1.15) !important;
}

.offer-card-3d.active-card:nth-child(2) {
    transform: translate(-50%, -50%) rotateY(72deg) translateZ(400px) scale(1.15) !important;
}

.offer-card-3d.active-card:nth-child(3) {
    transform: translate(-50%, -50%) rotateY(144deg) translateZ(400px) scale(1.15) !important;
}

.offer-card-3d.active-card:nth-child(4) {
    transform: translate(-50%, -50%) rotateY(216deg) translateZ(400px) scale(1.15) !important;
}

.offer-card-3d.active-card:nth-child(5) {
    transform: translate(-50%, -50%) rotateY(288deg) translateZ(400px) scale(1.15) !important;
}

/* Navigation Buttons */
.carousel-nav-3d {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.2), rgba(255, 168, 2, 0.15));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 95, 21, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-nav-3d:hover {
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 15px 40px rgba(255, 95, 21, 0.4);
}

.nav-prev {
    left: 50px;
}

.nav-next {
    right: 50px;
}

/* Dots Indicator */
.carousel-dots-3d {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.dot-3d {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 95, 21, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot-3d.active {
    width: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    border-color: transparent;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .offers-3d-carousel {
        height: 550px;
    }

    .offer-card-3d {
        width: 450px;
        height: 300px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(380px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(380px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(380px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(380px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(380px) scale(1.15) !important;
    }
}

@media (max-width: 1200px) {
    .n1pay-offers-3d-section {
        padding: 80px 20px;
    }

    .offers-header {
        margin-bottom: 60px;
    }

    .offers-3d-carousel {
        height: 480px;
        max-width: 95%;
        margin: 0 auto;
    }

    .offer-card-3d {
        width: 400px;
        height: 270px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(340px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(340px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(340px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(340px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(340px) scale(1.15) !important;
    }

    .nav-prev {
        left: 40px;
    }

    .nav-next {
        right: 40px;
    }

    .offers-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 992px) {
    .offers-3d-carousel {
        height: 420px;
    }

    .offer-card-3d {
        width: 360px;
        height: 240px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(300px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(300px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(300px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(300px) scale(1.15) !important;
    }

    .offers-title {
        font-size: 2rem;
    }

    .offer-title {
        font-size: 1.3rem;
    }

    .carousel-nav-3d {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }

    .nav-prev {
        left: 25px;
    }

    .nav-next {
        right: 25px;
    }
}

@media (max-width: 768px) {
    .n1pay-offers-3d-section {
        padding: 60px 15px;
    }

    .offers-header {
        margin-bottom: 50px;
    }

    .offers-title {
        font-size: 1.8rem;
    }

    .offers-subtitle {
        font-size: 1rem;
    }

    .offers-3d-carousel {
        height: 380px;
        max-width: 100%;
    }

    .offer-card-3d {
        width: 320px;
        height: 215px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(260px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(260px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(260px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(260px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(260px) scale(1.15) !important;
    }

    .carousel-nav-3d {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .nav-prev {
        left: 15px;
    }

    .nav-next {
        right: 15px;
    }

    .offer-overlay {
        padding: 18px;
    }

    .offer-title {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    .offer-description {
        font-size: 0.9rem;
    }

    .carousel-dots-3d {
        bottom: -70px;
        gap: 12px;
    }

    .dot-3d {
        width: 10px;
        height: 10px;
    }

    .dot-3d.active {
        width: 35px;
    }

    .offer-badge {
        top: 15px;
        right: 15px;
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

@media (max-width: 640px) {
    .n1pay-offers-3d-section {
        padding: 50px 12px;
    }

    .offers-header {
        margin-bottom: 40px;
    }

    .offers-badge {
        padding: 10px 22px;
        margin-bottom: 18px;
    }

    .offers-badge i {
        font-size: 14px;
    }

    .offers-badge span {
        font-size: 12px;
    }

    .offers-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }

    .offers-subtitle {
        font-size: 0.95rem;
    }

    .offers-3d-carousel {
        height: 340px;
    }

    .offer-card-3d {
        width: 280px;
        height: 190px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(220px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(220px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(220px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(220px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(220px) scale(1.15) !important;
    }

    .carousel-nav-3d {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .nav-prev {
        left: 10px;
    }

    .nav-next {
        right: 10px;
    }

    .offer-overlay {
        padding: 15px;
    }

    .offer-title {
        font-size: 1rem;
    }

    .offer-description {
        font-size: 0.85rem;
    }

    .offer-badge {
        top: 12px;
        right: 12px;
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    .carousel-dots-3d {
        bottom: -60px;
    }
}

@media (max-width: 480px) {
    .n1pay-offers-3d-section {
        padding: 40px 10px;
    }

    .offers-title {
        font-size: 1.5rem;
    }

    .offers-subtitle {
        font-size: 0.9rem;
    }

    .offers-3d-carousel {
        height: 300px;
    }

    .offer-card-3d {
        width: 260px;
        height: 175px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(200px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(200px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(200px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(200px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(200px) scale(1.15) !important;
    }

    .carousel-nav-3d {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .nav-prev {
        left: 5px;
    }

    .nav-next {
        right: 5px;
    }

    .offer-card-inner {
        border-radius: 16px;
    }

    .offer-overlay {
        padding: 12px;
    }

    .offer-title {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .offer-description {
        font-size: 0.8rem;
    }

    .carousel-dots-3d {
        bottom: -55px;
        gap: 10px;
    }

    .dot-3d {
        width: 8px;
        height: 8px;
    }

    .dot-3d.active {
        width: 30px;
    }
}

@media (max-width: 360px) {
    .offers-title {
        font-size: 1.4rem;
    }

    .offers-3d-carousel {
        height: 280px;
    }

    .offer-card-3d {
        width: 240px;
        height: 160px;
    }

    .offer-card-3d.active-card:nth-child(1) {
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(180px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(2) {
        transform: translate(-50%, -50%) rotateY(72deg) translateZ(180px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(3) {
        transform: translate(-50%, -50%) rotateY(144deg) translateZ(180px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(4) {
        transform: translate(-50%, -50%) rotateY(216deg) translateZ(180px) scale(1.15) !important;
    }

    .offer-card-3d.active-card:nth-child(5) {
        transform: translate(-50%, -50%) rotateY(288deg) translateZ(180px) scale(1.15) !important;
    }

    .carousel-nav-3d {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* 3d scroll section end   */


@media (max-width: 767px) {

    .why-details-panel {
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 20px;
    }

    .why-detail-box {
        position: relative !important;
        inset: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        margin-bottom: 25px;
    }
}


/* Success Notification */

.bc-success-popup {
    display: none;
    /* hide initially */
}

.bc-success-popup.show-popup {
    animation: successPopup 1.2s ease-in-out forwards;
}

.bc-success-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    /*background: rgba(0, 200, 83, 0.15);*/
    background: rgb(0 200 83 / 95%);
    backdrop-filter: blur(25px);
    border: 3px solid #00C853;
    border-radius: 22px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 25px 70px rgba(0, 200, 83, 0.5);
    animation: successPopup 7s ease-in-out infinite;
    z-index: 25;
}

@keyframes successPopup {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}


.success-check-icon {
    width: 75px;
    height: 75px;
    background: #00C853;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    animation: successCheck 1.5s ease-in-out;
}

@keyframes successCheck {
    0% {
        transform: rotate(0deg) scale(0);
    }

    50% {
        transform: rotate(180deg) scale(1.3);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.success-check-icon i {
    font-size: 38px;
    color: white;
}

.success-message {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin: 0 0 8px 0;
    /*display: none;*/
}

.success-submessage {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    display: none;
}



.input-group-modern {
    position: relative;
    margin-bottom: 5px;
}

.input-group-modern input,
.input-group-modern select,
.input-group-modern textarea {
    width: 100%;
    padding: 15px 12px;
    background: rgba(255, 255, 255, 0.05);
    /*border: 2px solid rgba(255, 255, 255, 0.2);*/
    border: 2px solid rgb(200 70 20 / 20%);
    border-radius: 8px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    font-weight: 500;
}

.input-group-modern input::placeholder,
.input-group-modern textarea::placeholder {
    color: transparent;
}

.input-group-modern label {
    position: absolute;
    left: 12px;
    top: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 6px;
    z-index: 1;
}

.input-group-modern label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #1a2556 0%, #2D365E 80%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.input-group-modern input:focus,
.input-group-modern select:focus,
.input-group-modern textarea:focus {
    border-color: var(--secondary-orange);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 95, 21, 0.15);
    font-size: 20px;
}

.input-group-modern input:focus~label,
.input-group-modern select:focus~label,
.input-group-modern textarea:focus~label {
    top: -11px;
    left: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-orange);
    padding: 0 6px;
}

.input-group-modern input:focus~label::before,
.input-group-modern input:not(:placeholder-shown)~label::before,
.input-group-modern select:valid:not([value=""])~label::before,
.input-group-modern textarea:not(:placeholder-shown)~label::before {
    opacity: 1;
}

.input-group-modern input:not(:placeholder-shown)~label,
.input-group-modern select:valid:not([value=""])~label,
.input-group-modern textarea:not(:placeholder-shown)~label {
    top: -11px;
    left: 10px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 6px;
}



.input-group-modern textarea {
    width: 100%;
    padding: 15px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
    outline: none;
    font-weight: 500;
    resize: vertical;
    /* Important - allows vertical resize only */
    min-height: 120px;
    /* Minimum height */
}

.input-group-modern label {
    position: absolute;
    left: 12px;
    top: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 6px;
    z-index: 2;
    /* Increase z-index */
    line-height: 1;
    /* Important for proper positioning */
}

/* Specifically for textarea label positioning */
.input-group-modern textarea+label,
.input-group-modern label:has(+ textarea) {
    top: 15px;
    /* Same as padding-top of textarea */
}

/* When textarea is focused or filled */
.input-group-modern textarea:focus+label,
.input-group-modern textarea:not(:placeholder-shown)+label {
    top: -11px;
    left: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-orange);
    padding: 0 6px;
}

.input-group-modern textarea:not(:placeholder-shown)+label {
    color: rgba(255, 255, 255, 0.8);
}

/* Background for label */
.input-group-modern textarea:focus+label::before,
.input-group-modern textarea:not(:placeholder-shown)+label::before {
    opacity: 1;
}

.input-group-modern select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 35px;
    font-size: 19px;
}

.input-group-modern select option {
    background: #0d163e;
    color: white;
    padding: 10px;
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.input-group-modern select:focus~.select-arrow {
    color: var(--secondary-orange);
    transform: translateY(-50%) rotate(180deg);
}

/* Fix dropdown positioning */
.input-group-modern {
    position: relative;
    z-index: 1;
}





















/* TV Container with Perspective */
.tv-wrapper {
    perspective: 1400px;
    width: 90%;
    max-width: 700px;
}

/* The entire TV */
.tv {
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    cursor: pointer;
}

/* TV Frame */
.tv-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 10px solid black;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 120px rgb(111 110 244 / 39%), inset 0 0 40px rgba(255, 255, 255, 0.05);
}

/* Video inside the TV */
.tv-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Screen Reflection */
.reflection {
    position: absolute;
    top: 0;
    left: -40%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    pointer-events: none;
}

/* TV Stand */
.tv-stand {
    width: 40%;
    height: 15px;
    background: black;
    margin: 20px auto 0;
    border-radius: 10px;

    box-shadow: 0 10px 30px rgb(127 148 225 / 60%), inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;

}

.content {
    position: relative;
    z-index: 10;
    color: white;
    padding: 20px;
}






































/* Premium Bill Payment Animation Styles */
.pmnt-bill-animation-container {
    position: relative;
    width: 100%;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; */
    /* background: linear-gradient(135deg, rgba(10, 10, 20, 0.95), rgba(20, 20, 40, 0.95)); */
}

.pmnt-bill-bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 95, 21, 0.35), rgba(255, 168, 2, 0.15), transparent);
    border-radius: 50%;
    filter: blur(100px);
    animation: pmntBillPulseGlow 5s ease-in-out infinite;
}

.pmnt-bill-bg-glow:nth-child(2) {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 168, 2, 0.25), transparent);
    animation-delay: 2.5s;
}

@keyframes pmntBillPulseGlow {

    0%,
    100% {
        transform: scale(1) translate(-50%, -50%);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.3) translate(-50%, -50%);
        opacity: 0.6;
    }
}

.pmnt-bill-stage {
    position: relative;
    width: 100%;
    /* max-width: 550px; */
    height: 550px;
}

/* Phase 1 - Center Logo with Premium Design */
.pmnt-bill-center-logo {
    position: absolute;
    top: 56%;
    left: 56%;
    transform: translate(-56%, -56%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.pmnt-bill-center-logo.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
}

.pmnt-bill-logo-text {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 40%, #FFD700 70%, #FFA802 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    letter-spacing: 4px;
    animation: pmntBillLogoShine 4s linear infinite, pmntBillLogoFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 30px rgba(255, 95, 21, 0.6));
    position: relative;
}

.pmnt-bill-logo-text::before {
    content: 'N1Pay';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(20px);
    opacity: 0.7;
    z-index: -1;
}

@keyframes pmntBillLogoShine {
    to {
        background-position: 200% center;
    }
}

@keyframes pmntBillLogoFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

.pmnt-bill-logo-tagline {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 168, 2, 0.9);
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: pmntBillTaglineFade 2s ease-in-out infinite;
}

@keyframes pmntBillTaglineFade {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

.pmnt-bill-logo-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255, 95, 21, 0.15);
    border: 2px solid rgba(255, 95, 21, 0.4);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
}

.pmnt-bill-logo-badge i {
    color: #22C55E;
    font-size: 14px;
}

/* Service Icons Circle */
.pmnt-bill-service-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.pmnt-bill-service-circle.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    pointer-events: none;
}

.pmnt-bill-service-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    opacity: 0;
    animation: pmntBillFadeInIcon 0.7s ease-out forwards;
}

.pmnt-bill-service-item:nth-child(1) {
    animation-delay: 0s;
}

.pmnt-bill-service-item:nth-child(2) {
    animation-delay: 0.1s;
}

.pmnt-bill-service-item:nth-child(3) {
    animation-delay: 0.2s;
}

.pmnt-bill-service-item:nth-child(4) {
    animation-delay: 0.3s;
}

.pmnt-bill-service-item:nth-child(5) {
    animation-delay: 0.4s;
}

.pmnt-bill-service-item:nth-child(6) {
    animation-delay: 0.5s;
}

@keyframes pmntBillFadeInIcon {
    to {
        opacity: 1;
    }
}

.pmnt-bill-service-wrapper {
    width: 85px;
    height: 85px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 3px solid rgba(255, 95, 21, 0.25);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: white;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.pmnt-bill-service-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.25), transparent);
    opacity: 0;
    transition: opacity 0.6s;
}

.pmnt-bill-service-item.active .pmnt-bill-service-wrapper {
    transform: scale(1.5);
    border-color: rgba(255, 95, 21, 1);
    box-shadow: 0 0 60px rgba(255, 95, 21, 0.9), 0 20px 60px rgba(0, 0, 0, 0.7);
}

.pmnt-bill-service-item.active .pmnt-bill-service-wrapper::before {
    opacity: 1;
}

.pmnt-bill-service-label {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.5s;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.pmnt-bill-service-item.active .pmnt-bill-service-label {
    opacity: 1;
    color: #FFA802;
    text-shadow: 0 0 15px rgba(255, 168, 2, 0.6);
}

.pmnt-bill-electricity {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.pmnt-bill-mobile {
    background: linear-gradient(135deg, #00D9FF, #0080FF);
}

.pmnt-bill-internet {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.pmnt-bill-water {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.pmnt-bill-gas {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.pmnt-bill-credit {
    background: linear-gradient(135deg, #10B981, #059669);
}

/* Phase 2 - Enhanced Payment Methods */
.pmnt-bill-payment-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.pmnt-bill-payment-container.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.pmnt-bill-payment-container.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
}

.pmnt-bill-payment-header {
    text-align: center;
    margin-bottom: 30px;
    animation: pmntBillSlideDown 0.8s ease-out;
}

@keyframes pmntBillSlideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

.pmnt-bill-payment-title {
    font-size: 24px;
    font-weight: 900;
    color: white;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.pmnt-bill-payment-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 168, 2, 0.8);
    letter-spacing: 1px;
}

.pmnt-bill-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.pmnt-bill-payment-card {
    width: 160px;
    height: 150px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(30px);
    border: 3px solid rgba(255, 95, 21, 0.35);
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 42px;
    color: white;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.4);
}

.pmnt-bill-payment-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 95, 21, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.pmnt-bill-payment-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s;
}

.pmnt-bill-payment-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 95, 21, 0.6);
}

.pmnt-bill-payment-card:hover::before {
    opacity: 1;
}

.pmnt-bill-payment-card:hover::after {
    left: 100%;
}

.pmnt-bill-payment-card i {
    position: relative;
    z-index: 1;
    transition: transform 0.5s;
}

.pmnt-bill-payment-name {
    font-size: 15px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.95);
    position: relative;
    z-index: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pmnt-bill-payment-desc {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 1;
    letter-spacing: 0.8px;
}

.pmnt-bill-payment-card.active {
    transform: scale(1.2) translateY(-5px);
    border-color: rgba(255, 95, 21, 1);
    box-shadow: 0 0 60px rgba(255, 95, 21, 0.8), 0 25px 70px rgba(0, 0, 0, 0.6);
    background: rgba(255, 95, 21, 0.15);
}

.pmnt-bill-payment-card.active i {
    transform: rotateY(360deg) scale(1.3);
}

.pmnt-bill-payment-card.active::after {
    animation: pmntBillShineEffect 1s ease-out;
}

@keyframes pmntBillShineEffect {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

/* Payment Flow Line */
.pmnt-bill-flow-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s;
    z-index: 8;
}

.pmnt-bill-flow-line.show {
    opacity: 1;
}

#pmntBillFlowPath {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 15px rgba(255, 95, 21, 1));
}

#pmntBillFlowPath.animate {
    animation: pmntBillDrawLine 1.4s ease-out forwards;
}

@keyframes pmntBillDrawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* Particles */
.pmnt-bill-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.pmnt-bill-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FFA802;
    border-radius: 50%;
    box-shadow: 0 0 20px #FF5F15, 0 0 40px #FF5F15;
    animation: pmntBillParticleFloat 1.8s ease-out forwards;
}

@keyframes pmntBillParticleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* Phase 3 - Premium Success Screen */
.pmnt-bill-success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    opacity: 0;
    z-index: 20;
}

.pmnt-bill-success.show {
    animation: pmntBillSuccessEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pmntBillSuccessEntrance {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    }

    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

.pmnt-bill-success-circle {
    width: 150px;
    height: 150px;
    background: rgba(34, 197, 94, 0.12);
    border: 6px solid #22C55E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 80px rgba(34, 197, 94, 0.7), inset 0 0 50px rgba(34, 197, 94, 0.3);
    position: relative;
    animation: pmntBillSuccessPulse 2.5s ease-in-out infinite;
}

@keyframes pmntBillSuccessPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 80px rgba(34, 197, 94, 0.7), inset 0 0 50px rgba(34, 197, 94, 0.3);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 100px rgba(34, 197, 94, 0.9), inset 0 0 60px rgba(34, 197, 94, 0.4);
    }
}

.pmnt-bill-success-circle::before,
.pmnt-bill-success-circle::after {
    content: '';
    position: absolute;
    border: 3px solid rgba(34, 197, 94, 0.5);
    border-radius: 50%;
}

.pmnt-bill-success-circle::before {
    inset: -12px;
    animation: pmntBillSuccessRipple 2.5s ease-out infinite;
}

.pmnt-bill-success-circle::after {
    inset: -25px;
    animation: pmntBillSuccessRipple 2.5s 1.25s ease-out infinite;
}

@keyframes pmntBillSuccessRipple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.pmnt-bill-checkmark {
    width: 100px;
    height: 100px;
}

.pmnt-bill-checkmark-circle {
    stroke: #22C55E;
    stroke-width: 4;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: pmntBillCheckCircle 1s ease-out forwards;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 1));
}

@keyframes pmntBillCheckCircle {
    to {
        stroke-dashoffset: 0;
    }
}

.pmnt-bill-checkmark-check {
    stroke: #22C55E;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: pmntBillCheckMark 0.5s 0.7s ease-out forwards;
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 1));
}

@keyframes pmntBillCheckMark {
    to {
        stroke-dashoffset: 0;
    }
}

.pmnt-bill-success-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pmnt-bill-success-text {
    font-size: 28px;
    font-weight: 800;
    color: #22C55E;
    letter-spacing: 1.5px;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.7);
    animation: pmntBillTextGlow 2s ease-in-out infinite;
    text-transform: uppercase;
}

@keyframes pmntBillTextGlow {

    0%,
    100% {
        text-shadow: 0 0 30px rgba(34, 197, 94, 0.7);
    }

    50% {
        text-shadow: 0 0 40px rgba(34, 197, 94, 1);
    }
}

.pmnt-bill-success-amount {
    font-size: 20px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1.2px;
}

.pmnt-bill-success-detail {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 168, 2, 0.8);
    letter-spacing: 1px;
}

.pmnt-bill-success-logo {
    font-size: 52px;
    font-weight: 900;
    background: linear-gradient(135deg, #FF5F15 0%, #FFA802 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    position: relative;
    animation: pmntBillLogoShine 4s ease-in-out infinite;
}

.pmnt-bill-success-logo::before {
    content: 'N1Pay';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #FF5F15, #FFA802);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(15px);
    opacity: 0.7;
    z-index: -1;
}

.pmnt-bill-success-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.5);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    color: #22C55E;
    letter-spacing: 1px;
    text-transform: uppercase;
}




/* Responsive Styles */
@media (max-width: 991px) {
    .pmnt-bill-animation-container {
        height: 550px;
    }

    .pmnt-bill-stage {
        max-width: 480px;
        height: 480px;
    }

    .pmnt-bill-logo-text {
        font-size: 56px;
    }

    .pmnt-bill-service-circle {
        width: 360px;
        height: 360px;
        top: 45%;
        left: 42%;
    }

    .pmnt-bill-center-logo {
        top: 50%;
        left: 52%;
    }

    .pmnt-bill-service-wrapper {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .pmnt-bill-payment-card {
        width: 140px;
        height: 130px;
        font-size: 36px;
    }

    .pmnt-bill-success-circle {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 767px) {
    .pmnt-bill-animation-container {
        height: 500px;
    }

    .pmnt-bill-stage {
        max-width: 400px;
        height: 400px;
    }

    .pmnt-bill-logo-text {
        font-size: 48px;
    }

    .pmnt-bill-logo-tagline {
        font-size: 14px;
    }

    .pmnt-bill-service-circle {
        width: 300px;
        height: 300px;
    }

    .pmnt-bill-service-wrapper {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }

    .pmnt-bill-payment-grid {
        gap: 22px;
    }

    .pmnt-bill-payment-card {
        width: 125px;
        height: 115px;
        font-size: 32px;
    }

    .pmnt-bill-success-circle {
        width: 145px;
        height: 145px;
    }

    .pmnt-bill-success-logo {
        font-size: 42px;
    }
}

@media (max-width: 576px) {
    .pmnt-bill-animation-container {
        height: 450px;
    }

    .pmnt-bill-stage {
        max-width: 340px;
        height: 340px;
    }

    .pmnt-bill-logo-text {
        font-size: 28px;
    }

    .pmnt-bill-logo-tagline {
        font-size: 8px;
    }

    .pmnt-bill-service-circle {
        width: 260px;
        height: 260px;
    }

    .pmnt-bill-service-wrapper {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .pmnt-bill-payment-title {
        font-size: 20px;
    }

    .pmnt-bill-payment-grid {
        gap: 18px;
    }

    .pmnt-bill-payment-card {
        width: 110px;
        height: 100px;
        font-size: 20px;
        gap: 8px;
    }

    .pmnt-bill-payment-name {
        font-size: 13px;
    }

    .pmnt-bill-payment-desc {
        font-size: 10px;
    }

    .pmnt-bill-success-circle {
        width: 125px;
        height: 125px;
    }

    .pmnt-bill-checkmark {
        width: 85px;
        height: 85px;
    }

    .pmnt-bill-success-text {
        font-size: 24px;
    }

    .pmnt-bill-success-amount {
        font-size: 17px;
    }

    .pmnt-bill-success-logo {
        font-size: 36px;
    }

    .pmnt-bill-service-label {
        top: 70px;
    }
}