@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;800&display=swap');
.container-fluid { /*mobile*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5%;
  left: 0%;
  margin: 0 auto;
}
@media (min-width: 991.98px) { /*mobile*/ /*breakpoint*/
  .container-fluid {
    display: none;
  }
}
.container { /*desktop*/
  width: 200%;
  display: flex;
  margin-left: -50%; /*center container?*/
  flex-direction: column;
}
@media (min-width: 992px) and (max-width: 1199.98px) { /*increases size in ipad mobile (landscape)*/
  .container {
    width: 150%;
    display: flex;
    margin-left: -25%; /*center container?*/
    flex-direction: column;
  }
}
@media (min-width: 1200px) { /*test*/
  .container {
    width: 150%;
    display: flex;
    margin-left: -25%; /*center container?*/
    flex-direction: column;
  }
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  .container {
    display: none;
  }
}
div { /*?_desktop*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-selectpx: none;
  user-select: none;
}
.gallery-wrapper {
  max-width: 735px;
  margin-left: auto;
  margin-right: 2vw; /* or 0 if you want it flush right */
  text-align: right; /* ensures caption and hr are also right-aligned */
}
.caption-centered {
  font-size: calc(.3rem + .4vw);
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #2C2C2C;
  margin-top: 4px;
  margin-bottom: 4px;
  white-space: nowrap;
  text-align: right;
}
.hr {
  border-top: 1.2px solid gray;
  width: 100%;
  margin: 0;
  margin-bottom: 0px;
}
#menu ul { /*desktop*/
  list-style: none;
  margin: 0px;
  padding: 0px;
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  #menu ul {
    display: none;
  }
}
#menu li { /*desktop*/
  display: inline-block;
  margin: 9px;
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  #menu li {
    display: none;
  }
}
#menu { /*desktop*/
  position: relative;
  width: 44%;
  margin: auto;
  white-space: nowrap;
  line-height: 8px;
  min-width: 512px; /*keeps menu in place when screen scales down*/
  max-width: 812px; /*keeps menu in place when screen scales up*/
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  #menu {
    display: none;
  }
}
.container-home a { /*desktop*/
  text-decoration: none;
}
.container a { /*desktop*/
  text-decoration: none;
}
.container-fluid a { /*mobile*/
  text-decoration: none;
  color: #2C2C2C; /*h2 color*/
}
h2 { /*mobile*/
  position: relative;
  margin-left: 8%;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  margin-bottom: -2%;
}
@media (min-width: 991.98px) { /*desktop*/ /*breakpoint*/
  .h2 {
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-size: calc(.7rem + .6vw); /*scale size*/
    color: #2C2C2C;
    font-weight: 600;
    text-decoration: none;
  }
}
.hero-img { /*hero img_mobile*/
  display: block;
  margin: auto;
  width: 85%;
  height: 0%;
  padding-top: 3%;
}
.gallery-img { /*gallery img_mobile*/
  display: block;
  margin: auto;
  width: 85%; /*img size_mobile*/
  height: 0%;
  padding-top: 3%;
}
.insta { /*mobile*/
  display: inline-block;
  width: 4%;
  height: auto;
  margin-left: 8%;
  padding-top: 4%;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
.button_container { /*mobile*/
  position: absolute;
  top: 0%;
  right: 5%;
  height: 27px;
  width: 31px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;
}
.button_container:hover { /*mobile*/
  opacity: 1;
}
.button_container.active .top { /*mobile*/
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #686868;
}
.button_container.active .middle { /*mobile*/
  opacity: 0;
  background: #686868;
}
.button_container.active .bottom { /*mobile*/
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #686868;
}
.button_container span { /*mobile*/
  background: #686868;
  border: none;
  height: 1px; /*menu line thickness*/
  width: 95%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.20s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) { /*mobile*/
  top: 11px;
}
.button_container span:nth-of-type(3) { /*mobile*/
  top: 22px;
}
.overlay { /*mobile*/
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
  overflow: hidden;
}
@media (min-width: 991.98px) { /*mobile*/ /*breakpoint*/
  #toggle {
    display: none;
  }
}
.overlay.open { /*mobile*/
  opacity: 0.9; /*opacity of ovelray*/
  visibility: visible;
  height: 100%;
}
.overlay.open li { /*mobile*/
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) { /*mobile*/
  animation-delay: 0.4s;
}
.overlay.open li:nth-of-type(3) { /*mobile*/
  animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(4) { /*mobile*/
  animation-delay: 0.5s;
}
.overlay nav { /*mobile*/
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  text-align: center;
}
.overlay ul { /*mobile*/
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li { /*mobile*/
  display: block;
  height: 25%;
  height: calc(100% / 9);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a { /*mobile*/
  display: block;
  position: relative;
  color: #686868; /*menu button colors*/
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { /*mobile*/
  width: 100%;
}
.overlay ul li a:hover { /*mobile*/
  color: #2C2C2C;
}
#overlay #newid { /*no hover menu link*/
  color: #2C2C2C;
  text-decoration: none;
}
@keyframes fadeInRight { /*mobile*/
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.dropbtn1 { /*desktop*/
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: transparent;
  font-size: calc(.6rem + .3vw); /*scale size*/
  padding: 3px;
  margin-top: 0px;
  border: none;
  color: #686868;
  position: relative;
  top: -2px; /* adjust value as needed */
}
.dropbtn1:hover {
  color: #2C2C2C !important;
  text-decoration: none !important;
}
.dropdown { /*desktop*/
  position: relative;
  display: inline-block;
}
.dropdown-content { /*desktop*/
  display: none;
  position: absolute;
  top: 150%; /* increase from 100% to push it farther down */
  left: 0;
  background-color: white;
  min-width: 200px;
  z-index: 9999; /*added*/
  padding-top: 6px; /* optional: extra spacing inside the dropdown */
}
.dropdown-content a { /*desktop*/
  color: #686868;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(.4rem + .3vw); /*scale size*/
  padding: 10px; /*spaces dropdown menu options on desktop*/
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover { /*desktop*/
  color: #2C2C2C;
}
.dropdown:hover .dropdown-content { /*desktop*/
  display: block;
}
.dropdown-content a:hover { /*desktop*/
  background-color: #ffffff
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item-link {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: black;
}
.dropdown-item-link:hover {
  background-color: #f0f0f0;
}
* {
  box-sizing: border-box
}
@media (max-width: 991.98px) { /*mobile*/ /*breakpoint*/
  #content {
    display: none;
  }
}
#gallery_menu ul { /*desktop*/
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  #gallery_menu ul {
    display: none;
  }
}
#gallery_menu { /*desktop*/
  line-height: 8px; /*spaces dropdown menu options on desktop*/
  white-space: nowrap;
  margin-top: -18px; /*do with bootstrap*/
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  #gallery_menu {
    display: none;
  }
}
.copyright-home {
  font-family: neue-haas-grotesk-text, sans-serif;
  text-align: center;
  padding: 7%;
  white-space: nowrap;
  font-size: calc(.3rem + .3vw); /*scale size*/
  color: #686868;
}
.copyright-gallery {
  font-family: neue-haas-grotesk-text, sans-serif;
  text-align: center;
  padding: 20%; /*pushes copyright down from menu*/ /*changed*/
  white-space: nowrap;
  font-size: calc(.3rem + .3vw); /*scale size*/
  color: #686868;
  align-self: stretch !important;
  text-align: center !important;
}
.copyright-mobile {
  font-family: neue-haas-grotesk-text, sans-serif;
  text-align: center;
  padding: 7%;
  white-space: nowrap;
  font-size: .6rem;
  color: #686868;
}
body {
  display: flex;
  justify-content: center;
}
.text-nowrap {
  font-size: calc(.3rem + .4vw);
  font-family: neue-haas-grotesk-text, sans-serif;
  padding-top: 6px; /*do with bootstrap*/
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  .text-nowrap {
    display: none;
  }
}
/*coc css below*/
.p-3 {
  margin-top: 1.5%; /*pushes content down from top*/ /*changed*/
  width: 31%; /*sizes img.*/ /*changed*/
  max-width: 585px;
  min-width: 425px; /*changed*/
}
@media (min-width: 1550px) { /*desktop*/ /*breakpoint*/
  .p-3 {
    margin-top: 6%; /*pushes site down from top of page_large screen*/
  }
}
@media (min-width: 992px) and (max-width: 1024px) { /*increases size in ipad mobile (landscape)*/
  .p-3 {
    margin-top: 5%; /*pushes content down from top*/
    width: 45%; /*sizes img.*/
    max-width: 585px;
    min-width: 300px;
  }
}
@media (min-width: 1024.98px) and (max-width: 1525px) { /* fixes sizing on macbook?*/ /*new*/
  .p-3 {
    margin-top: 4%; /*pushes content down from top*/
    width: 60%; /*sizes img.*/
    max-width: 550px;
    min-width: 525px;
  }
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  .coc-wrapper {
    display: none;
  }
}
/*below fixes portait ipad sizing (reduces size- working on)*/
@media (min-width: 768px) and (max-width: 991.98px) { /*reduces size in ipad mobile (portrait)*/
  .container-fluid {
    position: absolute;
    width: 75%;
    height: 75%;
    top: 5%;
    left: 0%;
    right: 0%;
    margin: 0 auto;
  }
  @media (min-width: 768px) and (max-width: 991.98px) { /*reduce size_spacing of mobile menu options in ipad portrait*/
    .overlay ul li {
      display: block;
      height: 50%;
      height: calc(75% / 9); /*this*/
      min-height: 25px;
      position: relative;
      opacity: 0;
    }
  }
}
/*home css below*/
.container-home { /*desktop*/ /*working*/
  width: 100%;
  display: flex;
  margin-left: -1%; /*center container?*/
  flex-direction: column; /*stay*/
  margin-top: 4%; /*added to give space between image and menu*/
}
.p-2 {
  margin-top: 0%; /*pushes content down from top*/ /*changed*/
  width: 45%; /*changed*/
  max-width: px; /*changed*/ /*need to have # here*/
  min-width: 300px;
}
@media (min-width: 1550px) { /*desktop*/ /*breakpoint*/
  .p-2 {
    margin-top: 3%; /*pushes site down from top of page_large screen*/
  }
}
@media (min-width: 1024.98px) and (max-width: 1525px) { /* fixes sizing on macbook?*/ /*changed from 1200 to 1440 test*/
  .p-2 {
    margin-top: 4%; /*pushes content down from top*/
    width: 75%; /*sizes img.*/
    max-width: 685px;
    min-width: 525px;
  }
}
@media (min-width: 992px) and (max-width: 1024px) { /*increases size in ipad mobile (landscape)*/
  .p-2 {
    margin-top: 0%; /*pushes content down from top*/
    width: 90%;
    max-width: 675px;
    min-width: 300px;
  }
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  .p-2 {
    display: none;
  }
}
/*645's css below*/
.p-8 {
  margin-top: 1.5%; /*pushes content down from top*/
  width: 40%; /*sizes img.*/
  max-width: 725px; /*changed*/
  min-width: px; /*changed*/
}
@media (min-width: 1550px) { /*desktop*/ /*breakpoint*/
  .p-8 {
    margin-top: 6%; /*pushes site down from top of page_large screen*/
  }
}
@media (min-width: 992px) and (max-width: 1024px) { /*increases size in ipad mobile (landscape)*/
  .p-8 {
    margin-top: 3%; /*pushes content down from top*/
    width: 55%; /*sizes img.*/
    max-width: 625px;
    min-width: 300px;
  }
}
@media (min-width: 1024.98px) and (max-width: 1525px) { /* fixes sizing on macbook?*/ /*new*/
  .p-8 {
    margin-top: 4%; /*pushes content down from top*/
    width: 60%; /*sizes img.*/
    max-width: 735px;
    min-width: 575px;
  }
}
@media (max-width: 991.98px) { /*desktop*/ /*breakpoint*/
  .p-8 {
    display: none;
  }
  /* Desktop Menu Styling */
  #gallery_menu {
    line-height: 8px;
    white-space: nowrap;
    margin-top: 12px; /* move menu down */
  }
  #gallery_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
  }
  #gallery_menu li {
    display: flex;
    align-items: center;
  }
  .menu-link:hover {
    color: #2C2C2C !important;
    text-decoration: none !important;
  }
  .dropbtn1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: transparent;
    font-size: calc(.6rem + .3vw);
    padding: 4px 6px;
    border: none;
    color: #686868;
    cursor: pointer;
  }
  .dropbtn1:hover {
    color: #2C2C2C !important;
    text-decoration: none !important;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    z-index: 99999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  .dropdown-content a {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: calc(.5rem + .3vw);
    color: #686868;
    text-decoration: none;
    display: block;
    padding: 10px;
  }
  .dropdown-content a:hover {
    background-color: #ffffff;
    color: #2C2C2C;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
}
@media (max-width: 991.98px) {
  #gallery_menu {
    display: none;
  }
}
/* Keep 'Frederick Fehr' styling */
.main-name {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 21px;
  color: #2C2C2C !important;
  text-decoration: none !important;
}
.contact-link {
  font-family: 'neue-haas-grotesk-text', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(.6rem + .3vw); /*scale size*/
  color: #686868 !important;
  text-decoration: none !important;
  position: relative;
  top: -2px; /* adjust value as needed */
}
#gallery_menu .contact-link:hover {
  color: #2C2C2C !important;
  text-decoration: none;
}
/* Style dropdown menu items */
.dropdown-item-link {
  font-family: 'neue-haas-grotesk-text', sans-serif;
  font-size: calc(.45rem + .2vw);
  font-weight: 400;
  color: #686868;
  text-decoration: none;
}
.dropdown-item-link:hover {
  color: #2C2C2C
}
/* Flex container for entire menu */
.menu-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px; /* optional: match your <hr> padding */
}
/* Left menu items */
.menu-left {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-left li {
  margin-right: 20px;
}
/* Instagram icon on far right */
.menu-right {
  display: flex;
  align-items: center;
  margin-right: 400px;
  position: relative;
  overflow: visible;
  z-index: 1;
}
/* FINAL override to stop blue & underline on hover */
a.dropbtn1, a.dropbtn1:visited, a.dropbtn1:hover, a.dropbtn1:focus {
  color: #686868 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
}
/*added for fluid*/
@media (min-width: 1024.98px) and (max-width: 1525px) {
  .coc-wrapper {
    /* width will scale with the parent, but stay within 525–550px */
    width: clamp(480px, 40%, 820px);
    /* use viewport height or rems for vertical rhythm */
    margin-top: clamp(12px, 4vh, 48px);
    /* center or align as needed */
    margin-left: auto;
    margin-right: auto; /* or 2vw if you want it nudged right */
  }
  .coc-wrapper img {
    width: 100%;
    height: auto; /* prevents distortion */
    display: block;
  }
}
/* Desktop (>= 992px) */
@media (min-width: 991.98px) {
  /* Make the <a> a square tap target */
  .menu-wrapper a[href*="instagram.com"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ig-tap);
    height: var(--ig-tap);
    text-decoration: none;
  }
  /* Size the image; keep aspect ratio */
  .insta-icon {
    width: 21px !important;
    height: auto !important;
    display: block;
    margin: 0px; /* avoid nudging the menu */
    padding: 0;
  }
}
@media (min-width: 992px) {
  .gallery-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* keep right alignment */
    gap: 1px; /* exact space between HR and menu */
  }
  .gallery-wrapper .hr {
    margin: 0 !important; /* remove HR margins; the gap controls spacing */
    align-self: stretch; /* ensure the line spans full width */
  }
  #gallery_menu {
    margin-top: 0 !important; /* neutralize any previous negative pulls */
  }
}
@media (min-width: 992px) {
  .gallery-wrapper .hr {
    margin: 0 !important;
  }
  #gallery_menu {
    margin-top: 4px !important;
  } /* tweak 4–10px to taste */
}
/* Line up the menu with the left end of the HR (desktop) */
@media (min-width: 992px) {
  /* HR spans the full wrapper width */
  .gallery-wrapper .hr {
    margin: 0 !important;
    align-self: stretch; /* makes the HR full-width inside the flex column */
  }
  /* Make #gallery_menu full-width too */
  #gallery_menu {
    align-self: stretch !important; /* left edge now matches the HR's left edge */
    margin-top: 0 !important; /* ensure no upward/downward nudge */
  }
  /* Remove side padding so the first menu item sits exactly on the left edge */
  .menu-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important; /* optional, but keeps symmetry */
  }
  /* Keep the internal UL tidy */
  #gallery_menu ul {
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* Make menu + IG icon align with the HR (desktop) */
@media (min-width: 992px) {
  /* HR + menu fill the wrapper width */
  .gallery-wrapper .hr {
    margin: 0 !important;
    align-self: stretch;
  }
  #gallery_menu {
    align-self: stretch !important;
    margin-top: 0 !important;
  }
  /* Two columns: left menu | right icon */
  .menu-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto; /* left fills, IG sits on the right */
    align-items: center;
    padding: 0 !important;
    width: 100%;
  }
  /* Make the left list truly flush left */
  .menu-left {
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px; /* use gap instead of li margins */
  }
  .menu-left li {
    margin: 0 !important;
  }
  /* Ensure the last child (IG container) hugs the right edge */
  .menu-wrapper > *:last-child {
    justify-self: end;
  }
  /* Kill any stray pushes */
  .menu-right {
    margin: 0 !important;
  } /* if present */
  #gallery_menu ul li.insta-icon {
    margin-left: 0 !important;
  } /* if present */
}
/* === Instagram icon as a LIST ITEM (desktop) === */
@media (min-width: 992px) {
  /* one left-aligned row */
  #gallery_menu .menu-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 20px; /* space between groups if you add any */
    padding: 0 !important; /* keeps flush with the HR edge */
    width: 100%;
  }
  /* the list is a flex row */
  #gallery_menu .menu-left {
    display: flex !important;
    align-items: center;
    gap: 20px; /* controls spacing between items */
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  #gallery_menu .menu-left li {
    margin: 0 !important; /* rely on gap (above) */
    position: relative; /* keeps dropdown positioning stable */
  }
  /* instagram list item */
  #gallery_menu .menu-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ig-tap, 28px); /* nice tap target; uses fallback if var not set */
    height: var(--ig-tap, 28px);
    text-decoration: none;
  }
  #gallery_menu .menu-icon .insta-icon {
    width: 18px !important; /* tweak size */
    height: auto !important;
    display: block;
  }
  /* neutralize any old grid/float/margin pushes */
  #gallery_menu .menu-wrapper > *:last-child {
    justify-self: auto !important;
  }
  #gallery_menu .menu-right {
    margin: 0 !important;
    float: none !important;
    position: static !important;
  }
  /* === FIX: keep menu left, dropdown correct, copyright centered (desktop) === */
  @media (min-width: 992px) {
    /* Make HR + menu use the same full width inside the right-aligned wrapper */
    .gallery-wrapper .hr {
      margin: 0 !important;
      align-self: stretch !important;
    }
    #gallery_menu {
      align-self: stretch !important;
      text-align: left !important; /* defeat wrapper's text-align:right */
      margin-top: 0 !important;
    }
    /* One clean left-aligned row (no grid) */
    #gallery_menu .menu-wrapper {
      display: flex !important;
      align-items: center;
      justify-content: flex-start !important;
      gap: 20px;
      padding: 0 !important;
      width: 100%;
    }
    /* List items in one row; use gap for spacing */
    #gallery_menu .menu-left {
      display: flex !important;
      align-items: center;
      gap: 20px;
      list-style: none;
      margin: 0 !important;
      padding: 0 !important;
    }
    #gallery_menu .menu-left li {
      margin: 0 !important;
      position: relative;
    }
    /* Dropdown opens directly under trigger */
    #gallery_menu .dropdown {
      position: relative;
    }
    #gallery_menu .dropdown-content {
      left: 0 !important;
      right: auto !important;
      top: calc(100% + 6px); /* small gap below "portfolio" */
      transform: none !important;
    }
    /* Instagram as list item */
    #gallery_menu .menu-icon a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      text-decoration: none;
    }
    #gallery_menu .menu-icon .insta-icon {
      width: 18px !important;
      height: auto !important;
      display: block;
    }
    /* Tighten the menu to the image (desktop) */
    @media (min-width: 992px) {
      /* MAIN KNOB: reduce 4% to a small fixed value */
      .container-home {
        margin-top: 4px !important; /* try 0–6px to taste */
      }
      /* Neutralize earlier pulls/pushes on the menu itself */
      #gallery_menu {
        margin-top: 0 !important;
      }
      /* Make sure the image has no baseline gap */
      .pt-5.p-2 > img.img-fluid {
        display: block;
      }
    }
    /* Move menu slightly to the right (desktop) */
    @media (min-width: 992px) {
      #gallery_menu {
        margin-left: 7px !important; /* adjust this value to taste */
      }
    }
    /* Ensure the overlay actually overlays everything */
    .overlay {
      position: fixed;
      z-index: 1000; /* NEW: put it above page content */
    }
  }
  /* === Mobile hamburger fix (works site-wide) === */
  /* 1) Overlay should sit above page content on mobile, too */
  .overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
  }
  /* 2) Hamburger button stays tappable to open/close even when overlay is open */
  #toggle, .button_container {
    position: fixed !important; /* not absolute */
    top: 10px !important;
    right: 5% !important;
    z-index: 1001 !important; /* above overlay */
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 3) Make the three bars comfortably large */
  .button_container span {
    width: 24px !important;
    height: 2px !important;
  }
  /* 4) Typo fix (prevents weird UA behavior) */
  div {
    -ms-user-select: none; /* replaces -ms-user-selectpx */
  }
}