/* navbar reset all margins */
#navbar_02_css h1,
#navbar_02_css h2,
#navbar_02_css h3,
#navbar_02_css h4,
#navbar_02_css h5,
#navbar_02_css h6,
#navbar_02_css p,
#navbar_02_css a,
#navbar_02_css ul {
  margin: 0;
  padding: 0;
}
/* navbar container main */
.navbar_02_container_main {
  display: grid;
  place-items: start;
  width: calc(100% - 2 * var(--variable_spacing_01)); /* width with margin spacing */
  height: 20vh; /* optional, enabled for gradient */

  position: fixed; /* navbar stays fixed on scroll */

  border-radius: var(--variable_borderradius_03); /* rounded corners */
  margin: var(--variable_spacing_01); /* top and bottom spacing */

  z-index: 500;
}

/* navbar container content */
.navbar_02_container_content {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo, middle menu, right button */
  align-items: center; /* vertically centers the content */

  border-radius: var(--variable_borderradius_03); /* rounded corners */
  width: 100%; /* full width */
}

/* navbar middle menu heading margins */
.navbar_02_middle_menu_container a {
  margin: 0;
}

/* navbar get in touch button reset margins */
.navbar_02_goback_button_container a {
  margin: 0;
}

/* navbar hamburger menu reset margins */
.navbar_02_hamburger_button_container a {
  margin: 0;
}

.navbar_02_middle_menu_container_mobile a {
  margin: 0;
}

/* navbar logo container */
.navbar_02_logo_container {
  display: grid;
  justify-self: start; /* align logo to the left */
  align-items: center; /* vertically center the logo */
  cursor: pointer;
}

.navbar_02_logo_container a {
  margin: 0;
  padding: 0;
}

/* navbar logo image styling */
.navbar_02_logo_container img {
  height: calc(var(--variable_spacing_items_01) * 3.5 - 2px);
  padding: 0;
  margin-left: var(--variable_spacing_01); /* space to the left of logo */
  margin-right: var(--variable_spacing_01); /* space to the right of logo */
  justify-self: start;

  opacity: 0; /* Initially hidden */
}

/* navbar middle menu container */
.navbar_02_middle_menu_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal buttons */
  justify-self: center; /* horizontally center the container */
  align-items: center; /* vertically center the buttons */

  width: auto; /* container takes up as much space as needed */

  gap: calc(var(--variable_spacing_items_01) * 2); /* space between buttons manual */

  padding: var(--variable_spacing_items_01); /* padding around buttons */
  margin: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01)); /* margin for container */

  border-radius: var(--variable_borderradius_03); /* rounded container */
  cursor: pointer; /* pointer cursor on hover */
}

/* navbar middle menu button */
.navbar_02_middle_menu_button {
  display: inline-grid;
  grid-template-columns: auto auto; /* two columns: text and icon */

  /* button type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  text-align: center; /* center the text inside button */
  color: var(--variable_color_white); /* button text color */
  cursor: pointer; /* pointer cursor on hover */

  padding: calc(2px + var(--variable_spacing_items_01) * 1) calc(2px + var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02); /* rounded buttons */

  justify-content: center; /* horizontally center content */
  align-items: center; /* vertically center content */
  white-space: nowrap; /* prevent text wrapping */
  width: auto; /* ensure button only takes required space */

  opacity: 0; /* initially hidden */
}

/* navbar right button container */
.navbar_02_goback_button_container {
  display: grid;
  justify-self: end; /* align the button to the right */
  align-items: center; /* vertically center the button */

  padding: var(--variable_spacing_items_01); /* padding around buttons */
  margin: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01)); /* margin for container */

  border-radius: var(--variable_borderradius_03); /* rounded button corners */
  box-sizing: border-box; /* include padding in size */
  width: auto; /* container takes minimal space */

  cursor: pointer; /* pointer cursor on hover */
  opacity: 0; /* initially hidden */
}

/* navbar get in touch button */
.navbar_02_goback_button {
  display: grid;
  align-items: center; /* vertically center text */
  justify-items: center; /* horizontally center text */

  /* button type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  padding: calc(2px + var(--variable_spacing_items_01) * 1) calc(2px + var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02); /* rounded button corners */
  color: var(--variable_color_white); /* button text color */

  cursor: pointer; /* pointer cursor on hover */
  opacity: 0; /* initially hidden */
}

/* navbar right button container */
.navbar_02_hamburger_button_container {
  display: grid;
  justify-self: end; /* align the button to the right */
  align-items: center; /* vertically center the button */

  padding: var(--variable_spacing_items_01); /* padding around buttons */
  margin: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01)); /* margin for container */

  border-radius: var(--variable_borderradius_03);
  box-sizing: border-box; /* include padding in size */
  width: auto; /* container takes minimal space */

  cursor: pointer; /* pointer cursor on hover */

  opacity: 0; /* initially hidden */
}

/* navbar get in touch button */
.navbar_02_hamburger_button {
  display: grid;
  align-items: center; /* vertically center text */
  justify-items: center; /* horizontally center text */

  /* button type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  padding: calc(2px + var(--variable_spacing_items_01) * 1) calc(2px + var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02); /* rounded button corners */
  color: var(--variable_color_white); /* button text color */
  border: none;
  cursor: pointer; /* pointer cursor on hover */

  opacity: 0; /* initially hidden */
}

.navbar_02_container_content_mobile {
  position: fixed;
  top: calc(var(--variable_spacing_01) * 3 + var(--variable_spacing_items_01) * 3);
  right: calc(var(--variable_spacing_01) * 2 - var(--variable_spacing_items_01));

  width: fit-content;
  height: fit-content;
}

.navbar_02_middle_menu_container_mobile {
  display: grid;
  grid-template-columns: auto 1fr; /* stack menu items vertically */

  row-gap: calc(var(--variable_spacing_items_01) * 3);
  column-gap: calc(var(--variable_spacing_items_01) * 2);

  padding: var(--variable_spacing_items_01); /* padding around buttons */

  border-radius: var(--variable_borderradius_03); /* rounded container */

  cursor: pointer; /* pointer cursor on hover */
}

.navbar_02_middle_menu_button_mobile_icon {
  display: inline-grid; /* ensures the container wraps tightly around the content */
  place-items: center; /* center the number inside the square */

  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--variable_borderradius_02);

  /* button type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */
}

.navbar_02_middle_menu_button_mobile_icon .navbar_02_button_icon {
  height: calc(var(--variable_spacing_items_01) * 2);
  width: calc(var(--variable_spacing_items_01) * 2);
  filter: brightness(0) invert(1);
}

.navbar_02_middle_menu_button_mobile {
  display: inline-grid;
  grid-template-columns: auto auto; /* two columns: text and icon */

  /* button type 01 background colors */
  background: linear-gradient(155deg,
  var(--variable_button_01_color_03) 0%,
  var(--variable_button_01_color_02) 25%,
  var(--variable_button_01_color_01) 100%);

  backdrop-filter: blur(10px); /* apply blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */

  text-align: center; /* center the text inside button */
  color: var(--variable_color_white); /* button text color */
  cursor: pointer; /* pointer cursor on hover */

  padding: calc(2px + var(--variable_spacing_items_01) * 1) calc(2px + var(--variable_spacing_items_01) * 2);
  border-radius: var(--variable_borderradius_02); /* rounded buttons */

  justify-content: center; /* horizontally center content */
  align-items: center; /* vertically center content */
  white-space: nowrap; /* prevent text wrapping */
}

/* initially hide the mobile menu */
.navbar_02_container_content_mobile {
  display: none;
  opacity: 0;
}

/* when the mobile menu is visible */
.navbar_02_container_content_mobile.show {
  display: block;
  opacity: 1;
}

/* navigation bar media queries */
@media (min-width: 1201px) {
  /* hide mobile menu content on larger screens */
  .navbar_02_container_content_mobile {
    display: none; /* hide the mobile menu */
  }

  /* hide the hamburger button on larger screens */
  .navbar_02_hamburger_button_container {
    display: none; /* hide the hamburger button */
  }

  /* ensure the desktop middle menu remains visible */
  .navbar_02_middle_menu_container {
    display: grid; /* show the middle menu for desktop */
  }
}

@media (max-width: 1200px) {
  .navbar_02_goback_button_container {
    margin: 0;
  }

  .navbar_02_hamburger_button_container {
    margin: 0;
  }

  .navbar_02_goback_button_container {
    margin-top: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01));
    margin-bottom: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01));
    margin-right: calc(var(--variable_spacing_items_01) * 2); /* space between buttons manual */
  }

  .navbar_02_hamburger_button_container {
    margin-top: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01));
    margin-bottom: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01));
    margin-right: calc(var(--variable_spacing_01) - var(--variable_spacing_items_01));
  }

  /* hide the middle menu and show hamburger button */
  .navbar_02_middle_menu_container {
    display: none; /* hide the middle menu on mobile */
  }

  .navbar_02_container_content {
    display: grid;
    grid-template-columns: 1fr 1fr auto; /* logo, contact me button, menu */
    align-items: center; /* vertically centers the content */
    border-radius: var(--variable_borderradius_03); /* rounded corners */
  }
}