@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

    body {
        font-family: 'Inter', sans-serif;
        background-color: #0a0a0a; 
        color: #eeeeee; 
        margin: 0;
        padding: 0;
        line-height: 1.6;
        overflow-x: hidden; 
    }

    header {
        background-color: #1a1a1a; 
        padding: 1rem 0;
        text-align: center;
    
        box-shadow: 0 0 15px rgba(255, 153, 51, 0.8), 
                    0 0 15px rgba(255, 255, 255, 0.8), 
                    0 0 15px rgba(18, 136, 7, 0.8);
        margin-bottom: 2rem;
    }

    .header-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px; 
        flex-wrap: wrap; 
        padding: 0 1rem; 
    }

    header h1 {
        margin: 0;
        font-size: 2.5rem;
        line-height: 1.2; 
    }    


    .title-word-cyber {
        color: #ff9933;  
    }

    .title-word-sahayta {
        color: #ffffff;
    }

    .title-word-hub {
        color: #128807;
    }

    .title-word-india {
        color: #2424d8;  
    }


    .indian-flag {
        width: 40px;  
        height: auto;
        vertical-align: middle;  
        flex-shrink: 0; 
    }


    main {
        padding: 0 1rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .links-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        align-items: start;
    }

    .link-item {
        background-color: #1a1a1a;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(255, 153, 51, 0.3),
                    0 0 5px rgba(255, 255, 255, 0.3),
                    0 0 5px rgba(18, 136, 7, 0.3);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
    }

    .link-item:hover {
        transform: translateY(-10px); 
        box-shadow: 0 0 20px rgba(255, 153, 51, 0.6),
                    0 0 20px rgba(255, 255, 255, 0.6),
                    0 0 20px rgba(18, 136, 7, 0.6);
    }

    .link-item h2 {
        margin-top: 0;
        color: #ff9933; 
        margin-bottom: 0.5rem; 
    }

    .link-item p {
        margin-bottom: 1.5rem;
    }

    .link-button {
        display: inline-block;
        background: linear-gradient(to right, #ff9933, #ffffff, #128807); 
        color: #0a0a0a; 
        padding: 0.75rem 1.5rem;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        text-align: center;
        font-weight: bold;
        border: none; 
        align-self: flex-start; }

    .link-button:hover {
        
        box-shadow: 0 0 15px rgba(255, 153, 51, 0.8);
    }

    footer {
        background-color: #1a1a1a;
        color: #cccccc;
        text-align: center;
        padding: 1.5rem 0;
        margin-top: 3rem;
        
        box-shadow: 0 0 10px rgba(255, 153, 51, 0.5),
                    0 0 10px rgba(255, 255, 255, 0.5),
                    0 0 10px rgba(18, 136, 7, 0.5);
    }

    .social-icons a {
        color: #eeeeee;
        font-size: 1.8rem;
        margin: 0 10px;
        transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
    }

    .social-icons a:hover {
        color: #2424d8; 
        text-shadow: 0 0 10px #2424d8;
    }

    @media (max-width: 768px) {
        header h1 {
            font-size: 2rem;
        }

        .header-content {
            flex-direction: column;
            gap: 10px;
        }

        .indian-flag {
            width: 30px; 
        }

        .links-container {
            grid-template-columns: 1fr; 
        }

        .link-item {
            padding: 1rem;
        }

        .link-button {
            padding: 0.6rem 1.2rem;
        }

        .social-icons a {
            font-size: 1.5rem;
        }
    }