@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Special layout for homepage to include footer */
body.home-page {
    overflow: hidden;
}

body.home-page main {
    height: 100vh;
}

body.home-page footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Regular layout for other pages */
body:not(.home-page) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

body:not(.home-page) main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Snippet 1: */
.semicircle-overlay {
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 30%;
    background-color: #363636;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    transform: translateY(10%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1.5rem;
}

.hero-section {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
}
/* End of snippet 1 */

/* Snippet 4 */
.w-full.bg-moon-grey.h-\[21\.7rem\] {
    flex: 1;
    min-height: 21.7rem;
}
/* End of snippet 4 */

/* Snippet 3: */
.container-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Custom scrollbar styling */
.flex::-webkit-scrollbar {
    height: 8px;
}

.flex::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.flex::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.flex::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* End of snippet 3 */