/* Default styles for desktop and wide screens */
body {
    font-size: 14px;
    margin: 0 10%; /* Adjust the margin value as needed for larger screens */
}
p {
    font-size: 13px;
}

/* By default, show the full version and hide the smaller version */
#contact_sct_large {
    display: block;
}

#contact_sct_small {
    display: none;
}

#experts_sct table th {
    font-size: 13px;
}

#experts_sct table td {
    font-size: 13px;
}


  .navbar_mobile_menu a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #ddd;  /* light border between links */
  }

  .navbar_mobile_menu {
    font-family: Verdana;
    font-size: 12px;
    position: fixed; /* Ensures that the menu is positioned relative to the screen */
    top: 0;
    width: 100%; /* Takes the full width of the viewport */
    height: 100%; /* Takes the full height of the viewport */
    background-color: rgba(245, 245, 245, 0.95); /* Slightly translucent background. Change to solid color if needed */
    z-index: 999; /* Ensures the menu stays on top */
    left: -1024px;  /* start off the screen */
    height: 100%;
    overflow-y: auto;  /* scrollable in case of many links */
    transition: left 0.5s;  /* smooth slide animation */
    padding-top: 20px;
}


  
  .navbar_mobile_menu a:hover {
    background-color: #FDC581FF;  /* hover effect */
  }



  .hamburger-menu {
    position: fixed;  
    top: 5%;  
    right: 5%;  
    z-index: 1000;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    background-color: #202023FF;
    border-radius: 4px;
}

/* Pseudo-elements for the lines of the hamburger */
.hamburger-menu div {
    content: "";
    background-color: white;  /* Change this to set the color of the hamburger lines */
    height: 3px;              /* Thickness of the line */
    width: 100%;              /* Full width of the parent container */
}


/* This is assuming you have bars in your hamburger icon with a certain height and color. 
   Adjust the bar height and color to match your actual hamburger menu bars. */
.hamburger-menu span {
    width: 100%;
    height: 3px; /* Example height */
    background-color: white; /* Example color */
}

.close-menu {
    position: fixed;
    top: 5%;
    right: 5%;
    z-index: 1000;
    cursor: pointer;

    /* The following is to make the 'X' look like the bars of the hamburger */
    width: 30px;
    height: 22px;
    background-color: #202023FF;

    font-size: 32px; /* Adjust this to get the desired 'X' size */
    line-height: 22px; /* Match with height */
    text-align: center;
    color: white; /* Match with the color of hamburger menu bars */
    
}


.bar {
    height: 3px;
    width: 100%;
    background-color: #000; /* Or any color you prefer for the bars */
}


/* Display the X button when the menu is open */
.navbar_mobile_menu.open .close-menu {
    display: block;
}


.hamburger-menu,
.close-menu,
.navbar_mobile_menu {
    display: none;
}

#small-screen-logo {
    display: none;
    width: 100%;           /* Set the width to cover the entire screen */
    position: fixed;       /* Fix the position so that it's always at the top */
    top: 0;                /* Position it at the top of the page */
    left: 0;               /* Position it at the leftmost side */
    z-index: 100;         /* High z-index to ensure it's above other elements */
    background-color: #202023FF;
}


#large-screen-logo {
    display: block;
}


#map {
    height: 100vh;
    width: 100%;
    border: 0px solid #3498db;
    border-radius: 10px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 0;
  }


/* Styles for screens 1024px and larger */
@media screen and (max-width: 1024px) {
    body {
        font-size: 12px;
        margin: 0 0.5%; /* Adjust the margin value as needed for larger screens */
    }
    p {
        font-size: 11px;
    }
    .cloned-header {
        display: none !important;
    }

    .white-mask {
        display: none !important;
    }

    #contact_sct_large {
        display: none;
    }

    #contact_sct_small {
        display: block;
    }

    #experts_sct table th {
        font-size: 11px;
    }

    #experts_sct table td {
        font-size: 11px;
    }
    

    .navbar_large_screens {
        display: none;
    }

    .navbar_small_screens {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .hamburger-menu {
        /* ... (your styles for the hamburger icon) ... */
        display: flex; /* or block, depending on your requirements */
    }

    .close-menu {
        /* ... (your styles for the X icon) ... */
        display: none; /* Initially hidden until the menu is toggled */
    }

    .navbar_mobile_menu {
        /* ... (your styles for the mobile navigation bar) ... */
        display: block; /* Initially hidden until toggled by the hamburger icon */
    }

    #small-screen-logo {
        display: block; /* Show the small-screen-logo */
    }

    #large-screen-logo {
        display: none; /* Hide the large-screen-logo */
    }

    #map {
        height: 60vh;
        width: 100%;
        border: 0px solid #3498db;
        border-radius: 10px;
        position: relative;
        margin-top: 20px;
        margin-bottom: 0;
      }


}