body {
    min-height: 100%;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-section {
    height: 100svh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

@supports not (height: 100svh) {
    .hero-section {
        height: 100vh;
    }
}

.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.mobile-menu {
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
    z-index: 40;
}

.mobile-menu.active {
    max-height: 400px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body, html {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
}