/* =========================
   PREMIUM VIP CSS
========================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(-45deg, #0f172a, #1e3a8a, #7c3aed, #0f172a);
            background-size: 400% 400%;
            animation: bgAnimation 15s ease infinite;
            color: #fff;
            overflow-x: hidden;
        }

        /* Animated Background */

        @keyframes bgAnimation {

            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }

        }

        /* HEADER */

        .header {

            width: 90%;
            margin: 25px auto;

            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 18px 40px;

            background: rgba(255, 255, 255, .08);

            backdrop-filter: blur(18px);

            border: 1px solid rgba(255, 255, 255, .15);

            border-radius: 18px;

            box-shadow: 0 15px 40px rgba(0, 0, 0, .4);

            animation: fadeDown 1s;

            position: sticky;
            top: 15px;
            z-index: 1000;

        }

        .logo h1 {

            font-size: 34px;

            font-weight: 700;

            background: linear-gradient(90deg, #00E5FF, #7C4DFF, #FF4081);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }

        /* NAVBAR */

        .navbar ul {

            display: flex;

            list-style: none;

            gap: 25px;

        }

        .navbar a {

            text-decoration: none;

            color: white;

            font-weight: 600;

            padding: 12px 22px;

            border-radius: 40px;

            transition: .4s;

        }

        .navbar a:hover,

        .navbar .active {

            background: linear-gradient(135deg, #00E5FF, #7C4DFF);

            box-shadow: 0 0 25px rgba(124, 77, 255, .7);

            transform: translateY(-3px);

        }

        /* HERO */

        .hero {

            height: 90vh;

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

            padding: 40px;

        }

        .hero-content {

            max-width: 850px;

            animation: fadeUp 1.2s;

        }

        .hero h1 {

            font-size: 70px;

            font-weight: 800;

            line-height: 1.1;

            margin-bottom: 20px;

            background: linear-gradient(90deg, #fff, #00E5FF, #fff);

            background-size: 300%;

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            animation: textGlow 6s linear infinite;

        }

        .hero p {

            font-size: 20px;

            color: #ddd;

            line-height: 1.8;

            margin-bottom: 35px;

        }

        .hero button {

            padding: 18px 45px;

            border: none;

            outline: none;

            border-radius: 50px;

            font-size: 18px;

            font-weight: 700;

            cursor: pointer;

            color: white;

            background: linear-gradient(135deg, #00E5FF, #7C4DFF);

            transition: .4s;

            box-shadow: 0 10px 30px rgba(124, 77, 255, .6);

        }

        .hero button:hover {

            transform: translateY(-8px) scale(1.08);

            box-shadow: 0 20px 45px rgba(0, 229, 255, .8);

        }

        /* MAIN */

        .container {

            width: 90%;

            margin: auto;

            display: grid;

            grid-template-columns: 2fr 1fr;

            gap: 40px;

        }

        /* BLOG CARD */

        .card {

            background: rgba(255, 255, 255, .08);

            backdrop-filter: blur(18px);

            border: 1px solid rgba(255, 255, 255, .15);

            border-radius: 25px;

            overflow: hidden;

            margin-bottom: 40px;

            transition: .5s;

            box-shadow: 0 10px 35px rgba(0, 0, 0, .35);

        }

        .card:hover {

            transform: translateY(-12px);

            box-shadow: 0 25px 50px rgba(0, 229, 255, .4);

        }

        .card img {

            width: 100%;

            height: 320px;

            object-fit: cover;

            transition: 1s;

        }

        .card:hover img {

            transform: scale(1.1);

        }

        .content {

            padding: 30px;

        }

        .content h2 {

            font-size: 34px;

            margin: 15px 0;

        }

        .content p {

            color: #ddd;

            line-height: 1.8;

            margin-bottom: 20px;

        }

        .content a {

            display: inline-block;

            padding: 12px 28px;

            text-decoration: none;

            border-radius: 50px;

            background: linear-gradient(135deg, #00E5FF, #7C4DFF);

            color: white;

            font-weight: 700;

            transition: .4s;

        }

        .content a:hover {

            transform: scale(1.08);

        }

        /* SIDEBAR */

        .sidebar {

            display: flex;

            flex-direction: column;

            gap: 25px;

        }

        .sidebar div {

            background: rgba(255, 255, 255, .08);

            backdrop-filter: blur(18px);

            padding: 28px;

            border-radius: 20px;

            border: 1px solid rgba(255, 255, 255, .15);

            transition: .4s;

        }

        .sidebar div:hover {

            transform: translateY(-8px);

            box-shadow: 0 20px 40px rgba(124, 77, 255, .35);

        }

        .sidebar h2 {

            margin-bottom: 18px;

            font-size: 28px;

        }

        .sidebar ul {

            list-style: none;

        }

        .sidebar li {

            padding: 12px 0;

            border-bottom: 1px solid rgba(255, 255, 255, .15);

        }

        /* FOOTER */

        footer {

            margin-top: 70px;

            padding: 50px;

            text-align: center;

            background: rgba(255, 255, 255, .08);

            backdrop-filter: blur(18px);

            border-top: 1px solid rgba(255, 255, 255, .15);

        }

        footer h2 {

            font-size: 38px;

            margin-bottom: 15px;

        }

        footer p {

            color: #ddd;

            margin-top: 10px;

        }

        /* ANIMATIONS */

        @keyframes fadeDown {

            from {

                opacity: 0;

                transform: translateY(-40px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        @keyframes fadeUp {

            from {

                opacity: 0;

                transform: translateY(50px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        @keyframes textGlow {

            0% {

                background-position: 0%;

            }

            100% {

                background-position: 300%;

            }

        }

        /* RESPONSIVE */

        @media(max-width:900px) {

            .container {

                grid-template-columns: 1fr;

            }

            .hero h1 {

                font-size: 45px;

            }

            .header {

                flex-direction: column;

                gap: 20px;

            }

            .navbar ul {

                flex-wrap: wrap;

                justify-content: center;

            }

            .hero {

                height: auto;

                padding: 100px 20px;

            }

        }