*{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:"Poppins", sans-serif;
    }

    body{
        background:transparent; /* light white-blue */
        color:#003344;
        overflow-x:hidden;
    }

    /* NAVBAR */
    nav{
        width:100%;
        padding:18px 70px;
        background:#d8efff; /* soft light blue */
        display:flex;
        align-items:center;
        justify-content:space-between;
        box-shadow:0 0 20px rgba(0, 80, 120, 0.2);
        
    }

    nav .logo-nav{
        font-size:28px;
        font-weight:700;
        color:#005577;
    }

    nav .logo-nav span{
        color:#00aa77; /* green accent */
        text-shadow:0 0 6px #8fffdc;
    }

    nav ul{
        list-style:none;
        display:flex;
        gap:35px;
    }

    nav ul li a{
        color:#003c4e;
        text-decoration:none;
        font-size:16px;
        font-weight:500;
        transition:0.3s;
    }

    nav ul li a:hover{
        color:#00aa77;
        text-shadow:0 0 8px #8fffdc;
    }

    /* HERO SECTION */
    .hero-navigation{
        text-align:center;
        margin-top:130px;
        padding:20px;
        height: 600px;
    }

    .hero-navigation h1{
        font-size:45px;
        font-weight:700;
        line-height:1.4;
        color:#003950;
    }

    .hero-navigation h1 span{
        color:#00aa77; /* green */
        text-shadow:0px 0px 15px #8fffdc;
    }

    .hero-navigation p{
        margin-top:15px;
        font-size:18px;
        color:#006d8b;
    }

    .date{
        margin-top:35px;
        font-size:17px;
        color:#00aa77;
        letter-spacing:1px;
    }

    /* EMAIL BOX */
    .form-box-nav{
        margin-top:30px;
        display:flex;
        justify-content:center;
        gap:10px;
    }

    .form-box-nav input{
        width:270px;
        padding:12px 15px;
        border-radius:10px;
        border:2px solid #b6dff5;
        outline:none;
        background:#ffffff;
        color:#003344;
    }

    .form-box-nav button{
        padding:12px 25px;
        border:none;
        border-radius:10px;
        background:linear-gradient(135deg, #00c88f, #009f75);
        color:white;
        font-size:16px;
        cursor:pointer;
        transition:0.3s;
        box-shadow:0 4px 15px rgba(0, 168, 120, 0.3);
    }

    .form-box-nav button:hover{
        background:linear-gradient(135deg, #00e8a5, #00b583);
        box-shadow:0 6px 20px rgba(0, 168, 120, 0.4);
    }

    .footer-nav small a{
        color:#009f75;
        text-decoration:none;
        font-weight:600;
    }

    .footer-nav{
        margin-top:25px;
    }

    /* RESPONSIVE */
    @media(max-width:768px){
        nav{
            flex-direction:column;
            gap:15px;
            padding:20px 25px;
        }
        nav ul{
            gap:20px;
        }
        .hero-navigation h1{
            font-size:33px;
        }
    }