/* mob-menu.css */

/* Import Montserrat font as a placeholder for Gilroy */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700;800&display=swap');

/* Global Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #505FF5;
    font-family: 'Montserrat', sans-serif; /* Replace with 'Gilroy' if available */
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

/* Back Button */
.menu-button {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 52px;
    height: 52px;
    border: 1px solid #FFFFFF; /* 1px white outline */
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center; /* Centers the SVG icon */
    cursor: pointer; /* Indicate it's clickable */
    z-index: 2; /* Ensure it's above other elements */
}

/* Navigation Items Container */
.nav-items {
    position: absolute;
    top: 115px; /* 115px down from the top */
    left: 35px; /* 35px from the left */
    display: flex;
    flex-direction: column;
    gap: 30px; /* 30px between each nav item */
    z-index: 2; /* Ensure it's above other elements */
}

/* Individual Navigation Item */
.nav-item {
    color: #D3D3FA;
    text-align: left; /* Align text to the left */
    font-family: 'Montserrat', sans-serif; /* Replace with 'Gilroy' if available */
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    line-height: 60px; /* 100% */
    cursor: pointer; /* Indicate it's clickable */
    transition: color 0.3s ease; /* Smooth color transition if needed */
}

/* Highlight Active Navigation Item */
.nav-item.active {
    color: #FFFFFF;
}