/* Menu de pantalla completa (el boton de 2 rayas). Antes iba en linea en cada pagina:
   Includes/Styles/Overlays/overlay-main-nav-style.php. Ahora es archivo: el telefono lo guarda. (2026-10-27) */
/* Add this class to prevent scrolling */
.no-scroll {
    overflow: hidden;
}
#nav_overlay_menu {
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Prevent interaction when hidden */
    position: fixed; 
    z-index: 1200; 
    left: 0;
    bottom: 0;
    width: 100%; /* Use viewport width */
    height: 100%; /* Use viewport height */
    overflow: hidden; /* Prevent overflow */
    padding: 0 0;
    transition: opacity 0.2s ease, visibility 0.2s ease; /* Quick background transition */
}
/* Overlay Content */
.nav_overlay_content {
    display: grid;
    align-content: space-between;
    position:relative;
    margin:0 0;
    padding:0 100px;
    width:100%;
    height:100%;
    transform: translateY(100%); /* Start below the viewport */
    opacity: 0; /* Start hidden */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for content */
    background:radial-gradient(26.01% 25.18% at 113.75% 3.94%, rgb(225 225 225 / 40%) 0, rgb(220 220 220 / 0%) 100%), radial-gradient(81.27% 77.77% at 93.58% 18.4%, rgb(209 209 209 / 40%) 0, rgb(197 197 197 / 0%) 100%), radial-gradient(52.32% 52.32% at 41.25% -13.29%, rgb(234 234 234 / 40%) 0, rgb(201 201 201 / 0%) 100%), rgb(246 246 246);
}/* Show the overlay */
#nav_overlay_menu.active {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Allow interaction */
}
/* Show overlay content */
.nav_overlay_content.active {
    transform: translateY(0); /* Slide up into view */
    opacity: 1; /* Fully visible */
}
.nav_overlay_body{
    display: grid;
    height: 100%;
    position: relative;
    width: 100%;
    padding: 0 0;
    text-align: -webkit-center;
    justify-items: center;
}.nav_overlay_header_content{
    display:none;
    width:100%;
    height:auto;
    padding:25px 0 0 0;
    margin:0 0;
    align-items:flex-start;
}.nav_overlay_header_left_content{
    display:grid;
    min-width:100%;
    max-width:100%;
    height:auto;
    padding:0 0;
    margin:0 0;
    float:left;
}.nav_overlay_header_right_content{
    display:none;
    justify-items: end;
    min-width:20%;
    max-width:20%;
    height:auto;
    padding:0 0;
    margin:0 0;
    float:left;
}.company_txt{
    color:rgba(30,30,30,1);
    font-weight:600;
    padding:0 0;
    margin:0 0;
    font-size:17px;
    display:block;
    letter-spacing:-0.036em;
}.nav_x_icon{
    cursor:pointer;
    margin:0 0;
    padding:0 0;
    font-weight:400;
    font-size:16px;
    color:rgba(86,86,86,1);
}.nav_overlay_row_content{
    display: flex;
    height: auto;
    padding: 10px 0;
    margin: 0 0;
    justify-items: center;
    align-items: center;
    flex-direction: row-reverse;
    width: 30%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}.nav_overlay_category_title_txt{
    padding:0 0;
    margin:0 0;
    font-size:17px;
    display:block;
    font-weight:500;
    color:rgb(50 60 90);
    letter-spacing:-0.030em;
}.nav_overlay_category_txt{
    padding:0 0;
    margin:0 0;
    text-decoration:none;
    font-size:17px;
    display:block;
    transition:0.3s;
    font-weight:500;
    color:rgb(50 50 50);
    cursor:pointer;
    letter-spacing:-0.030em;
}.nav_overlay_category_txt_active{
    color:rgb(20 20 20) !important;
}
.text_decoration_true{
    text-decoration:underline;
}.arrow-icon {
    display:none !important;
    padding: 0 0;
    cursor: pointer; /* Pointer cursor for interaction */
    width:10px; /* Adjust width as needed */
    height:10px; /* Adjust height as needed */
    border-right:1.5px solid rgba(50,50,50); /* Color of the chevron */
    border-top:1.5px solid rgba(50,50,50);
    transform: rotate(225deg); /* Rotate to make it point to the right */
    display: inline-block;
    margin:3px 200px 0 0;
}.nav_links{
    display: contents;
    color: inherit; /* Inherits color from parent */
    text-decoration: none; /* Removes underline */
}.nav_links:hover .overlay_category_txt {
    color:rgb(150 150 150); /* Simplified color */
    transition: color 0.2s ease; /* Smooth transition */
}.nav_links:hover .arrow-icon {
    border-right: 1.6px solid rgb(150 150 150);
    border-top: 1.6px solid rgb(150 150 150);
    transition: border-color 0.2s ease; /* Smooth transition */
}
.nav_overlay_footer{
    display: grid;
    height: 100%;
    position: relative;
    width: 100%;
    padding:25px 0;
    justify-items: center;
}.join_us_btn{
    font-weight:600;
    background-color:rgb(28 28 28);
    border-radius:30px;
    margin:0 0;
    padding:8px 0;
    width:15%;
    text-align:center;
    cursor:pointer;
}.join_us_btn:hover{
    background-color:rgb(50 50 50);
}.join_us_btn_txt{
    padding:0 0;
    margin:0 0;
    text-decoration:none;
    font-size:14.6px;
    transition:0.3s;
    font-weight:500;
    color:rgb(255 255 255);
    letter-spacing:-0.030em;
}
@media only screen and (max-width:770px) {
    .nav_overlay_content{
        background-image: linear-gradient(270deg, rgb(246 246 246), rgb(248 248 248) 42%, rgb(252 252 252) 80%);
    }.nav_overlay_body{
        -webkit-align-items:flex-start;
        text-align:-webkit-left;
    }.nav_overlay_header_content{
        display:flex;
    }.nav_x_icon{
        font-size:17px;
    }.nav_overlay_row_content{
        display: inline-block;
        width:100%;
        height:auto;
        padding:10px 0;
        margin:0 0;
        align-items:center;
    }.nav_overlay_header_left_content{
        min-width:80%;
        max-width:80%;
    }.nav_overlay_header_right_content{
        display:grid;
    }.nav_overlay_category_title_txt{
        font-size:17px;
    }.nav_overlay_category_txt{
        font-size:17px;
    }.nav_overlay_category_txt:hover{
        text-decoration: none !important;
    }.join_us_btn{
        padding:8px 0;
    }.arrow-icon {
        display:block !important;
        transform: rotate(45deg);
        margin:8.5px 5px 0 0;
    }
}
@media (max-width: 550px) {
    .nav_overlay_content {
        padding: 0 20px;
    }
    .join_us_btn {
        width: 50%;
    }
}
@media (max-width:767px) {
    #svg_waves{
        height:40px !important;
    }
    /* For phones, make the wave border thicker */
    .wave_path {
      stroke-width: 1.5;
    }
}
@media (min-width: 769px) {
    #svg_waves{
        width: fit-content;
        height:40px !important;
    }
    /* For computers, keep the wave border thickness the same */
    .wave_path {
        stroke-width: 1.5;
    }
}