/* Responsive adjustments for .stats-box on mobile */
                @media (max-width: 768px) {
                  .stats-box {
                    padding: 20px;
                    font-size: 1rem;
                  }
                  .stats-box .stat-number {
                    font-size: 1.6rem;
                  }
                  .stats-box .stat-label {
                    font-size: 1rem;
                  }
                }
                /* Prevent horizontal scroll on mobile */
                body {
                  overflow-x: hidden;
                }

                /* Mobile-specific tweaks */
                @media (max-width: 768px) {
                  .main-content {
                    padding-top: 0 !important;
                    padding-left: 16px !important;
                    padding-right: 16px !important;
                  }
                  .homepage-banner-message {
                    margin-top: 70px !important;
                    max-width: 100% !important;
                    box-sizing: border-box;
                  }
                  /* Universal banner/image containment */
                  .leads-banner-img,
                  .dqr-banner-img,
                  .nfc-banner-img {
                    width: 100% !important;
                    max-width: 100% !important;
                    margin: 0 auto !important;
                    height: auto !important;
                    object-fit: contain !important;
                  }
                }

                        /* General Styling */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #ffffff;
            color: #333;
            margin: 0;
            padding: 0;
            text-align: center;
            overflow-x: hidden;
        }


        @media (max-width: 768px) {
body {
    padding-bottom: 80px; /* or height of bottom nav */
}
}

/* 🔥 14-Day Pro Trial Banner */
.pro-trial-banner, .homepage-trial-info {
    color: rgb(0, 0, 0);
    font-weight: bold;
    text-align: center;
    border-radius: 0px;
    font-size: 1.1rem;
    margin-bottom: 18px;
    animation: fadeIn 0.8s ease-in-out;
}


.moving-gradient-bg {
    background: rgb(255, 255, 255);
}












/* FAQ Section */
.faq {
    padding: 50px 20px;
    text-align: center;
}

.faq-item {
    background: white;
    margin: 10px auto;
    padding: 15px;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.faq-item h3 {
    color: #007BFF;
    font-size: 1.2rem;
}

.faq-answer {
    display: none;
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
}

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




        


        /* Features Section */
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin: 50px auto;
            max-width: 1200px;
        }
        .feature-box {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            width: 250px;
            transition: transform 0.3s ease-in-out;
        }
        .feature-box:hover {
            transform: translateY(-10px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }
        .feature-box i {
            font-size: 2.5rem;
            color: #007BFF;
            margin-bottom: 15px;
        }










/* 🌟 Pricing Section Styling */
.pricing-section {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
}

/* 🏷️ Title & Subtext */
.pricing-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #333;
}

.pricing-subtext {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
}

/* 📦 Pricing Container */
.pricing-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 💳 Individual Pricing Cards */
.pricing-card,
.pricing-plan {
    background: white;
    border-radius: 12px;
    padding: 30px;
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    min-height: auto;
    margin: 0;
}
@media (min-width: 768px) {
  .pricing-card,
  .pricing-plan {
    width: 360px;
    max-width: 100%;
  }
  .pricing-container {
    gap: 40px;
    justify-content: center;
  }
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

/* 🌈 Free Plan Styling */
.free-plan {
    border: 2px solid #007BFF;
}

.free-plan h3 {
    color: #007BFF;
}

/* 🚀 Pro Plan Styling */
.pro-plan {
    border: 2px solid #ff4d00;
    background: linear-gradient(135deg, #ff4d00, #ff7f50);
    color: white;
}

.pro-plan .pricing-features li {
    color: white; /* Ensures feature list items are white */
}


.pro-plan h3 {
    color: white;
}

.pro-plan .price-tag {
    color: white;
}

/* 💰 Pricing Tags */
.price-tag {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
    color: #333;
}

/* ✅ Feature List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pricing-features li {
    font-size: 1rem;
    padding: 5px 0;
    color: #555;
}

/* 🎯 Pricing Buttons */
.btn-plan {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* 🆓 Free Button */
.free-btn {
    background: #007BFF;
    color: white;
}

.free-btn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* 🔥 Pro Button */
.pro-btn {
    background: white;
    color: #ff4d00;
}

.pro-btn:hover {
    background: #ffffff;
    transform: scale(1.05);
}





        












/* 🚀 Sleek NFC Section */
.nfc-showcase {
    text-align: center;
    padding: 60px 20px;
    background:  #ffffff;
    border-radius: 12px;
}

/* 🏆 NFC Header */
.nfc-header h2 {
    font-size: 2rem;
    color: #222;
    font-weight: bold;
    margin-bottom: 10px;
}

.nfc-header p {
    font-size: 1.1rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 20px;
}

/* 🎴 NFC Cards Grid */
.nfc-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.nfc-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
    width: 240px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nfc-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.nfc-card h3 {
    font-size: 1rem;
    color: #222;
}

/* 🖥️ Hover Effect */
.nfc-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

/* ⚡ CTA Button */
.nfc-cta {
    margin-top: 30px;
}

.btn-nfc {
    display: inline-block;
    padding: 12px 20px;
    background: #007BFF;
    color: white;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.btn-nfc:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* 📱 Improved Mobile Optimization */
@media (max-width: 768px) {
    .nfc-showcase {
        padding: 40px 15px; /* Less padding on mobile */
    }

    .nfc-header h2 {
        font-size: 1.7rem; /* Slightly smaller heading */
    }

    .nfc-header p {
        font-size: 1rem;
        max-width: 90%; /* Prevent text from stretching too wide */
        margin-bottom: 15px;
    }

    .nfc-grid {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Reduce gap */
    }

    .nfc-card {
        width: 85%; /* Smaller card width */
        max-width: 300px; /* Prevents it from getting too large */
        padding: 12px;
    }

    .nfc-card h3 {
        font-size: 0.95rem; /* Slightly smaller text */
    }

    .btn-nfc {
        padding: 10px 18px; /* Slightly smaller button */
        font-size: 1rem;
    }
}









/* 📢 Mid-Page CTA Styling */
.cta-banner {
    background: linear-gradient(135deg, #6A3093, #A044FF);
    color: white;
    padding: 3rem 1rem;
    text-align: center;
    margin: 2rem 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 📢 CTA Heading & Text */
.cta-banner h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-banner p {
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* 📢 Social Icons */
.cta-social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

/* Pulse Animation */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}



.social-icon {
    display: flex;
    animation: float 3s infinite ease-in-out;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    color: white;
    transition: 0.3s ease;
}

/* 🎨 Individual Social Icon Colors */
.instagram { background: #E1306C; }
.twitter { background: #1DA1F2; }
.tiktok { background: #000000; }
.linkedin { background: #0077B5; }


/* 📢 CTA Button */

.cta-btn:hover {
    transform: scale(1.05);
    background: #ffffff;
}











/* ✉️ Sleek Contact Section */
.contact-section {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff; /* Soft light background */
    color: #333;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 40px auto;
}

/* 🖼️ Heading */
.contact-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #222;
}

.contact-section p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
}

/* 🔗 Subtle Social Media Buttons */
.contact-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    background: #ffffff; /* White background */
    color: #333; /* Neutral text */
    border: 1px solid #ddd; /* Soft border */
    transition: transform 0.2s ease-in-out, background 0.2s ease;
}

/* 🌈 Subtle Hover Effect */
.contact-btn:hover {
    transform: translateY(-3px);
    background: #f1f1f1; /* Slightly darker background */
}

/* 📩 Contact Form */
#contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

#contact-form input, 
#contact-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 1rem;
    outline: none;
    background: #fff;
}

#contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* 📨 Submit Button */
#contact-form button {
    margin-top: 10px;
    padding: 12px 20px;
    background: #007BFF;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s ease;
}

#contact-form button:hover {
    background: #0056b3;
}

/* 🌍 Mobile Optimizations */
@media (max-width: 600px) {
    .contact-section {
        padding: 40px 15px;
    }

    .contact-section h2 {
        font-size: 1.8rem;
    }

    .contact-socials {
        flex-direction: column;
    }

    .contact-btn {
        width: 100%;
        justify-content: center;
    }

    #contact-form {
        width: 100%;
    }
}










/* Who Uses Abutic? Section */
.who-uses-abutic {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 30px;
}

.audience-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.audience-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 200px;
    transition: 0.3s ease;
}

.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007BFF, #00C6FF);
    color: white;
    font-size: 1.8rem;
    margin: 0 auto 10px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .audience-grid {
        flex-direction: column;
        align-items: center;
    }
    .audience-card {
        width: 90%;
    }
}














/* 🚀 Final CTA Section */
.final-cta {
    background: white;
    text-align: center;
    padding: 50px 20px;
    border-radius: 12px;
    max-width: 900px;
    margin: 40px auto;
}

/* 📌 CTA Content */
.final-cta .cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.final-cta h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.final-cta p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 20px;
}

/* ⭐ Testimonial Snippet */
.cta-testimonial {
    font-style: italic;
    font-size: 1rem;
    color: #555;
    margin: 20px auto;
    max-width: 500px;
    text-align: center;
    background: rgba(0, 123, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
}

.cta-testimonial i {
    font-size: 1.5rem;
    color: #007BFF;
    margin-right: 5px;
}

.cta-testimonial span {
    display: block;
    font-weight: bold;
    color: #007BFF;
    margin-top: 5px;
}

/* 📌 Image Banner */
.cta-banner-img {
    width: 100%;
    max-width: 700px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* 🚀 CTA Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cta-btn {
    display: inline-block;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s ease;
}

/* Primary CTA Button */
.cta-btn.primary {
    background: #007BFF;
    color: white;
}

.cta-btn.primary:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* Secondary CTA Button */
.cta-btn.secondary {
    background: #f8f9fc;
    color: #007BFF;
    border: 2px solid #007BFF;
}

.cta-btn.secondary:hover {
    background: #007BFF;
    color: white;
    transform: scale(1.05);
}






/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .pricing-plan {
        width: 90vw;
        max-width: 400px;
        margin: 1rem auto;
        padding: 1rem;
    }
    .pricing-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .pricing-card {
        width: 90vw;
        max-width: 400px;
        margin: 1rem auto;
        padding: 1rem;
    }
    .final-cta {
        padding: 40px 15px;
    }
    .cta-banner-img {
        max-width: 100%;
    }
    .cta-buttons {
        flex-direction: column;
    }
}

/* Ensure Mobile vCard Button Matches the Correct Style */
@media (max-width: 768px) {
    .cta-btn.secondary {
        background: white !important;  /* Force white background */
        color: #007BFF !important;  /* Force blue text */
        border: 2px solid #007BFF !important;  /* Blue border */
    }
}







/* 🚀 Our Progress So Far - Modernized */
.progress-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #6A3093, #A044FF);
    color: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 50px auto;
}

/* 🏆 Title */
.progress-title {
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 📌 Subtitle */
.progress-subtext {
    font-size: 1.0rem;
    color: #f1f1f1;
    margin-bottom: 30px;
}

/* 📊 Progress Grid */
.progress-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 📦 Individual Progress Cards */
.progress-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* 💡 Hover Effect */
.progress-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 🎨 Icons */
.progress-icon {
    font-size: 2.0rem;
    color: white;
    margin-bottom: 10px;
}

/* 🔢 Animated Numbers */
.progress-item h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
}

/* 🔤 Labels */
.progress-item p {
    font-size: 1rem;
    color: #ddd;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .progress-grid {
        flex-direction: column;
        align-items: center;
    }
    .progress-item {
        width: 70%;
        max-width: 300px;
    }
}


.mobile-showcase {
    background: white;
}






/* 🎥 Fullscreen Hero Video */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Matches the hero banner height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 📺 Video Styling */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures full visibility without cropping */
    max-height: 100vh;
}

/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .hero-video-container {
        height: auto; /* Adjust height dynamically */
        min-height: 50vh; /* Prevents it from being too small */
    }

    .hero-video {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

@media (max-width: 768px) {
  .hero-video {
    transform: scale(1.2);
    transform-origin: center center;
  }
}



/* 🎥 Specific Styling for B-Roll Video (Smaller on Desktop) */
.broll-video-container {
    height: 60vh; /* Adjusted height for desktop */
}

/* Ensure no changes on mobile */
@media (max-width: 768px) {
    .broll-video-container {
        height: auto; /* Keeps the default behavior */
    }
}



/* 🔗 Footer Navigation */
.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.footer-nav a {
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer-nav a:hover {
    color: #00C6FF;
}

/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .footer-nav {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-nav a {
        display: block;
        margin-bottom: 8px;
    }
}

/* 🧱 Ensure banner stays below fixed nav (esp. on mobile) */
@media (max-width: 768px) {
    .homepage-banner-message {
      margin-top: 70px; /* adjust if your mobile navbar height differs */
    }
  }
    

           @media (max-width: 768px) {
                    .main-content { padding-top: 0 !important; }
                    .homepage-banner-message { margin-top: 70px !important; }
                }
                        .mobile-sticky-cta {
        display: none;
        }

        @media (max-width: 768px) {
        .mobile-sticky-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #007BFF;
            color: white;
            text-align: center;
            padding: 16px;
            font-weight: bold;
            text-decoration: none;
            z-index: 999;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
        }
        }
        

    .cta-button-group {
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: start;
          margin-top: 20px;
        }

        @media (min-width: 768px) {
          .cta-button-group {
            flex-direction: row;
            align-items: center;
          }

          .cta-button-group .cta-btn {
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px; /* Adjusted from 180px */
          }
        }

               .homepage-banner {
            padding: 40px 20px;
            text-align: center;
        }
        .final-cta {
          background: white;
          text-align: center;
          padding: 50px 20px;
          border-radius: 12px;
          max-width: 900px;
          margin: 60px auto;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }





        .final-cta h2 {
          font-size: 2rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 15px;
        }

        .final-cta p {
          font-size: 1.1rem;
          color: #555;
          margin-bottom: 20px;
        }

        .cta-buttons {
          display: flex;
          justify-content: center;
          gap: 15px;
          flex-wrap: wrap;
          margin-top: 20px;
        }

        .cta-btn.primary {
          background: #007BFF;
          color: white;
          font-weight: bold;
          padding: 12px 20px;
          border-radius: 6px;
          text-decoration: none;
          transition: 0.3s ease;
          border: 2px solid #007BFF;
        }

        .cta-btn.primary:hover {
          background: #0056b3;
          color: white;
          transform: scale(1.05);
        }

        .cta-btn.secondary {
          background: #f8f9fc;
          color: #007BFF;
          border: 2px solid #007BFF;
          font-weight: bold;
          padding: 12px 20px;
          border-radius: 6px;
          text-decoration: none;
          transition: 0.3s ease;
        }

        .cta-btn.secondary:hover {
          background: #007BFF;
          color: white;
          transform: scale(1.05);
        }
        /* Pro+ Plan Custom Styles */
        .pro-plus-plan {
          background: linear-gradient(to bottom right, #2E86AB, #1B4F72);
          border: 2px solid #1B4F72;
          color: white;
        }

        .pro-plus-plan .btn-plan {
          background-color: #ffffff;
          color: #1B4F72;
          border: none;
        }

        .pro-plus-plan .btn-plan:hover {
          background-color: #e2e2e2;
        }

        .pro-plus-plan .pricing-features li {
          color: #f0f0f0;
        }

        .pro-plus-plan .price-tag {
          color: white;
        }
        
.dqr-banner-img {
  border-radius: 12px;
  width: 95%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  max-height: 480px;
}

@media (max-width: 768px) {
  .dqr-banner-img {
    width: 220%;
    max-width: none;
    margin-left: -60%;
    height: 55vh;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
  }
}

.nav-links .login, 
.bottom-nav .login {
    color: #007BFF !important;
}
    
@media (max-width: 768px) {
  .leads-banner-img {
    width: 125%;
    margin-left: -12.5%;
    max-width: none;
    height: auto;
    display: block;
    border-radius: 0;
    object-fit: contain;
  }
  .nfc-banner-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    object-fit: contain;
  }
}
@media (min-width: 769px) {
  .leads-banner-img {
    width: 66%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  .nfc-banner-img {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
}

/* Fade-in on scroll */
                .fade-in {
                  opacity: 0;
                  transform: translateY(20px);
                  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
                }
                .fade-in.visible {
                  opacity: 1;
                  transform: translateY(0);
                }
                
/* 📱 UNIVERSAL MOBILE FIX: prevent any cards or sections from exceeding viewport */
@media (max-width: 768px) {
  /* Ensure all main containers fit */
  .main-content,
  .hero-container,
  .features,
  .pricing-container,
  .nfc-grid,
  .audience-grid,
  .progress-grid {
    padding: 0 16px !important;
  }

  /* Force banners and images to contain */
  .homepage-banner img,
  .picker-banner,
  .leads-banner-img,
  .dqr-banner-img,
  .nfc-banner-img,
  .homepage-banner img,
  .hero-video {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Force all cards and boxes to stack and fit */
  .feature-box,
  .pricing-card,
  .nfc-card,
  .audience-card,
  .progress-item,
  .faq-item,
  .contact-section,
  .multi-step-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    box-sizing: border-box;
  }

  /* Tighter typography */
  h1, h2, h3 {
    line-height: 1.2 !important;
  }
}


/* ========== Additional CSS from index.php ========== */
/* Metal Hero Section Styles */
.metal-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 10%;
  gap: 4rem;
  background: none;
  background-color: transparent;
  color: #111;
  min-height: 80vh;
}

.metal-hero-text {
  flex: 1;
  max-width: 480px;
}

.metal-hero-text h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #000, #555);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metal-hero-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

.metal-hero-card {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.metal-hero-card .nfc-card {
  width: 340px;
  height: 200px;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  border-radius: 14px;
  border: 1px solid #333;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatCard 5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

@keyframes floatCard {
  0%, 100% {
    transform: translateY(0px) rotateZ(-1deg);
  }
  50% {
    transform: translateY(-10px) rotateZ(1deg);
  }
}

.nfc-card-text {
  font-family: 'Inter', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #d4af37 0%, #f5d76e 25%, #fff8dc 50%, #f5d76e 75%, #d4af37 100%);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldSheen 5s linear infinite;
  opacity: 0.95;
}

@keyframes goldSheen {
  0% { background-position: 0%; }
  100% { background-position: 100%; }
}

@media (max-width: 900px) {
  .metal-hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 4rem 1.5rem;
  }

  .metal-hero-text h1 {
    font-size: 2rem;
  }

  .metal-hero-card .nfc-card {
    width: 280px;
    height: 160px;
    margin-top: 2rem;
  }
}
                  /* OVERRIDES: Remove all box-shadow, border, outline, filter on analytics-slideshow */
.analytics-slideshow-inner {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.analytics-slideshow img {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  filter: none !important;
}

                  @media (max-width: 768px) {
  .how-section {
    padding: 40px 20px;
  }

  .how-card {
    transform: scale(0.9);
    margin-bottom: 20px;
  }

  .how-section h2 {
    font-size: 1.4rem;
  }

  .how-section p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

                  .analytics-slideshow {
  text-align: center;
  margin: 60px auto 100px;
  max-width: 700px;
  position: relative;
}

.analytics-slideshow-inner {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: 20px;
  /* No animation property here */
}

.analytics-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.2s ease, transform 1.5s ease;
  will-change: opacity, transform;
}

.analytics-slideshow img.active {
  opacity: 1;
  transform: scale(1);
}

.analytics-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #4a90e2, #8e44ad, #4a90e2);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 4s ease infinite;
  margin-top: 25px;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.analytics-desc {
  color: #666;
  font-size: 1rem;
  max-width: 550px;
  margin: 10px auto 0;
}

/* Fade-slideshow animation */
@keyframes fadeSlide {
  0% { opacity: 0; transform: scale(1.05); }
  10% { opacity: 1; transform: scale(1); }
  25% { opacity: 1; }
  35% { opacity: 0; transform: scale(0.97); }
  100% { opacity: 0; }
}

.analytics-slideshow img:nth-of-type(1) { animation: fadeSlide 10s infinite; }
.analytics-slideshow img:nth-of-type(2) { animation: fadeSlide 10s infinite 2.5s; }
.analytics-slideshow img:nth-of-type(3) { animation: fadeSlide 10s infinite 5s; }
.analytics-slideshow img:nth-of-type(4) { animation: fadeSlide 10s infinite 7.5s; }

@media (max-width: 768px) {
  .analytics-slideshow-inner {
    height: 280px;
  }
  .analytics-title {
    font-size: 1.5rem;
  }
  .analytics-desc {
    font-size: 0.9rem;
  }
}

                  .qr-pro-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 1rem;
  background: transparent;
}

.qr-pro-container {
  position: relative;
  background: radial-gradient(circle at top left, rgba(0,0,0,0.95), rgba(15,15,20,0.98));
  border: 1px solid rgba(0,221,235,0.15);
  border-radius: 28px;
  padding: 50px 45px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 0 25px rgba(0,221,235,0.1), inset 0 0 10px rgba(255,255,255,0.03);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Subtle diagonal shimmer animation across the card */
/* BOLD, BRIGHT, IMPOSSIBLE TO MISS SHIMMER */
.qr-pro-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 400%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.6) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: shimmerSweep 2.5s infinite linear;
  z-index: 1;
  border-radius: 28px;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes shimmerSweep {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.qr-pro-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 35px rgba(0,221,235,0.2);
}


.qr-pro-qrbox {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  border: 1px solid rgba(0, 221, 235, 0.25);
  background: radial-gradient(circle at center, rgba(0, 221, 235, 0.1), rgba(0, 0, 0, 0.7));
  box-shadow: inset 0 0 10px rgba(0, 221, 235, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.8rem auto; /* center horizontally */
  overflow: hidden;
  position: relative;
}

.qr-pro-qrbox img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: brightness(1.2) contrast(1.1);
  transition: transform 0.4s ease, filter 0.4s ease;
}

@media (min-width: 1024px) {
  .qr-pro-qrbox {
    width: 220px !important;
    height: 220px !important;
  }

  .qr-pro-qrbox img {
    width: 90% !important;
  }

  .qr-pro-container {
    max-width: 840px !important;
  }
}

@media (min-width: 1024px) {
  .qr-pro-qrbox {
    width: 180px !important;
    height: 180px !important;
  }

  .qr-pro-qrbox img {
    width: 90% !important;
  }
}

.qr-pro-qrbox:hover img {
  transform: scale(1.05);
  filter: brightness(1.4);
}

.qr-pro-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.qr-pro-description {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  max-width: 600px;
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
}

  /* From Uiverse.io by kennyotsu, customized for Abutic */
  .card {
    --bg-color: #ffffff;
    background-color: var(--bg-color);
    padding: 1rem 2rem;
    border-radius: 1.25rem;
    max-width: max-content;
    margin: 0 auto;
  }

  .loader {
    color: #aaa;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 24px;
    box-sizing: content-box;
    height: 40px;
    padding: 10px 10px;
    display: flex;
    border-radius: 8px;
  }

  .words {
    overflow: hidden;
    position: relative;
  }

  .words::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      var(--bg-color) 10%,
      transparent 30%,
      transparent 70%,
      var(--bg-color) 90%
    );
    z-index: 20;
  }

  .word {
    display: block;
    height: 100%;
    padding-left: 6px;
    color: #5c3fc3;
    animation: spin_4991 4s infinite;
  }

  @keyframes spin_4991 {
    10% { transform: translateY(-102%); }
    25% { transform: translateY(-100%); }
    35% { transform: translateY(-202%); }
    50% { transform: translateY(-200%); }
    60% { transform: translateY(-302%); }
    75% { transform: translateY(-300%); }
    85% { transform: translateY(-402%); }
    100% { transform: translateY(-400%); }
  }
  @media (max-width: 768px) {
    .mobile-showcase-content {
      overflow: hidden;
    }

    .showcase-phones-img {
      transform: scale(1.6) translateX(30%);
      transform-origin: center center;
      display: block;
      margin: 0 auto;
      width: 100%;
      height: auto;
    }
  }
                
            
                /* Prevent horizontal scroll on mobile */
                body {
                  overflow-x: hidden;
                }

                /* Mobile-specific tweaks */
                @media (max-width: 768px) {
                  .main-content {
                    padding-top: 0 !important;
                    padding-left: 16px !important;
                    padding-right: 16px !important;
                  }
                  .homepage-banner-message {
                    margin-top: 70px !important;
                    max-width: 100% !important;
                    box-sizing: border-box;
                  }
                  /* Universal banner/image containment */
                  .leads-banner-img,
                  .dqr-banner-img,
                  .nfc-banner-img {
                    width: 100% !important;
                    max-width: 100% !important;
                    margin: 0 auto !important;
                    height: auto !important;
                    object-fit: contain !important;
                  }
                }

                        /* General Styling */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #ffffff;
            color: #333;
            margin: 0;
            padding: 0;
            text-align: center;
            overflow-x: hidden;
        }


        @media (max-width: 768px) {
body {
    padding-bottom: 80px; /* or height of bottom nav */
}
}

/* 🔥 14-Day Pro Trial Banner */
.pro-trial-banner, .homepage-trial-info {
    color: rgb(0, 0, 0);
    font-weight: bold;
    text-align: center;
    border-radius: 0px;
    font-size: 1.1rem;
    margin-bottom: 18px;
    animation: fadeIn 0.8s ease-in-out;
}


.moving-gradient-bg {
    background: rgb(255, 255, 255);
}












/* FAQ Section */
.faq {
    padding: 50px 20px;
    text-align: center;
}

.faq-item {
    background: white;
    margin: 10px auto;
    padding: 15px;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.faq-item h3 {
    color: #007BFF;
    font-size: 1.2rem;
}

.faq-answer {
    display: none;
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
}

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




        


        /* Features Section */
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin: 50px auto;
            max-width: 1200px;
        }
        .feature-box {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            width: 250px;
            transition: transform 0.3s ease-in-out;
        }
        .feature-box:hover {
            transform: translateY(-10px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }
        .feature-box i {
            font-size: 2.5rem;
            color: #007BFF;
            margin-bottom: 15px;
        }










/* 🌟 Pricing Section Styling */
.pricing-section {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
}

/* 🏷️ Title & Subtext */
.pricing-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #333;
}

.pricing-subtext {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
}

/* 📦 Pricing Container */
.pricing-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 💳 Individual Pricing Cards */
.pricing-card,
.pricing-plan {
    background: white;
    border-radius: 12px;
    padding: 30px;
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    min-height: auto;
    margin: 0;
}
@media (min-width: 768px) {
  .pricing-card,
  .pricing-plan {
    width: 360px;
    max-width: 100%;
  }
  .pricing-container {
    gap: 40px;
    justify-content: center;
  }
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

/* 🌈 Free Plan Styling */
.free-plan {
    border: 2px solid #007BFF;
}

.free-plan h3 {
    color: #007BFF;
}

/* 🚀 Pro Plan Styling */
.pro-plan {
    border: 2px solid #ff4d00;
    background: linear-gradient(135deg, #ff4d00, #ff7f50);
    color: white;
}

.pro-plan .pricing-features li {
    color: white; /* Ensures feature list items are white */
}


.pro-plan h3 {
    color: white;
}

.pro-plan .price-tag {
    color: white;
}

/* 💰 Pricing Tags */
.price-tag {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
    color: #333;
}

/* ✅ Feature List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pricing-features li {
    font-size: 1rem;
    padding: 5px 0;
    color: #555;
}

/* 🎯 Pricing Buttons */
.btn-plan {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* 🆓 Free Button */
.free-btn {
    background: #007BFF;
    color: white;
}

.free-btn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* 🔥 Pro Button */
.pro-btn {
    background: white;
    color: #ff4d00;
}

.pro-btn:hover {
    background: #ffffff;
    transform: scale(1.05);
}





        












/* 🚀 Sleek NFC Section */
.nfc-showcase {
    text-align: center;
    padding: 60px 20px;
    background:  #ffffff;
    border-radius: 12px;
}

/* 🏆 NFC Header */
.nfc-header h2 {
    font-size: 2rem;
    color: #222;
    font-weight: bold;
    margin-bottom: 10px;
}

.nfc-header p {
    font-size: 1.1rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 20px;
}

/* 🎴 NFC Cards Grid - Card Deck Style */
.nfc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.nfc-card {
  width: 280px;
  max-width: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.nfc-card:hover {
  transform: translateY(-6px);
}

.nfc-card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  margin-bottom: 12px;
}

.nfc-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  font-weight: 600;
}

.nfc-card p {
  font-size: 0.9rem;
  color: #666;
}
@media (max-width: 768px) {
  .nfc-grid {
    flex-direction: column;
    align-items: center;
  }

  .nfc-card {
    width: 90%;
  }
}









/* 📢 Mid-Page CTA Styling */
.cta-banner {
    background: linear-gradient(120deg, #af40ff, #5b42f3 40%, #00ddeb, #5b42f3, #af40ff);
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite, fadeIn 1.2s ease-in-out;
    color: #fff;
    padding: 3rem 1rem;
    text-align: center;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 📢 CTA Heading & Text */
.cta-banner h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-banner p {
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* 📢 Social Icons */
.cta-social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

/* Pulse Animation */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}



.social-icon {
    display: flex;
    animation: float 3s infinite ease-in-out;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    color: white;
    transition: 0.3s ease;
}

/* 🎨 Individual Social Icon Colors */
.instagram { background: #E1306C; }
.twitter { background: #1DA1F2; }
.tiktok { background: #000000; }
.linkedin { background: #0077B5; }


/* 📢 CTA Button */

.cta-btn:hover {
    transform: scale(1.05);
    background: #ffffff;
}











/* ✉️ Sleek Contact Section */
.contact-section {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff; /* Soft light background */
    color: #333;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 40px auto;
}

/* 🖼️ Heading */
.contact-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #222;
}

.contact-section p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
}

/* 🔗 Subtle Social Media Buttons */
.contact-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    background: #ffffff; /* White background */
    color: #333; /* Neutral text */
    border: 1px solid #ddd; /* Soft border */
    transition: transform 0.2s ease-in-out, background 0.2s ease;
}

/* 🌈 Subtle Hover Effect */
.contact-btn:hover {
    transform: translateY(-3px);
    background: #f1f1f1; /* Slightly darker background */
}

/* 📩 Contact Form */
#contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

#contact-form input, 
#contact-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 1rem;
    outline: none;
    background: #fff;
}

#contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* 📨 Submit Button */
#contact-form button {
    margin-top: 10px;
    padding: 12px 20px;
    background: #007BFF;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s ease;
}

#contact-form button:hover {
    background: #0056b3;
}

/* 🌍 Mobile Optimizations */
@media (max-width: 600px) {
    .contact-section {
        padding: 40px 15px;
    }

    .contact-section h2 {
        font-size: 1.8rem;
    }

    .contact-socials {
        flex-direction: column;
    }

    .contact-btn {
        width: 100%;
        justify-content: center;
    }

    #contact-form {
        width: 100%;
    }
}










/* Who Uses Abutic? Section */
.who-uses-abutic {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 30px;
}

.audience-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.audience-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 200px;
    transition: 0.3s ease;
}

.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007BFF, #00C6FF);
    color: white;
    font-size: 1.8rem;
    margin: 0 auto 10px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .audience-grid {
        flex-direction: column;
        align-items: center;
    }
    .audience-card {
        width: 90%;
    }
}














/* 🚀 Final CTA Section */
.final-cta {
    background: white;
    text-align: center;
    padding: 50px 20px;
    border-radius: 12px;
    max-width: 900px;
    margin: 40px auto;
}

/* 📌 CTA Content */
.final-cta .cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.final-cta h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.final-cta p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 20px;
}

/* ⭐ Testimonial Snippet */
.cta-testimonial {
    font-style: italic;
    font-size: 1rem;
    color: #555;
    margin: 20px auto;
    max-width: 500px;
    text-align: center;
    background: rgba(0, 123, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
}

.cta-testimonial i {
    font-size: 1.5rem;
    color: #007BFF;
    margin-right: 5px;
}

.cta-testimonial span {
    display: block;
    font-weight: bold;
    color: #007BFF;
    margin-top: 5px;
}

/* 📌 Image Banner */
.cta-banner-img {
    width: 100%;
    max-width: 700px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* 🚀 CTA Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cta-btn {
    display: inline-block;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s ease;
}

/* Primary CTA Button */
.cta-btn.primary {
    background: #007BFF;
    color: white;
}

.cta-btn.primary:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* Secondary CTA Button */
.cta-btn.secondary {
    background: #f8f9fc;
    color: #007BFF;
    border: 2px solid #007BFF;
}

.cta-btn.secondary:hover {
    background: #007BFF;
    color: white;
    transform: scale(1.05);
}






/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .pricing-plan {
        width: 90vw;
        max-width: 400px;
        margin: 1rem auto;
        padding: 1rem;
    }
    .pricing-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .pricing-card {
        width: 90vw;
        max-width: 400px;
        margin: 1rem auto;
        padding: 1rem;
    }
    .final-cta {
        padding: 40px 15px;
    }
    .cta-banner-img {
        max-width: 100%;
    }
    .cta-buttons {
        flex-direction: column;
    }
}

/* Ensure Mobile vCard Button Matches the Correct Style */
@media (max-width: 768px) {
    .cta-btn.secondary {
        background: white !important;  /* Force white background */
        color: #007BFF !important;  /* Force blue text */
        border: 2px solid #007BFF !important;  /* Blue border */
    }
}







/* 🚀 Our Progress So Far - Modernized */
.progress-section {
    text-align: center;
    padding: 30px 0;
    color: white;
    border-radius: 12px;
    max-width: 900px;
    margin: 25px auto;
    min-height: 150px;
}

/* 🏆 Title */
.progress-title {
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: black;
}

/* 📌 Subtitle */
.progress-subtext {
    font-size: 1.0rem;
    color: #000000ff;
    margin-bottom: 30px;
}

/* 📊 Progress Grid */
.progress-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 📦 Individual Progress Cards */
.progress-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* 💡 Hover Effect */
.progress-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 🎨 Icons */
.progress-icon {
    font-size: 2.0rem;
    color: white;
    margin-bottom: 10px;
}

/* 🔢 Animated Numbers */
.progress-item h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
}

/* 🔤 Labels */
.progress-item p {
    font-size: 1rem;
    color: #ddd;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .progress-grid {
        flex-direction: column;
        align-items: center;
    }
    .progress-item {
        width: 70%;
        max-width: 300px;
    }
    .progress-section {
        padding: 16px 0;
        margin: 16px auto;
        min-height: 80px;
    }
}



.mobile-showcase,
.mobile-showcase-content {
    box-shadow: none !important;
    border: none !important;
}
.mobile-showcase-content {
    background: none !important;
}






/* 🎥 Fullscreen Hero Video */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Matches the hero banner height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 📺 Video Styling */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures full visibility without cropping */
    max-height: 100vh;
}

/* 📱 Mobile Optimization */
@media (max-width: 768px) {
  .hero-video-container {
    height: auto; /* Adjust height dynamically */
    min-height: 50vh; /* Prevents it from being too small */
  }
  .hero-video {
    width: 100%;
    height: auto;
    max-height: none;
    transform: none;
    object-fit: contain;
    object-position: center center;
  }
}



/* 🎥 Specific Styling for B-Roll Video (Smaller on Desktop) */
.broll-video-container {
    height: 60vh; /* Adjusted height for desktop */
}

/* Ensure no changes on mobile */
@media (max-width: 768px) {
    .broll-video-container {
        height: auto; /* Keeps the default behavior */
    }
}



/* 🔗 Footer Navigation */
.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.footer-nav a {
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer-nav a:hover {
    color: #00C6FF;
}

/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .footer-nav {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-nav a {
        display: block;
        margin-bottom: 8px;
    }
}

/* 🧱 Ensure banner stays below fixed nav (esp. on mobile) */
@media (max-width: 768px) {
    .homepage-banner-message {
      margin-top: 70px; /* adjust if your mobile navbar height differs */
    }
  }
    

           @media (max-width: 768px) {
                    .main-content { padding-top: 0 !important; }
                    .homepage-banner-message { margin-top: 70px !important; }
                }
                        .mobile-sticky-cta {
        display: none;
        }

        @media (max-width: 768px) {
        .mobile-sticky-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #007BFF;
            color: white;
            text-align: center;
            padding: 16px;
            font-weight: bold;
            text-decoration: none;
            z-index: 999;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
        }
        }
        

    .cta-button-group {
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: start;
          margin-top: 20px;
        }

        @media (min-width: 768px) {
          .cta-button-group {
            flex-direction: row;
            align-items: center;
          }

          .cta-button-group .cta-btn {
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px; /* Adjusted from 180px */
          }
        }

               .homepage-banner {
            padding: 40px 20px;
            text-align: center;
        }
        .final-cta {
          background: white;
          text-align: center;
          padding: 50px 20px;
          border-radius: 12px;
          max-width: 900px;
          margin: 60px auto;
          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }





        .final-cta h2 {
          font-size: 2rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 15px;
        }

        .final-cta p {
          font-size: 1.1rem;
          color: #555;
          margin-bottom: 20px;
        }

        .cta-buttons {
          display: flex;
          justify-content: center;
          gap: 15px;
          flex-wrap: wrap;
          margin-top: 20px;
        }

        .cta-btn.primary {
          background: #007BFF;
          color: white;
          font-weight: bold;
          padding: 12px 20px;
          border-radius: 6px;
          text-decoration: none;
          transition: 0.3s ease;
          border: 2px solid #007BFF;
        }

        .cta-btn.primary:hover {
          background: #0056b3;
          color: white;
          transform: scale(1.05);
        }

        .cta-btn.secondary {
          background: #f8f9fc;
          color: #007BFF;
          border: 2px solid #007BFF;
          font-weight: bold;
          padding: 12px 20px;
          border-radius: 6px;
          text-decoration: none;
          transition: 0.3s ease;
        }

        .cta-btn.secondary:hover {
          background: #007BFF;
          color: white;
          transform: scale(1.05);
        }
        /* Pro+ Plan Custom Styles */
        .pro-plus-plan {
          background: linear-gradient(to bottom right, #2E86AB, #1B4F72);
          border: 2px solid #1B4F72;
          color: white;
        }

        .pro-plus-plan .btn-plan {
          background-color: #ffffff;
          color: #1B4F72;
          border: none;
        }

        .pro-plus-plan .btn-plan:hover {
          background-color: #e2e2e2;
        }

        .pro-plus-plan .pricing-features li {
          color: #f0f0f0;
        }

        .pro-plus-plan .price-tag {
          color: white;
        }
        

.nav-links .login, 
.bottom-nav .login {
    color: #007BFF !important;
}
    

/* Fade-in on scroll */
                .fade-in {
                  opacity: 0;
                  transform: translateY(20px);
                  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
                }
                .fade-in.visible {
                  opacity: 1;
                  transform: translateY(0);
                }
                
/* 📱 UNIVERSAL MOBILE FIX: prevent any cards or sections from exceeding viewport */
@media (max-width: 768px) {
  /* Ensure all main containers fit */
  .main-content,
  .hero-container,
  .features,
  .pricing-container,
  .nfc-grid,
  .audience-grid,
  .progress-grid {
    padding: 0 16px !important;
  }

  /* Force banners and images to contain */
  .homepage-banner img,
  .picker-banner,
  .leads-banner-img,
  .dqr-banner-img,
  .nfc-banner-img,
  .homepage-banner img,
  .hero-video {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Force all cards and boxes to stack and fit */
  .feature-box,
  .pricing-card,
  .nfc-card,
  .audience-card,
  .progress-item,
  .faq-item,
  .contact-section,
  .multi-step-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    box-sizing: border-box;
  }

  /* Tighter typography */
  h1, h2, h3 {
    line-height: 1.2 !important;
  }
}




/* Banner Images Desktop Defaults */
.picker-banner,
.dqr-banner-img,
.leads-banner-img,
.nfc-banner-img,
.b2b-banner-img {
  width: 60%;
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* Mobile Banner Images Scale Effect */
@media (max-width: 768px) {
  .picker-banner,
  .dqr-banner-img,
  .leads-banner-img,
  .nfc-banner-img {
    transform: scale(1.15);
    transform-origin: center;
    overflow: hidden;
  }

  .b2b-banner-img {
    transform: scale(1.05) !important;
    transform-origin: center center !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .homepage-banner {
    overflow-x: hidden;
    overflow: hidden; /* Ensure transform doesn't cause scrolling */
    position: relative;
  }
}

@media (min-width: 769px) {
  .leads-banner-img {
    transform: scale(1.05);
    transform-origin: center;
    overflow: hidden;
  }
}


    /* Responsive adjustments for .stats-box on mobile */
    @media (max-width: 768px) {
      .stats-box {
        padding: 20px;
        font-size: 1rem;
      }
      .stats-box .stat-number {
        font-size: 1.6rem;
      }
      .stats-box .stat-label {
        font-size: 1rem;
      }
    }

                
  /* Mobile floating-phone showcase image adjustments */
                @media only screen and (max-width: 768px) {
                  .mobile-showcase-content {
                    overflow: hidden !important;
                    position: relative;
                  }

                  .mobile-showcase-content img.floating-phone {
                    width: 100% !important;
                    height: auto !important;
                    transform: scale(1.0) translateX(2%) !important;
                    transform-origin: center center !important;
                    display: block !important;
                    margin: 0 auto !important;
                    max-width: none !important;
                    pointer-events: none;
                  }
                }



              @media (max-width: 768px) {
  .hero-intro-zoom {
    transform: scale(1.4) !important;
    transform-origin: center center !important;
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media (max-width: 768px) {
  .mobile-banner-scale {
    overflow: hidden !important;
    position: relative !important;
  }

  .mobile-banner-scale .picker-banner-zoom {
    transform: scale(1.2) translateY(2%) !important;
    transform-origin: center center !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


@media (max-width: 768px) {
  .zoom-hero-broll {
    transform: scale(1.15)  !important;
    transform-origin: center center !important;
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}


                /* Zoom effect for both desktop and mobile */
.leads-banner-zoom {
  transform: scale(1.4);
  transform-origin: center center;
  transition: transform 0.3s ease;
  display: block;
  margin: 0 auto;
}

/* Ensure containment on mobile */
@media (max-width: 768px) {
  .leads-banner-zoom {
    width: 100% !important;
      transform: scale(1.35);
    height: auto !important;
    object-fit: contain !important;
    overflow: hidden;
  }
}
    
@media (max-width: 768px) {
  .zoom-b2b-banner {
    transform: scale(1.1) !important;
    transform-origin: center center !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

                /* Gradient text for mobile hero heading */
                @media (max-width: 768px) {
                  .mobile-hero h1 {
                    background: linear-gradient(90deg, #6a11cb, #2575fc, #00ddeb);
                    background-size: 200% auto;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 700;
                    font-size: 2.2rem;
                    letter-spacing: -0.5px;
                    line-height: 1.15;
                    animation: shimmer 4s ease-in-out infinite;
                  }
                }

                @keyframes shimmer {
                  0% { background-position: 0% center; }
                  50% { background-position: 100% center; }
                  100% { background-position: 0% center; }
                }

                /* CTA button hover microinteraction */
                .cta-primary {
                  transition: all 0.3s ease;
                }
                .cta-primary:hover {
                  transform: translateY(-3px);
                  box-shadow: 0 6px 20px rgba(0,122,255,0.3);
                }

                /* Hero phone fade-up animation */
                .hero-phones img {
                  opacity: 0;
                  transform: translateY(30px);
                  animation: fadeUp 1.2s ease forwards;
                  animation-delay: 0.4s;
                }

                @keyframes fadeUp {
                  to {
                    opacity: 1;
                    transform: translateY(0);
                  }
                }

/* ========== CSS extracted from index.php ========== */

@media (min-width: 769px) {
                    .b2b-banner-img {
                      width: 850px !important;
                      max-width: 850px !important;
                      margin: 0 auto;
                    }
                  }

/* ========== CSS extracted from index.php ========== */

.dynamic-showcase {
  width: 100%;
  text-align: center;
  padding: 100px 20px;
  background: #ffffff;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-in-out;
}

.dynamic-showcase.visible {
  opacity: 1;
  transform: translateY(0);
}

.dynamic-showcase .gradient-text {
  background: linear-gradient(90deg, #007aff, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}

.dynamic-showcase p {
  color: #444;
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.video-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
}

.video-wrapper video {
  width: 100%;
  border-radius: 20px;
  display: block;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== CSS extracted from index.php ========== */

.xmas-sales-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .xmas-sales-wrapper {
        flex-direction: row;
        justify-content: center;
      }
    }
    .xmas-container {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .xmas-tree {
      position: relative;
      width: 50px;
      height: 50px;
      transform-style: preserve-3d;
      transform: rotateX(-20deg) rotateY(30deg);
      animation: xmasTreeRotate 5s linear infinite;
    }
    @keyframes xmasTreeRotate {
      0% {
        transform: rotateX(-20deg) rotateY(360deg);
      }
      100% {
        transform: rotateX(-20deg) rotateY(0deg);
      }
    }
    .xmas-tree div {
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: translateY(calc(25px * var(--x))) translateZ(0px);
    }
    .xmas-branch span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #69c069, #77dd77);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      border-bottom: 5px solid #00000019;
      transform-origin: bottom;
      transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
    }
    .xmas-stem span {
      position: absolute;
      top: 110px;
      left: calc(50% - 7.5px);
      width: 15px;
      height: 50%;
      background: linear-gradient(90deg, #bb4622, #df7214);
      border-bottom: 5px solid #00000019;
      transform-origin: bottom;
      transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
    }
    .xmas-shadow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      filter: blur(20px);
      transform-style: preserve-3d;
      transform: rotateX(90deg) translateZ(-65px);
    }
    .sales-card {
      padding: 1rem;
      background-color: #fff;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                  0 4px 6px -2px rgba(0, 0, 0, 0.05);
      max-width: 320px;
      border-radius: 20px;
    }
    .sales-title {
      display: flex;
      align-items: center;
    }
    .sales-icon {
      position: relative;
      padding: 0.5rem;
      background-color: #10B981;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 9999px;
    }
    .sales-icon svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      height: 1rem;
    }
    .sales-title-text {
      margin-left: 0.5rem;
      color: #374151;
      font-size: 18px;
    }
    .sales-percent {
      margin-left: 0.5rem;
      color: #02972f;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .sales-data {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .sales-data p {
      margin-top: 1rem;
      margin-bottom: 1rem;
      color: #1F2937;
      font-size: 2.25rem;
      line-height: 2.5rem;
      font-weight: 700;
      text-align: left;
    }
    .sales-range {
      position: relative;
      background-color: #E5E7EB;
      width: 100%;
      height: 0.5rem;
      border-radius: 0.25rem;
    }
    .sales-fill {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #10B981;
      width: 76%;
      height: 100%;
      border-radius: 0.25rem;
    }

/* ========== CSS extracted from index.php ========== */

.floating-network-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, #7747ff, #4f46e5, #14b8a6);
  background-size: 400% 400%;
  animation: gradientShift 18s ease infinite;
  padding: 3rem 1rem;
  border-radius: 18px;
  color: #fff;
  margin-top: 4rem;
}

.floating-content {
  position: relative;
  z-index: 3;
  margin-bottom: 1.5rem;
}

.floating-content h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.floating-content p {
  font-size: 0.95rem;
  opacity: 0.9;
}

.floating-illustration {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.networking-img {
  width: 70%;
  max-width: 480px;
  border-radius: 10px;
  animation: pulseZoom 8s ease-in-out infinite;
  filter: drop-shadow(0 8px 25px rgba(0,0,0,0.25));
}

.floating-icon {
  position: absolute;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.85);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
  animation: floatIcon 10s ease-in-out infinite;
}

.icon1 { top: -6%; left: 22%; }
.icon2 { top: 6%; right: 22%; }
.icon3 { bottom: -4%; left: 46%; }

@keyframes floatIcon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes pulseZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Mobile Optimization */
@media (max-width: 480px) {
  .floating-network-hero {
    padding: 2rem 1rem;
    border-radius: 12px;
  }

  .floating-content h2 {
    font-size: 1.5rem;
  }

  .floating-content p {
    font-size: 0.85rem;
  }

  .networking-img {
    width: 90%;
    max-width: 360px;
  }

  .floating-icon {
    font-size: 1.2rem;
  }
}

/* ========== CSS extracted from index.php ========== */

.abt-tap-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 2rem;
  /* background: linear-gradient(135deg, #0c0d0d, #1a1a1a); */
  background: none;
  border-radius: 20px;
  color: inherit;
  gap: 2rem;
  flex-wrap: wrap;
}
.abt-tap-banner-text {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  justify-content: center;
}
.abt-tap-banner-text h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: #111111;
  text-align: left;
}
.abt-tap-banner-text p {
  font-size: 1.2rem;
  color: #444444;
  max-width: 500px;
  text-align: left;
}
.abt-tap-outer {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}
@media (max-width: 768px) {
  .abt-tap-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 2rem 1rem;
    gap: 1.5rem;
  }
  .abt-tap-banner-text,
  .abt-tap-outer {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .abt-tap-banner-text {
    text-align: center !important;
    align-items: center !important;
  }
  .abt-tap-banner-text h2,
  .abt-tap-banner-text p {
    text-align: center !important;
  }
}
/* Center Proof in the Taps section on mobile */
@media screen and (max-width: 768px) {
  .proof-banner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .proof-banner-wrapper .proof-text {
    text-align: center;
    margin-bottom: 20px;
  }
  .proof-banner-wrapper .proof-counter {
    align-self: center;
  }
}

/* ========== CSS extracted from index.php ========== */

.viewsCard_outer {
  width: 300px;
  height: 250px;
  border-radius: 10px;
  padding: 1px;
  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
  position: relative;
}

.viewsCard_dot {
  width: 5px;
  aspect-ratio: 1;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px #ffffff;
  border-radius: 100px;
  z-index: 2;
  right: 10%;
  top: 10%;
  animation: viewsCard_moveDot 6s linear infinite;
}

@keyframes viewsCard_moveDot {
  0%, 100% {
    top: 10%;
    right: 10%;
  }
  25% {
    top: 10%;
    right: calc(100% - 35px);
  }
  50% {
    top: calc(100% - 30px);
    right: calc(100% - 35px);
  }
  75% {
    top: calc(100% - 30px);
    right: 10%;
  }
}

.viewsCard_card {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  border: solid 1px #202222;
  background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  color: #fff;
}

.viewsCard_ray {
  width: 220px;
  height: 45px;
  border-radius: 100px;
  position: absolute;
  background-color: #c7c7c7;
  opacity: 0.4;
  box-shadow: 0 0 50px #fff;
  filter: blur(10px);
  transform-origin: 10%;
  top: 0%;
  left: 0;
  transform: rotate(40deg);
}

.viewsCard_card .viewsCard_text {
  font-weight: bolder;
  font-size: 4rem;
  background: linear-gradient(45deg, #000000 4%, #fff, #000);
  background-clip: text;
  color: transparent;
}

.viewsCard_line {
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: #2c2c2c;
}

.viewsCard_topl {
  top: 10%;
  background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);
}

.viewsCard_bottoml {
  bottom: 10%;
}

.viewsCard_leftl {
  left: 10%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, #747474 30%, #222424 70%);
}

.viewsCard_rightl {
  right: 10%;
  width: 1px;
  height: 100%;
}

/* ========== CSS extracted from index.php ========== */

.hero-content {
  text-align: left;
  color: #111;
  max-width: 480px;
  margin-left: 40px;
}

.hero-title {
  font-size: 2.6rem;
  font-weight: 700;
  background: linear-gradient(90deg, #d4af37, #f5e1a4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.hero-subtext {
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 22px;
  line-height: 1.5;
}

.hero-cta {
  display: inline-block;
  background: linear-gradient(90deg, #d4af37, #b8860b);
  color: #000;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #f5e1a4, #d4af37);
}

@media (max-width: 768px) {
  .hero-content {
    text-align: center;
    margin-left: 0;
    padding: 0 20px;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtext {
    font-size: 1rem;
  }
}

/* ========== CSS extracted from index.php ========== */

.progress-section {
  padding: 80px 20px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.progress-heading {
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.progress-subtext {
  color: #666;
  font-size: 1.05rem;
  margin-bottom: 50px;
}

.progress-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 22px 18px;
  flex: 1 1 220px;
  max-width: 240px;
  box-shadow: 0 5px 18px rgba(0,0,0,0.07);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  animation: pulseBg 6s ease-in-out infinite;
}

@keyframes pulseBg {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(91,66,243,0.25);
}

.icon-wrapper {
  font-size: 2.2rem;
  color: #5b42f3;
  margin-bottom: 10px;
  background: rgba(91,66,243,0.1);
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
}

.stat-card:hover .icon-wrapper {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  transform: scale(1.1);
}

.counter {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111;
  margin: 8px 0;
}

.stat-card p {
  color: #444;
  font-size: 1rem;
  margin: 0;
}

@media (max-width: 768px) {
  .progress-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .stat-card {
    width: 90%;
    max-width: 340px;
    padding: 24px 16px;
  }

  .progress-heading {
    font-size: 1.9rem;
  }
}

/* ========== CSS extracted from index.php ========== */

.subscription-selector {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  max-width: 1000px;
  margin: 0 auto;
}
.selector-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #222;
}
.selector-subtext {
  color: #555;
  margin-bottom: 2rem;
}
.plan-toggle-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.plan-toggle {
  position: relative;
}
.plan-toggle input {
  display: none;
}
.plan-toggle-card {
  background: linear-gradient(135deg, #ffffff, #f6f7fb);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  width: 180px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.plan-toggle input:checked + .plan-toggle-card {
  border-color: #5b42f3;
  box-shadow: 0 0 15px rgba(91,66,243,0.3);
  transform: translateY(-5px);
}
.plan-feature-box {
  margin-top: 2.5rem;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: #fafafa;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
}
.plan-feature-box h4 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #333;
  font-weight: 600;
}
.plan-feature-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plan-feature-box li {
  font-size: 1rem;
  color: #444;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease;
}
.plan-feature-box li:hover {
  transform: translateX(6px);
  color: #5b42f3;
}
.enhanced-box {
  background: linear-gradient(145deg, #ffffff, #f3f6fc);
  border: 1px solid rgba(91,66,243,0.15);
}
@media (min-width: 768px) {
  .plan-feature-box {
    text-align: center;
  }
  .plan-feature-box ul {
    display: inline-block;
    text-align: left;
  }
}

/* ========== CSS extracted from index.php ========== */

.nfc-card-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  background: linear-gradient(135deg, #ffd700, #f5c542);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.nfc-card-btn:hover {
  background: linear-gradient(135deg, #f5c542, #ffd700);
  transform: translateY(-2px);
}
@media (max-width: 900px) {
  .metal-hero-text .nfc-card-btn {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 14px 0;
    margin-top: 18px;
  }
}

/* ========== CSS extracted from index.php ========== */

@media (min-width: 1024px) {
  .card {
    transform: scale(1.8);
    transform-origin: center;
  }
}

/* ========== CSS extracted from index.php ========== */

@media (min-width: 1024px) {
  .tree-and-card-wrapper {
    flex-direction: row;
    gap: 4rem;
    transform: scale(1.4);
  }
}
/* 🌈 Dynamic Subscription Selector */
.subscription-selector {
  padding: 60px 20px;
  text-align: center;
  background: #f9fafc;
  border-radius: 20px;
  max-width: 1000px;
  margin: 3rem auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.selector-title {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}
.selector-subtext {
  color: #555;
  margin-bottom: 2rem;
}
.plan-toggle-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.plan-toggle {
  cursor: pointer;
}
.plan-toggle input {
  display: none;
}
.plan-toggle-card {
  display: block;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  background: white;
  border: 2px solid #ddd;
  transition: all 0.3s ease;
  min-width: 160px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.plan-toggle input:checked + .plan-toggle-card {
  background: linear-gradient(135deg, #af40ff, #00ddeb);
  color: white;
  border-color: transparent;
  transform: scale(1.05);
}

.plan-toggle-card h3 {
  margin: 0;
  font-size: 1.4rem;
}
.plan-toggle-card p {
  margin: 0.25rem 0 0;
  font-weight: 500;
}
.plan-feature-box {
  margin-top: 2rem;
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  animation: fadeUp 0.5s ease-in-out;
}
.plan-feature-box ul {
  list-style: none;
  padding: 0;
  color: #333;
  line-height: 1.8;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}