/* =========================
   ABOUT — Split Editorial
   Desktop: text left, image right
   Mobile: full-bleed image overlay + text perfectly centered
   Spacing: multiples of 15
   ========================= */

/* ===== Section wrapper ===== */
/* Desktop container — content sized + centered together */
.aboutSplitContainer{
  width: 100%;
  min-height: 100vh;
  display: grid;
  /* key change: columns size to content instead of stretching */
  grid-template-columns: max-content max-content;

  /* centers both columns as a group */
  justify-content: center;
  /* controlled spacing (multiples of 15 only) */
  column-gap: 45px; /* 3×15 */
  align-items: center;
}

/* Text column */
.aboutSplitTextColumn{
  max-width: 500px; /* 40×15 */
  justify-self: start;
}

/* Image column (no pushing away) */
.aboutSplitImageColumn{
  justify-self: start;
  display: flex;
  justify-content: flex-start;
}


.aboutName{
  margin: 0;
}

.aboutRoleChip{
  width: fit-content;
}

.aboutParagraphStack{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.aboutParagraph{
  margin: 0;
  color: rgba(0,0,0,0.80);
  line-height: 1.7;
  max-width: 600px;
}

/* ===== Image column (desktop) ===== */
.aboutSplitImageColumn{
  display: flex;
  justify-content: flex-end; /* keeps image to the right edge */
  justify-self: end;
}

/* Image frame with 15px inner gap */
.aboutPortraitFrame{
  position: relative;
  width: 450px;       /* 30×15 */
  aspect-ratio: 3 / 4;

  padding: 15px;      /* requested 15px gap */
  box-sizing: border-box;

  border-radius: var(--globalBorderRadius);
  background: var(--white);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Portrait image + feather edges */
.aboutPortraitImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* IMPORTANT: prevents right-lock crop */
  display: block;
  opacity: 1;

  /* Feather edges (fade toward center) */
  -webkit-mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0) 100%
  );
}

/* Subtle white wash to blend image into white background */
.aboutPortraitWhiteWashOverlay{
  position: absolute;
  inset: 15px; /* match the frame padding */
  pointer-events: none;
  background: rgba(255,255,255,0.08);
}

/* =========================
   MOBILE (<= 1020px)
   Full-bleed overlay image + centered text
   ========================= */

@media (max-width: 1022px){

  /* Fullscreen mobile panel */
  .aboutSplitSection{
    padding: 0; /* keep true center */
    min-height: 100vh;
  }

  /* Use flex to guarantee perfect centering */
  .aboutSplitContainer{
    position: relative;
    min-height: 100vh;
    width: 100%;

    display: flex;
    align-items: center;     /* vertical center */
    justify-content: center; /* horizontal center */
    overflow: hidden;

    /* hard reset desktop grid behavior */
    grid-template-columns: none;
    column-gap: 0;
  }

  /* Full overlay image layer (not locked right) */
  .aboutSplitImageColumn{
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: auto;;
    justify-self: auto;
    align-self: auto;
    display: block;
  }

  /* Frame becomes full-bleed */
  .aboutPortraitFrame{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  /* Fullscreen image overlay */
  .aboutPortraitImage{
    width: 60%;
    height:auto;
    object-fit: cover;
    object-position: center center; /* ensures centered crop */
    display: block;

    opacity: 0.3; /* requested */
  }




  .aboutPortraitWhiteWashOverlay{
    inset: 0;
    background: rgba(255,255,255,0.08);
  }

  /* Text sits centered above */
  .aboutSplitTextColumn{
    position: relative;
    z-index: 2;

    text-align: center;
    max-width: 600px; /* 40×15 */
    padding: 30px 15px; /* 2×15 / 1×15 */

    display: flex;
    flex-direction: column;
    align-items: center;

    /* no box */
    background: transparent;
  }

  .aboutParagraph{
    max-width: 600px;
  }

  .aboutRoleChip{
    margin-left: auto;
    margin-right: auto;
  }
}






.work-chip-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px; /* horizontal stays 15-based */
  border-radius: 999px;
  font-family: 'Mon';
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--silver-50);
  color: var(--silver-50);
  margin: 15px 0px;
}





.work-section {
  width: 100%;
  padding: 60px 240px;
  box-sizing: border-box;
 justify-self: center;

}

/* Each row (JS creates these) */
.work-row {
  display: flex;
  justify-content: center;              /* centers 4-up grid */
  gap: var(--project-gap);              /* JS/CSS controlled */
  margin-bottom: var(--project-gap);
}

/* Individual project square */
.work-item {
  position: relative;
  overflow: hidden;
  background: var(--white_darkened);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);

  /* JS controls size */
  width: 100px;
  height: 100px;
  flex-shrink: 0;                       /* prevents squishing */
  border-radius: var(--globalBorderRadius);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Media inside squares */
.work-item img,
.work-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional subtle hover lift (desktop only) */
@media (hover: hover) {
  .work-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.22);
  }
}

/* ===============================
   RESPONSIVE TWEAKS
   =============================== */

#servicesMultiplyBlackOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  /* Desktop: left → right */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0.0) 70%
  );

  mix-blend-mode: multiply;
}

@media (max-width: 1022px) {
  #servicesMultiplyBlackOverlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 10%,
      rgba(0, 0, 0, 0.6) 35%,
      rgba(0, 0, 0, 0.0) 70%
    );
  }
}

.snap-section {

}



  /* ====== Layout / structure only (keep styling minimal) ====== */
    #servicesFullScreenSection {
      width: 100vw;
      height:100vh;
      padding: clamp(15px, 10px, 60px) 15px;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }

    /* Background image layer container */
.servicesBackgroundImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 600ms ease;
}



/* Video background layer */
.servicesBackgroundVideo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  display: block;
   transform: translateX(200px);
}

@media (max-width:1022px){
  .servicesBackgroundVideo{
    height: 50%;
   transform: translateX(0px);
  }

  .work-chip-outline{
  border: 1px solid var(--silver);
  color: var(--silver);
}
}















@media (max-width: 1022px){
  .servicesBackgroundImage{
    width: 100vw;
    height: 60%;
  }
}
    /* Visible image */
    .servicesBackgroundImage.isVisible {
      opacity: 1;
    }

    /* Bottom-left info overlay */
    #servicesInfoOverlayBottomLeft {
      position: absolute;
      left: 60px;
      bottom: 60px;
      z-index: 1;
      padding: 15px;
      display: flex;
      background: transparent;
      border-radius: var(--globalBorderRadius);
      /* structural only */
      max-width: min(520px, 90vw);
      flex-direction: column;
      height: fit-content;
    }

    #servicesIconAndTitleRow {
      display: flex;
      align-items: center;
      flex-direction: column;
      align-items: flex-start;
      gap: 0px;
    }

    #servicesIconImage {
      width: 60px;
      height: 60px;
      object-fit: contain;
      display: block;
    }



    /* Dots / selectors (right side, vertically stacked) */
   #servicesDotNavigation 
  {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  gap: 15px;
}

/* Dot button styling */
.servicesDotButton {
  width: 60px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--silver-50);
  cursor: pointer;
  padding: 0;
}

.servicesDotButton.isActive {
  background: var(--light_blue);
   border: 1px solid var(--light_blue);
   box-shadow: var(--shadow-sm);

}

.servicesDotButton:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}


.servicesToolIcon{
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 1;
}




@media (max-width: 1022px) 
{
      .work-section {
      padding: 30px 30px;
      }

      .work-item {
      box-shadow: 0 4px 16px rgba(0,0,0,0.09);
      background-color: var(--blue);
      border-radius: var(--globalBorderRadius);
      }




      .servicesToolIcon{
      width: 40px;
      height: 40px;
      object-fit: contain;
      opacity: 1;
      }

      #servicesFullScreenSection {
      width: 100vw;
      height: 100vh;
      padding: clamp(15px, 10px, 60px) 15px;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      }

      #servicesIconAndTitleRow {

      align-items: center;
      text-align: center;

      }

      #servicesIconImage {
      align-self: center;
      }

      #servicesDotNavigation
      {
      justify-content: center;
      }

      #servicesInfoOverlayBottomLeft {
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%);
      padding: 15px;
      display: flex;
      max-width: min(90vw, calc(100% - 30px));
      height: fit-content;
      }

}












/* ============================
   BACH Projects (namespaced)
   ============================ */

#BACH-Projects{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: clamp(15px, 10px, 60px) 15px;
  background: transparent;
  justify-content: center;
  align-content: center;
}

/* Grid container */
#BACH-Projects__Grid{
  --bach-gap: 15px;              /* grid gap */
  --bach-tile: 150px;            /* JS will override for perfect scaling */
  display: grid;
  gap: var(--bach-gap);
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(6, var(--bach-tile));
}

/* Switch to 4 columns for <=1022px */
@media (max-width: 1022px){
  #BACH-Projects__Grid{
    grid-template-columns: repeat(4, var(--bach-tile));
  }
}

/* Each tile */
.BACH-Projects__Tile{
  width: var(--bach-tile);
  height: var(--bach-tile);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--silver-50);
  background: var(--white_darkened);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.BACH-Projects__Tile:hover{
  transform: translateY(-2px);
  border-color: rgba(71, 179, 217, 0.7); /* light_blue */
}

/* Media layer */
.BACH-Projects__Media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* Optional subtle overlay for readability */
.BACH-Projects__Scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 31, 60, 0.35),
    rgba(13, 31, 60, 0.0) 55%
  );
  pointer-events: none;
}

/* Label (optional minimal) */
.BACH-Projects__Label{
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.BACH-Projects__Label h3{
  margin: 0;
  color: var(--white);
  font-family: 'Mon';
  letter-spacing: 0.12em;
  font-size: var(--Links);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================
   Overlay
   ============================ */

#BACH-Projects__Overlay{
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 60, 0.82);
  backdrop-filter: blur(10px);
  display: none;
  z-index: 9999;
}

#BACH-Projects__Overlay[data-open="true"]{
  display: block;
}

#BACH-Projects__OverlayInner{
  position: relative;
  width: min(1200px, 92vw);
  height: min(760px, 86vh);
  margin: 7vh auto 0 auto;
  background: rgba(245, 245, 245, 0.06);
  border: 1px solid rgba(245, 245, 245, 0.18);
  border-radius: 18px;
  overflow: hidden;
}

/* Visual container becomes the scroll region */
#BACH-Projects__VisualWrap{
  position: absolute;
  inset: 0;
  overflow-y: auto;      /* scroll vertically if needed */
  overflow-x: hidden;    /* no horizontal scroll */
  -webkit-overflow-scrolling: touch;
  padding: 0;            /* optional */


    scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}


#BACH-Projects__VisualWrap::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}

/* For images: allow natural height (so it can exceed container and scroll) */
.BACH-Projects__OverlayVisual--img{
  width: 100%;
  height: auto;          /* key: allow tall images */
  display: block;
  background: rgba(13, 31, 60, 0.25);
}

/* For PDF iframe: let it fill the overlay and scroll internally */
.BACH-Projects__OverlayVisual--pdf{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: rgba(13, 31, 60, 0.25);
}

/* Close button */
#BACH-Projects__Close{
  position: absolute;
  top: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: var(--globalBorderRadius);
  color: var(--white);
  font-family: 'Mon';
  letter-spacing: 0.12em;
  cursor: pointer;
  z-index: 3;
}

/* Info toggle */
#BACH-Projects__InfoToggle{
  position: absolute;
  top: 15px;
  left: 15px;
  width: 50px;
  height: 50px;
  border-radius: var(--globalBorderRadius);
  color: var(--white);
  font-family: 'Mon';
  letter-spacing: 0.12em;
  cursor: pointer;
  z-index: 3;
}

/* Info panel */
#BACH-Projects__Info{
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: min(500px, calc(100% - 30px));
  padding: 18px 18px 16px 18px;
   border-radius: var(--globalBorderRadius);
  border: 1px solid rgba(245, 245, 245, 0.20);
  background: rgba(13, 31, 60, 0.55);
  color: var(--white);
  z-index: 2;
}

#BACH-Projects__Info[data-hidden="true"]{
  display: none;
}

#BACH-Projects__Title{
  margin: 0 0 8px 0;
  color: var(--white);
}

#BACH-Projects__Desc{
  margin: 0 0 12px 0;
  color: rgba(245, 245, 245, 0.88);
  max-width: 62ch;
}

/* Tags */
#BACH-Projects__Tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.BACH-Projects__Tag{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 245, 245, 0.20);
  background: rgba(245, 245, 245, 0.08);
  color: rgba(245, 245, 245, 0.92);
  font-family: 'Inter';
  font-size: var(--paragraphsmall);
  letter-spacing: 0.02em;
}

/* Mobile overlay sizing */
@media (max-width: 720px){
  #BACH-Projects__OverlayInner{
    height: 84vh;
    margin-top: 8vh;
  }

  #BACH-Projects__Info{
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}


/* =========================================================
   BACH Navbar (namespaced, modern, non-conflicting)
   Uses your root variables + typography
   ========================================================= */

/* =========================================================
   BACH Modern Footer
   ========================================================= */

#BACH-Footer{
  width: 100%;
  padding:30px 60px;
  color: var(--white);
  box-sizing: border-box;
  height: fit-content;
}

/* Layout */
.BACH-Footer__inner{
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  padding:0px 30px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}

/* Identity */
.BACH-Footer__identity{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.BACH-Footer__name{
  font-family: 'Mon';
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.BACH-Footer__country{
  margin: 0;
  font-family: 'Inter';
  color: rgba(245,245,245,0.7);
}

/* Email */
.BACH-Footer__contact{
  display: flex;
  justify-content: center;
}

.BACH-Footer__email{
  font-family: 'Inter';
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--white);
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,245,0.2);
  background: rgba(245,245,245,0.08);
  transition: all 0.25s ease;
}

.BACH-Footer__email:hover{
  border-color: var(--light_blue);
  background: rgba(245,245,245,0.15);
  transform: translateY(-2px);
}

/* Social */
.BACH-Footer__social{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.BACH-Footer__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--globalBorderRadius);
  border: 1px solid rgba(245,245,245,0.2);
  background: rgba(245,245,245,0.08);
  transition: all 0.4s ease;
  text-decoration: none;
}

.BACH-Footer__icon:hover{
  transform: translateY(-2px);
  border-color: var(--light_blue);
  background: rgba(245,245,245,0.15);
  border-radius:999px;
}

.BACH-Footer__svg{
  width: 18px;
  height: 18px;
  fill: var(--white);
}

/* =========================================================
   Responsive
   ========================================================= */




.carousel {
  width: calc(100% - 60px);
  overflow: hidden;
  margin: 30px 0px;
}

.track {
  display: flex;
  gap: 30px;
}

.track img {
  width: 10%;
  aspect-ratio: 1;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 1022px){

  .BACH-Footer__inner{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .BACH-Footer__identity,
  .BACH-Footer__contact,
  .BACH-Footer__social{
    justify-content: center;
    align-items: center;
  }

  .track img {
  width: 30%;
}

}

/* ===== Section ===== */

/* ==============================
   Portfolio Work Section (Scoped)
   ============================== */

/* ---- Section layout ---- */
.portfolio-work-section {
  width: 80%;
  margin: 240px auto;
}

.portfolio-work-header {
  margin-bottom: 80px;
  max-width: 600px;
}

.portfolio-work-intro {
  line-height: 1.6;
  margin: 0;
  opacity: 0.85;
}

.portfolio-work-grid {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* ---- List items ---- */
.portfolio-work-item {
  padding-top: 40px;
  border-top: 1px solid #e5e5e5;
}

.portfolio-work-item:first-child {
  border-top: none;
  padding-top: 0;
}

.portfolio-work-open {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* Optional: subtle hover without feeling “buttony” */
.portfolio-work-open:hover .portfolio-work-title {
  opacity: 0.85;
}

/* ---- Meta + typography ---- */
.portfolio-work-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
  width: 100%;
}

.portfolio-work-title {
  margin: 0 0 12px 0;
}

.portfolio-work-description {
  max-width: 90%;
  line-height: 1.6;
  margin: 0;
  opacity: 0.92;
}

/* ==============================
   Overlay + Modal
   ============================== */

.portfolio-work-overlay {
  position: fixed;
  inset: 0;
  background: var(--white_darkened);
  display: none;
  place-items: center;
  padding: 0px 0px;
  z-index: 9999;
}

.portfolio-work-overlay.is-open {
  display: grid;
}

.portfolio-work-modal {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--white_darkened);
  padding: 30px;
  position: relative;
}

/* Close button */
.portfolio-work-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--silver);
  background: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.5s ease;
}

.portfolio-work-modal-close:hover {
  border: 1px solid var(--blue);
  transform: scale(1.1);
}

/* Header spacing inside modal */
.portfolio-work-modal-header {
  /*padding-right: 52px; /* space so close button doesn’t clash */
  margin-bottom: 30px;
}

/* Main modal layout (gallery + text) */
.portfolio-work-modal-body {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 28px;
  align-items: start;
}

/* ==============================
   Large Image Gallery (Hero)
   ============================== */

.portfolio-work-gallery {
  position: relative;
}

.portfolio-work-gallery-frame {
  margin: 0;
  border-radius: 0px;
  overflow: hidden;
  background: #f4f4f4;
}

/* Hero image */
.portfolio-work-gallery-frame img {
  width: 100%;
  height: auto;
  display: block;

  /* Uncomment for fixed-height editorial look */
  /* height: 520px;
     object-fit: cover; */
}

/* Nav arrows */
.portfolio-work-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  transition:background 1s ease ;
}

.portfolio-work-gallery-prev {
  left: 15px;
}

.portfolio-work-gallery-next {
  right: 15px;
}

.portfolio-work-gallery-nav:hover {
  background: rgba(255, 255, 255, 1);
}

.portfolio-work-gallery-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Counter */
.portfolio-work-gallery-meta {
  margin-top: 12px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ==============================
   Modal Content (Right column)
   ============================== */

.portfolio-work-content h4 {
  margin: 0 0 10px 0;
}

.portfolio-work-content p {
  margin: 0 0 18px 0;
  line-height: 1.6;
  max-width: 520px;
  opacity: 1;
}

.portfolio-work-content ul {
  margin: 0 0 18px 18px;
  line-height: 1.6;
}

/* ==============================
   Responsive
   ============================== */

@media (max-width: 1022px) {
  .portfolio-work-section {
    width: 90%;
    margin: 90px auto;
  }

  .portfolio-work-header {
    margin-bottom: 50px;
  }

  .portfolio-work-modal {
    padding: 20px;
  }

  .portfolio-work-modal-body {
    grid-template-columns: 1fr;
  }

  /* If you used a fixed height above, reduce it on mobile */
  /* .portfolio-work-gallery-frame img { height: 320px; } */

  .portfolio-work-gallery-nav 
  {
  width: 25px;
  height: 25px;
  }

}




.rhombus-wave-section {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
  /*overflow: visible;*/
}

.rhombus-wave-grid {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top:50px ;
}

.rhombus {
  position: absolute;
  width: 45px;
  height: 45px;
  background: #0d1f3c;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  will-change: transform;
  transition: transform 0.14s ease-out;
}

.rhombus{
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}