body {
    margin: 0;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #FFD6A7, #f2eac7);
    padding: 0 40px;
    height: clamp(60px, 8vw, 90px);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.logo-desktop {
    height: 80%;
    max-width: 250px;
    object-fit: contain;
}

.right {
    height: 80%;
    max-width: 120px;
    object-fit: contain;
}
.right2 {
padding-right: 5px;
}

.right-clock {
            position: absolute;
            top: 50%;
            right: 0;                  /* 👈 perfectly flush with the right edge */
            transform: translateY(-50%);
            width: 220px;
            height: 120px;
            border: none;
            background: transparent;
            margin: 0;                 /* ensure no outside space */
            padding: 0;                /* ensure no inner space */
            overflow: hidden;
        }


.header-title {
    font-size: clamp(20px, 3vw, 35px);
    font-weight: bold;
    color: black;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
    white-space: nowrap;
}

/* ===== SUB HEADER ===== */
.sub-header {
    background-color: #4b0049;
    color: orange;
    text-align: center;
    padding: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 3;
}



/* Clock styling */


@media (max-width: 768px) {
    .header {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    .header-title {
        position: static;
        transform: none;
        margin: 5px 0;
        font-size: 22px;
    }

    .right {
        display: none;
    }
     .right-clock {
        display: none;
    }

    .login-box {
        width: 90%;
        padding: 30px 20px;
        margin-top: -20px;
    }


}