html, body {
    height: 100%; /* Ensure the minimum height is the full screen */
    margin: 0; /* Reset default margin */
    padding: 0; /* Reset default padding */
    width: 100%; /* Ensure the minimum width is the full screen */
}

body {
    background: rgb(228,228,228); /* Fallback for older browsers */
    background: linear-gradient(180deg, rgba(228,228,228,1) 51%, rgba(255,255,255,1) 100%); /* Modern browsers */
    background-repeat: no-repeat; /* Prevent background from repeating */
    background-size: cover; /* Cover the entire page */
    background-attachment: fixed; /* Optional: Makes the background fixed during scroll */
    padding-top: 10px;
}

body::after {
    content: "";
    display: block;
    height: 1px;
    min-height: 100%;
}

.desktop-menu {
    display: none;
}

.other-view {
    display: none;
}

.mobile-view {
    display: block;
    width: 100%;
}

.mobile-menu {
    display: none;
    width: 100%;
}

.mobile-menu-icon {
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px;
}

.logo-img {
    width: 100px;
}

.image-size {
    width: 100%;
}


@media (min-width: 768px) {

    body {
    background: rgb(228,228,228); /* Fallback for older browsers */
    background: linear-gradient(180deg, rgba(228,228,228,1) 51%, rgba(255,255,255,1) 100%); /* Modern browsers */
    background-repeat: no-repeat; /* Prevent background from repeating */
    background-size: cover; /* Cover the entire page */
    background-attachment: fixed; /* Optional: Makes the background fixed during scroll */
    padding-top: 30px;
}

    .mobile-menu {
        display: none;
    }

    .mobile-menu-icon {
        display: none;
    }

    .desktop-menu {
        display: block;
    }

    .logo-img {
        width: 150px;
    }

    .mobile-view {
        display: none;
    }

    .other-view {
        display: block;
    }


}