<?php $this->load->view('website/partials/header'); ?>

        <!--Start Breadcrumb Area-->
        <section class="breadcrumb-area">
            <div class="breadcrumb-area-bg" style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/breadcrumb-area-bg.jpg'); ?>);"></div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="inner-content">
                            <div class="title" data-aos="fade-right" data-aos-easing="linear" data-aos-duration="500">
                                <h2>Security Center</h2>
                            </div>
                            <div class="breadcrumb-menu" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="500">
                                <ul>
                                    <li><a href="<?php echo site_url(); ?>">Home</a></li>
                                    <li class="active">Security</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Breadcrumb Area-->


        <!--Start Security Intro-->
        <section style="padding: 80px 0;">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-6">
                        <div data-aos="fade-right" data-aos-duration="800">
                            <p style="color: #667eea; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;">Your Security Matters</p>
                            <h2 style="font-size: 40px; font-weight: 700; margin-bottom: 20px; line-height: 1.2;">Bank-Level Security<br> for Your Peace of Mind</h2>
                            <p style="color: #6c757d; font-size: 16px; line-height: 1.8; margin-bottom: 30px;">At <?php echo $app_name; ?>, protecting your money and personal information is our top priority. We employ industry-leading security measures to ensure your accounts and transactions are always safe.</p>
                            
                            <div style="margin-bottom: 25px;">
                                <div style="display: flex; align-items: flex-start; margin-bottom: 25px;">
                                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 20px;">
                                        <svg width="30" height="30" fill="white" viewBox="0 0 24 24">
                                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">256-Bit Encryption</h3>
                                        <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">All data transmitted between your device and our servers is encrypted using the same technology trusted by major banks worldwide.</p>
                                    </div>
                                </div>
                                
                                <div style="display: flex; align-items: flex-start;">
                                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 20px;">
                                        <svg width="30" height="30" fill="white" viewBox="0 0 24 24">
                                            <path d="M12 1c-5 0-9 4-9 9v2c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2v-2c0-3.9 3.1-7 7-7s7 3.1 7 7v2c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2v-2c0-5-4-9-9-9z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">Two-Factor Authentication</h3>
                                        <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Every login and sensitive transaction requires verification via OTP sent to your registered email or phone.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div data-aos="fade-left" data-aos-duration="800" style="position: relative; padding: 50px 30px;">
                            <div style="position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); border-radius: 50%; filter: blur(60px);"></div>
                            <img src="<?php echo base_url('assets/website/assets/images/about/about-style1-img1.jpg'); ?>" alt="Security" style="width: 100%; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.15);">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Security Intro-->


        <!--Start Security Features-->
        <section style="padding: 80px 0; background: #f8f9fa;">
            <div class="container">
                <div class="text-center mb-5" data-aos="fade-up">
                    <p style="color: #667eea; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;">Security Features</p>
                    <h2 style="font-size: 36px; font-weight: 700; margin-bottom: 15px;">How We Protect You</h2>
                </div>
                <div class="row">
                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
                        <div class="text-center" style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Fraud Monitoring</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Our AI-powered systems monitor transactions 24/7 to detect and prevent suspicious activity before it affects you.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
                        <div class="text-center" style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Instant Alerts</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Receive real-time notifications for every transaction, login attempt, and account change. Stay informed always.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
                        <div class="text-center" style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Card Controls</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Freeze and unfreeze your cards instantly. Disable online, ATM, or international transactions with one tap.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
                        <div class="text-center" style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Secure Login</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Biometric authentication and session timeout ensure only you can access your account, even if your device is lost.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
                        <div class="text-center" style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Data Privacy</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Your personal and financial data is encrypted, never shared with third parties, and stored in secure, compliant servers.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
                        <div class="text-center" style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%; transition: transform 0.3s;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="#667eea" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">24/7 Support</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">Our security team is always available to help you with any concerns or report suspicious activity immediately.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->
                </div>
            </div>
        </section>
        <!--End Security Features-->

        <style>
            .col-xl-4:hover > div {
                transform: translateY(-5px);
            }
        </style>


        <!--Start Security Tips Section-->
        <section style="padding: 80px 0;">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4" data-aos="fade-right">
                        <p style="color: #667eea; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;">Stay Safe</p>
                        <h2 style="font-size: 36px; font-weight: 700; margin-bottom: 20px;">Security Tips</h2>
                        <p style="color: #6c757d; font-size: 16px; line-height: 1.6;">Protect yourself from fraud and scams by following these important security guidelines.</p>
                    </div>

                    <div class="col-xl-8" data-aos="fade-left">
                        <div class="accordion" id="securityTipsAccordion">
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleAccordion('tip1')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">Never share your password or OTP</h4>
                                    <svg id="tip1-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="tip1-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        <?php echo $app_name; ?> will never ask for your password, OTP, or PIN via email, phone, or text message. If anyone requests this information, it's a scam. Report it immediately.
                                    </div>
                                </div>
                            </div>

                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleAccordion('tip2')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">Verify website authenticity</h4>
                                    <svg id="tip2-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="tip2-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Always check that you're on our official website before entering credentials. Look for the padlock icon and verify the URL starts with https://. Bookmark our site to avoid phishing links.
                                    </div>
                                </div>
                            </div>

                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleAccordion('tip3')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">Use strong, unique passwords</h4>
                                    <svg id="tip3-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="tip3-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Create a strong password with a mix of letters, numbers, and symbols. Don't reuse passwords across different sites. Consider using a password manager for better security.
                                    </div>
                                </div>
                            </div>

                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleAccordion('tip4')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">Monitor your accounts regularly</h4>
                                    <svg id="tip4-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="tip4-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Review your transaction history frequently. Enable notifications for all transactions. If you notice any unauthorized activity, report it immediately to our 24/7 support team.
                                    </div>
                                </div>
                            </div>

                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleAccordion('tip5')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">Report suspicious activity</h4>
                                    <svg id="tip5-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="tip5-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        If you receive suspicious emails, texts, or calls claiming to be from <?php echo $app_name; ?>, don't respond. Contact us directly at <?php echo $support_phone ?? '+1 (800) 123-4567'; ?> to verify and report the incident.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <script>
        // Open first accordion by default
        document.addEventListener('DOMContentLoaded', function() {
            toggleAccordion('tip1');
        });

        function toggleAccordion(id) {
            const content = document.getElementById(id + '-content');
            const icon = document.getElementById(id + '-icon');
            
            if (content.style.maxHeight && content.style.maxHeight !== '0px') {
                content.style.maxHeight = '0';
                icon.style.transform = 'rotate(0deg)';
            } else {
                // Close all other accordions
                const allContents = document.querySelectorAll('[id$="-content"]');
                const allIcons = document.querySelectorAll('[id$="-icon"]');
                allContents.forEach(c => c.style.maxHeight = '0');
                allIcons.forEach(i => i.style.transform = 'rotate(0deg)');
                
                // Open clicked accordion
                content.style.maxHeight = content.scrollHeight + 'px';
                icon.style.transform = 'rotate(180deg)';
            }
        }
        </script>
        <!--End Security Tips Section-->


        <!--Start Slogan Content Box-->
        <section class="slogan-area">
            <div class="container">
                <div class="slogan-content-box">
                    <div class="slogan-content-box-bg"
                        style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/slogan-content-box-bg.jpg'); ?>);"></div>
                    <div class="inner-title">
                        <h2>Need to Report Fraud?</h2>
                        <p>Our security team is available 24/7. Contact us immediately if you suspect unauthorized activity.</p>
                    </div>
                    <div class="btn-box">
                        <a class="btn-one" href="<?php echo site_url('website/contact'); ?>">
                            <span class="txt">Contact Security Team</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!--End Slogan Content Box-->

<?php $this->load->view('website/partials/footer'); ?>
