/* ================= HEADER ================= */

        header{
            width: 100%;
            height: 100px;
            padding: 0 30px;

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

            /* background: #0b1120; */
            /* border-bottom: 1px solid rgba(255,255,255,0.08); */

            /* position: sticky; */
            top: 0;
            z-index: 1000;
        }

        /* ================= LOGO ================= */

        #logo img{
            width: 250px;
            object-fit: contain;
            filter:brightness(0) invert(1);
        }

        /* ================= NAVIGATION ================= */

        .navbar ul{
            display: flex;
            align-items: center;
            gap: 35px;
            list-style: none;
        }

        .navbar ul li a{
            text-decoration: none;
            color: white;
            font-size: 17px;
            font-weight: 500;

            transition: 0.3s ease;
        }

        .navbar ul li a:hover{
            color: #60a5fa;
        }

        /* ================= LOGIN BUTTON ================= */

        .login-btn{
            padding: 12px 28px;

            border: none;
            border-radius: 30px;

            background: linear-gradient(135deg,#3b82f6,#8b5cf6);

            color: white;
            font-size: 17px;
            font-weight: 600;

            cursor: pointer;
        }

        /* ================= HAMBURGER ================= */

        #menu-check{
            display: none;
        }

        .menu-toggle{
            display: none;

            font-size: 30px;
            color: white;

            cursor: pointer;
        }

        /* ================= HERO ================= */

        .hero{
            height: calc(100vh - 80px);

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            text-align: center;
            color: white;

            padding: 20px;
        }

        .hero h1{
            font-size: 55px;
            margin-bottom: 20px;
        }

        .hero p{
            font-size: 18px;
            color: #b8c1d9;
            max-width: 700px;
            line-height: 1.7;
        }

        /* ================= MOBILE ================= */

        @media(max-width:768px){

            header{
                height: 70px;
                padding: 0 20px;
            }

            /* Show Hamburger */
            .menu-toggle{
                display: block;
                order: 1;
            }

            /* Logo Center */
            #logo{
                order: 2;
            }

            #logo img{
                width: 110px;
            }

            /* Login Right */
            .login-area{
                order: 3;
            }

            .login-btn{
                padding: 10px 20px;
                font-size: 13px;
            }

            /* Mobile Menu */
            .navbar{
                position: absolute;

                top: 70px;
                left: 0;

                width: 100%;
                background: #111827;

                max-height: 0;
                overflow: hidden;

                transition: 0.4s ease;
            }

            .navbar ul{
                flex-direction: column;
                gap: 22px;

                padding: 25px 0;
            }

            /* Open Menu */
            #menu-check:checked ~ .navbar{
                max-height: 300px;
            }

            .hero h1{
                font-size: 36px;
            }

            .hero p{
                font-size: 15px;
            }
        }