/* 🌐 Base Reset */
 html,
 body {
     overflow-x: hidden;
     width: 100%;
 }

 body {
     font-family: 'Outfit', sans-serif;
     background-color: #0f172a;
     /* dark base for premium look */
     color: #f8fafc;
 }

 /* 🔗 Links Fix */
 a {
     text-decoration: none;
 }

 /* ============================= */
 /* 🚀 SCROLL ANIMATIONS */
 /* ============================= */

 .reveal {
     opacity: 0;
     transform: translateY(80px);
     transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

 .slide-left {
     opacity: 0;
     transform: translateX(-120px);
     transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .slide-left.active {
     opacity: 1;
     transform: translateX(0);
 }

 .slide-right {
     opacity: 0;
     transform: translateX(120px);
     transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .slide-right.active {
     opacity: 1;
     transform: translateX(0);
 }

 .scale-in {
     opacity: 0;
     transform: scale(0.8);
     transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .scale-in.active {
     opacity: 1;
     transform: scale(1);
 }

 /* ============================= */
 /* 🌊 FLOATING ANIMATION */
 /* ============================= */

 .floating {
     animation: float 5s ease-in-out infinite;
 }

 .floating-delayed {
     animation: float 5s ease-in-out infinite;
     animation-delay: 2s;
 }

 @keyframes float {
     0% {
         transform: translateY(0px);
     }

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

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

 /* ============================= */
 /* 🧊 GLASSMORPHISM */
 /* ============================= */

 .glass {
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 .glass-dark {
     background: rgba(30, 10, 60, 0.6);
     backdrop-filter: blur(16px);
     border: 1px solid rgba(226, 27, 35, 0.3);
 }

 /* ============================= */
 /* 🔴🟣 CAMPA GRADIENTS */
 /* ============================= */

 .bg-hero-gradient {
     background: radial-gradient(circle at top right, #E21B23 0%, #8B2E5F 40%, #2E1065 100%);
 }

 .bg-campa-gradient {
     background: linear-gradient(135deg, #E21B23, #5A2D82);
 }

 /* ============================= */
 /* 🔥 NAVBAR EFFECT */
 /* ============================= */

 #navbar {
     transition: all 0.4s ease;
 }

 .nav-scrolled {
     background: rgba(20, 10, 40, 0.9) !important;
     backdrop-filter: blur(12px);
     box-shadow: 0 6px 30px rgba(226, 27, 35, 0.3);
     padding-top: 0.5rem !important;
     padding-bottom: 0.5rem !important;
 }

 /* ============================= */
 /* 📦 ACCORDION (BOOTSTRAP FIX) */
 /* ============================= */

 .accordion-button:not(.collapsed) {
     color: #ffffff;
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2);
 }

 .accordion-button:focus {
     border-color: #E21B23;
     box-shadow: 0 0 0 0.25rem rgba(226, 27, 35, 0.4);
 }

 /* ============================= */
 /* ✨ EXTRA UI ENHANCEMENTS */
 /* ============================= */

 .text-gradient {
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .btn-campa {
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     color: white;
     border: none;
     transition: all 0.3s ease;
 }

 .btn-campa:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 30px rgba(226, 27, 35, 0.4);
 }

 .scrollbar-hide::-webkit-scrollbar {
     display: none;
 }

 .scrollbar-hide {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

 /* CARD DESIGN */
 .card {
     min-width: 280px;
     background: #111827;
     /* dark solid */
     backdrop-filter: blur(12px);
     border-radius: 20px;
     padding: 16px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.4s ease;
     transform: scale(0.9);

 }

 .card img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     border-radius: 16px;
     margin-bottom: 12px;
 }

 .card h3 {
     font-size: 20px;
     font-weight: bold;
 }

 .card p {
     font-size: 14px;
     color: #9ca3af;
 }

 /* CENTER ACTIVE EFFECT */
 .card.active {
     transform: scale(1.1);
     opacity: 1;
 }

 /* 🔥 PROCESS CARD */
 .process-card {
     position: relative;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(14px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 40px 20px;
     text-align: center;
     transition: all 0.5s ease;
     overflow: hidden;
 }

 /* HOVER EFFECT (VIDEO FEEL) */
 .process-card:hover {
     transform: translateY(-15px) scale(1.03);
     box-shadow: 0 20px 50px rgba(226, 27, 35, 0.3);
 }

 /* ICON */
 .process-card .icon {
     font-size: 40px;
     margin-bottom: 20px;
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* TEXT */
 .process-card h4 {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 10px;
 }

 .process-card p {
     font-size: 14px;
     color: #9ca3af;
 }

 /* STEP NUMBER */
 .step-number {
     position: absolute;
     top: -18px;
     left: 50%;
     transform: translateX(-50%);
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     border: 3px solid #0f172a;
 }

 /* HIGHLIGHT CARD */
 .highlight {
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     box-shadow: 0 20px 60px rgba(226, 27, 35, 0.4);
 }

 /* HIGHLIGHT TEXT */
 .highlight h4,
 .highlight p {
     color: white;
 }

 /* HIGHLIGHT NUMBER */
 .highlight-num {
     background: white;
     color: #E21B23;
 }

 /* INPUT PREMIUM */
 .input-premium {
     width: 100%;
     padding: 14px 16px;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     outline: none;
     transition: all 0.3s ease;
     background: #fff;
 }

 .input-premium:focus {
     border-color: #E21B23;
     box-shadow: 0 0 0 3px rgba(226, 27, 35, 0.15);
 }

 /* BUTTON PREMIUM */
 .btn-premium {
     width: 100%;
     padding: 14px;
     border-radius: 12px;
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     color: white;
     font-weight: bold;
     transition: all 0.3s ease;
 }

 .btn-premium:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(226, 27, 35, 0.3);
 }

 /* SOCIAL ICON */
 .social-icon {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s;
 }

 .social-icon:hover {
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     transform: translateY(-4px);
 }

 /* FOOTER LINKS */
 .footer-link {
     color: #9ca3af;
     transition: 0.3s;
 }

 .footer-link:hover {
     color: #E21B23;
     padding-left: 5px;
 }

 /* ICON BOX */
 .icon-box {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* BUTTON */
 .footer-btn {
     display: block;
     width: 100%;
     padding: 12px;
     border-radius: 12px;
     background: linear-gradient(135deg, #E21B23, #5A2D82);
     text-align: center;
     font-weight: bold;
     transition: 0.3s;
 }

 .footer-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(226, 27, 35, 0.3);
 }

 .card {
     min-width: 260px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: 0.4s;
 }

 .card img {
     width: 100%;
     height: 220px;
     object-fit: cover;
 }

 .card h3 {
     padding: 16px;
     font-weight: bold;
 }

 .card:hover {
     transform: scale(1.05);
 }

 /* 🔥 Custom Scrollbar - Global */

 /* Width */
 ::-webkit-scrollbar {
     width: 10px;
 }

 /* Track (background) */
 ::-webkit-scrollbar-track {
     background: #0f172a;
     /* matches your dark bg */
 }

 /* Thumb (scroll handle) */
 ::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, #E21B23, #5A2D82);
     border-radius: 10px;
     border: 2px solid #0f172a;
 }

 /* Hover effect */
 ::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(180deg, #ff2d2d, #7c3aed);
 }

 .no-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .no-scrollbar {
     scrollbar-width: none;
 }


 /* 🔥 FIX Bootstrap accordion conflict */

 .accordion-collapse {
     transition: height 0.3s ease !important;
 }

 .accordion-collapse.show {
     display: block !important;
     height: auto !important;
     overflow: visible !important;
 }

 .accordion-body {
     display: block !important;
     visibility: visible !important;
 }