<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CyberSecure</title>
    <style>
        /* General Styles */
        body {
            display: flex; /* Use flexbox layout */
            flex-direction: column; /* Arrange children vertically */
            min-height: 100vh; /* Ensure body takes at least full height of the viewport */
            margin: 0;
            padding: 0;
            background-color: #10101E; /* Darker bluish-black background */
            color: #edffec; /* Light text color */
            font-family: 'Google Sans', sans-serif;
            box-sizing: border-box;
        }

        .header {
            position: relative;
            background-color: #10101E; /* Match header background */
            height: 150px; /* Height for the header */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header h1 {
            font-size: 3rem; /* Increased font size */
            color: #fff; /* White color for contrast */
            position: absolute;
            top: 20%;
            left: 22%; /* Move text towards the left */
            transform: translate(-50%, -30%); /* Adjust overlap with the logo */
            z-index: 1; /* Ensure text is above the image */
        }

        .header img {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 200px; /* Enlarged logo */
            height: 120px;
            border: none; /* Remove any border */
            outline: none; /* Remove any outline */
        }

        .content {
            flex: 1; /* Allow content to grow and fill the available space */
            width: 100%;
            display: flex; /* Use flexbox layout */
            justify-content: center; /* Center items horizontally */
            align-items: center; /* Center items vertically */
            background-color: #087e78; /* Green background */
            padding: 20px; /* Add padding around the content */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            flex-wrap: wrap; /* Allow items to wrap */
        }

        .items {
            background-color: rgb(220, 213, 200); /* Background color for items */
            width: 220px; /* Set a fixed width */
            height: 250px; /* Set a fixed height */
            margin: 10px; /* Margin around items */
            padding: 10px; /* Padding inside items */
            box-sizing: border-box;
            cursor: pointer;
            text-align: center;
            color: black; /* Text color */
            font-weight: bold; /* Make text bold */
            font-style: italic; /* Make text italic */
            font-size: 1.2rem; /* Adjust font size (change value as needed) */
            display: flex;
            flex-direction: column; /* Align text and image vertically */
            justify-content: center; /* Center content vertically */
            align-items: center; /* Center content horizontally */
            transition: transform 0.3s; /* Smooth scale effect on hover */
            border-radius: 15px; /* Make the border corners rounded */
            border: 2px solid rgba(255, 255, 255, 0.8); /* Whitish border color */
        }
        
        

        .items:hover {
            transform: scale(1.05); /* Scale effect on hover */
        }

        .imgh {
            width: 200px;
            height: -200px; /* Height for images */
            display: flex; /* Flexbox for image */
            justify-content: center; /* Center image */
            align-items: center; /* Center image */
        }

        .items img {
            width: 120px;  /* Set image width */
             height: 150px;
            
            
        }

        /* Footer styling */
        .footer {
            display: flex; /* Use flexbox for layout */
            justify-content: center; /* Center items horizontally */
            align-items: center; /* Center items vertically */
            background-color: #10101E; /* Match footer background with header */
            color: #fff; /* White text */
            padding: 20px; /* Vertical padding */
            width: 100%;
        }

        .footer p {
            margin: 0 120px; /* Horizontal spacing between paragraphs */
        }

        .footer a {
            color: #fff;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* Custom Font Import */
        @import url('https://fonts.googleapis.com/css2?family=Google+Sans&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
    </style>
</head>
<body>

    <header class="header">
        <img src="./image (1).png" alt="CyberSecure Logo">
        <h1>CyberSecure</h1>
    </header>

    <div class="content">
        <div class="items" onclick="window.open('main/manager.html','_self')">
            <div class="imgh">
                <img src="./images/manager.png" >
            </div>
            <p>Manager Detection</p>
        </div>

        <div class="items" onclick="window.open('main/passtrength.html','_self')">
            <div class="imgh">
                <img src="./images/password.png" >
            </div>
            <p>Password Strength</p>
        </div>

        <div class="items" onclick="window.open('main/quiz.html','_self')">
            <div class="imgh">
                <img src="./images/quiz.png" >
            </div>
            <p>Cyber Quiz</p>
        </div>

        <div class="items" onclick="window.open('callbeg.html','_self')">
            <div class="imgh">
                <img src="./images/scam.png" >
            </div>
            <p>Scam Call Simulation</p>
        </div>

        <div class="items" onclick="window.open('main/cyberchat.html','_self')">
            <div class="imgh">
                <img src="./images/breach.png" >
            </div>
            <p>Data Breach Checker</p>
        </div>

        <div class="items" onclick="window.open('main/cyberguide.html','_self')">
            <div class="imgh">
                <img src="./images/guide.png" >
            </div>
            <p>Cyber Guide</p>
        </div>
    </div>

    <footer class="footer">
        <p>&copy; 2024 Copyright. All rights reserved.</p>
        <p>Follow us  on LinkedIn<a href="https://www.linkedin.com/in/dipika-rawal-7564b8249/">Dipika</a> and <a href="http://www.linkedin.com/in/akshita-kumari-688922216">Akshita</a></p>
        <p>Contributed  by <a href="https://github.com/DipikaRawal"> Github1 </a> | <a href="https://github.com/akshita317">Github2</a></p>
    </footer>

    <script>
        window.embeddedChatbotConfig = {
        chatbotId: "Q5MFftmLt0B5AugTVMOkG",
        domain: "www.chatbase.co"
        }
        </script>
        <script
        src="https://www.chatbase.co/embed.min.js"
        chatbotId="Q5MFftmLt0B5AugTVMOkG"
        domain="www.chatbase.co"
        defer>
        </script>
    
</body>
</html>