.workPageDetail {
  width: 98vw;
  height: 100%;
  margin: auto;
}

.workDetailText {
  width: 100%;
  height: 100%;
  margin: 0 auto 2vh auto;
}

.workPageDetail h1 {
  margin: 0vw 0 2vw 4vw;
}

#blueSquiggle {
  position: relative;
  width: 40vw;
  height: 6vh;
  left: 10vw;
  border: 12px 0px 0px 0px;
}

.workPageDetail h3 {
  font-size: 7vw;
  font-weight: 600;
  margin: 4vw 0 2vw 4vw;
}

.workPageDetail p {
  display: block;
  font-size: clamp(20px, 2.8vw, 50px);
  max-width: 90vw;
  line-height: 4.4vh;
  margin: auto;
  width: 90vw;
}

.workPageDetail p,
.workPageDetail h3 {
  padding-bottom: 1%;
}

.workPageDetail a {
  font-family: Raleway;
  font-weight: 700;
  text-decoration: none;
  color: #000;
}

.workPageDetail a:hover {
  text-decoration: #ffac35 wavy underline;
}

.PageLogo {
  display: block;
  position: relative;
  width: 50vw;
  margin: auto;
  rotate: 0deg;
  object-fit: contain;
}

.collectionHeading {
  padding: 2% 0;
}

.navigation-buttons {
  display: none;
}
/* Container for the back button */
.back-button,
.forward-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* No background */
  color: #ffae40; /* Text and icon color */
  padding: 10px 14px;
  border: 3px solid #ffae40; /* Border color matches the icon */
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  position: fixed; /* Position button absolutely */
}

.back-button {
  top: 44%; /* Center vertically */
  left: 2%; /* Center horizontally */
}

.forward-button {
  top: 44%; /* Center vertically */
  right: 2%; /* Center horizontally */
}

/* Style for the SVG icon inside the button */
.back-button svg {
  margin-right: 8px; /* Space between the icon and text */
}

/* Hover effect for the button */
.back-button:hover,
.forward-button:hover {
  background-color: #ffae40; /* Golden background on hover */
  color: white; /* Text and icon become white on hover */
}

.back-button:hover svg {
  stroke: white; /* Icon stroke turns white on hover */
}

/* Focus effect for accessibility */
.back-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 174, 64, 0.6); /* Focus ring color */
}

/* ---------- Work Page Detail Image Gallery MOBILE ---------- */
.imageGallery {
  width: 98vw;
  max-width: 1800px;
  margin: auto;
  display: grid;
  gap: 2vh 2vh;
  justify-content: center;
  align-self: center;
  padding-top: 2%;
}

.imageGallery img {
  object-fit: cover;
  width: 90vw;
  height: 90vw;
}
@media (max-width: 800px) {
  /* Hide images after the 12th */
  .imageGallery img:nth-child(n + 9) {
    display: none;
  }
}

.workDetailBottomGraphic {
  display: none;
  width: 40vw;
  height: 100%;
  margin: 10vw auto;
}

@media only screen and (min-width: 800px) {
  .workPageDetail {
    max-width: 1800px;
    width: 80vw;
    height: 100%;
    margin: auto;
  }

  .workPageDetail h1 {
    margin: 0;
    width: 80vw;
  }

  .workDetailBottomGraphic {
    display: block;
    width: 40vw;
    height: 100%;
    margin: 10vw auto;
  }

  .workPageDetail h3 {
    font-size: var(--step-2);
    margin: 0;
  }

  .workPageDetail p {
    width: 60vw;
    font-size: var(--step-1);
    line-height: 3.8vw;
    max-width: 80vw;
    margin: 0;
  }

  .PageLogo {
    display: block;
    position: absolute;
    width: 16%;
    top: 20%;
    right: 12%;
    rotate: 45deg;
    object-fit: contain;
  }
  .navigation-buttons {
    display: inline;
  }

  .back-button svg path,
  .forward-button svg path {
    stroke-width: 3;
  }
  /* ================================ Image Gallery ================================ */
  /* ---------- Work Page Detail Image Gallery ---------- */
  .imageGallery {
    width: 80vw;
    max-width: 1800px;
    margin: auto;
    display: grid;
    gap: 2vh 2vh;
    justify-content: center;
    align-self: center;
  }

  .imageGallery img {
    display: inline;
    object-fit: cover;
    width: 100%;
    height: 50vh;
  }

  /* Grid Gallery for 1 images */
  .imageGallery-1 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
  }
  .imageGallery-1 img {
    width: 100%;
    height: 80vh;
    grid-column: span 2;
  }

  /* Grid Gallery for 2 images */
  .imageGallery-2,
  .imageGallery-3,
  .imageGallery-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .imageGallery-2 img,
  .imageGallery-3 img {
    grid-column: span 1;
  }

  /* Grid Gallery for 3 images */
  .imageGallery-3 {
    grid-template-rows: 1fr;
  }

  .imageGallery-3 img:nth-child(3) {
    grid-column: span 2;
  }

  /* Grid Gallery for 4 images */
  .imageGallery-4 {
    grid-template-rows: 1fr;
  }
  .imageGallery-4 img {
    grid-column: span 1;
  }

  /* Grid Gallery for 5 images */
  .imageGallery-5,
  .imageGallery-6,
  .imageGallery-7,
  .imageGallery-8,
  .imageGallery-9,
  .imageGallery-10,
  .imageGallery-13,
  .imageGallery-16 {
    grid-template-columns: repeat(6, 1fr);
  }

  .imageGallery-5 {
    grid-template-rows: 1fr;
  }
  .imageGallery-5 img {
    grid-column: span 2;
  }

  .imageGallery-5 img:nth-child(4),
  .imageGallery-5 img:nth-child(5) {
    grid-column: span 3;
  }

  /* Grid Gallery for 6 images */
  .imageGallery-6 {
    grid-template-rows: repeat(3, 30vh);
  }
  .imageGallery-6 img {
    grid-column: span 3;
  }

  /* Grid Gallery for 7 images */

  .imageGallery-7 img {
    grid-column: span 3;
  }

  .imageGallery-7 img:nth-child(7) {
    grid-column: span 6;
  }

  /* Grid Gallery for 8 images */

  .imageGallery-8 img {
    grid-column: span 3;
  }

  /* Grid Gallery for 9 images */
  .imageGallery-9 {
    grid-template-rows: repeat(3, 30vh);
  }
  .imageGallery-9 img {
    grid-column: span 2;
  }

  /* Grid Gallery for 10 images */
  .imageGallery-10 {
    grid-template-rows: repeat(4, 30vh);
  }
  .imageGallery-10 img {
    grid-column: span 2;
  }

  .imageGallery-10 img:nth-child(1),
  .imageGallery-10 img:nth-child(2),
  .imageGallery-10 img:nth-child(6),
  .imageGallery-10 img:nth-child(7) {
    grid-column: span 3;
  }

  /* Grid Gallery for 13 images */
  .imageGallery-13 img {
    grid-column: span 2;
  }

  .imageGallery-13 img:nth-child(1),
  .imageGallery-13 img:nth-child(2),
  .imageGallery-13 img:nth-child(6),
  .imageGallery-13 img:nth-child(7) {
    grid-column: span 3;
  }

  /* Grid Gallery for 16 images */

  .imageGallery-16 img:nth-child(1) {
    grid-column: span 6;
  }
  .imageGallery-16 img {
    grid-column: span 2;
  }

  .imageGallery-16 img:nth-child(2),
  .imageGallery-16 img:nth-child(3),
  .imageGallery-16 img:nth-child(7),
  .imageGallery-16 img:nth-child(8),
  .imageGallery-16 img:nth-child(12),
  .imageGallery-16 img:nth-child(13) {
    grid-column: span 3;
  }

  /* Grid Gallery for 25 images */
  .imageGallery-25,
  .imageGallery-26,
  .imageGallery-27,
  .imageGallery-28,
  .imageGallery-29,
  .imageGallery-30,
  .imageGallery-31,
  .imageGallery-32,
  .imageGallery-33,
  .imageGallery-34 {
    grid-template-columns: repeat(12, 1fr);
  }
  .imageGallery-25 img {
    grid-column: span 6;
  }

  .imageGallery-25 img:nth-child(3),
  .imageGallery-25 img:nth-child(4),
  .imageGallery-25 img:nth-child(5),
  .imageGallery-25 img:nth-child(8),
  .imageGallery-25 img:nth-child(9),
  .imageGallery-25 img:nth-child(10),
  .imageGallery-25 img:nth-child(13),
  .imageGallery-25 img:nth-child(14),
  .imageGallery-25 img:nth-child(15),
  .imageGallery-25 img:nth-child(18),
  .imageGallery-25 img:nth-child(19),
  .imageGallery-25 img:nth-child(20),
  .imageGallery-25 img:nth-child(23),
  .imageGallery-25 img:nth-child(24),
  .imageGallery-25 img:nth-child(25) {
    grid-column: span 4;
  }

  /* Grid Gallery for 26 images */

  .imageGallery-26 img {
    grid-column: span 6;
  }

  .imageGallery-26 img:nth-child(3),
  .imageGallery-26 img:nth-child(4),
  .imageGallery-26 img:nth-child(5),
  .imageGallery-26 img:nth-child(8),
  .imageGallery-26 img:nth-child(9),
  .imageGallery-26 img:nth-child(10),
  .imageGallery-26 img:nth-child(13),
  .imageGallery-26 img:nth-child(14),
  .imageGallery-26 img:nth-child(15),
  .imageGallery-26 img:nth-child(18),
  .imageGallery-26 img:nth-child(19),
  .imageGallery-26 img:nth-child(20) {
    grid-column: span 4;
  }

  /* Grid Gallery for 27 images */

  .imageGallery-27 img {
    grid-column: span 6;
  }

  .imageGallery-27 img:nth-child(3),
  .imageGallery-27 img:nth-child(4),
  .imageGallery-27 img:nth-child(5),
  .imageGallery-27 img:nth-child(8),
  .imageGallery-27 img:nth-child(9),
  .imageGallery-27 img:nth-child(10),
  .imageGallery-27 img:nth-child(13),
  .imageGallery-27 img:nth-child(14),
  .imageGallery-27 img:nth-child(15),
  .imageGallery-27 img:nth-child(18),
  .imageGallery-27 img:nth-child(19),
  .imageGallery-27 img:nth-child(20),
  .imageGallery-27 img:nth-child(23),
  .imageGallery-27 img:nth-child(24),
  .imageGallery-27 img:nth-child(25) {
    grid-column: span 4;
  }

  /* Grid Gallery for 28 images */

  .imageGallery-28 img {
    grid-column: span 6;
  }

  .imageGallery-28 img:nth-child(3),
  .imageGallery-28 img:nth-child(4),
  .imageGallery-28 img:nth-child(5),
  .imageGallery-28 img:nth-child(8),
  .imageGallery-28 img:nth-child(9),
  .imageGallery-28 img:nth-child(10),
  .imageGallery-28 img:nth-child(13),
  .imageGallery-28 img:nth-child(14),
  .imageGallery-28 img:nth-child(15),
  .imageGallery-28 img:nth-child(18),
  .imageGallery-28 img:nth-child(19),
  .imageGallery-28 img:nth-child(20),
  .imageGallery-28 img:nth-child(23),
  .imageGallery-28 img:nth-child(24),
  .imageGallery-28 img:nth-child(25) {
    grid-column: span 4;
  }

  .imageGallery-28 img:nth-child(28) {
    grid-column: span 12;
  }

  /* Grid Gallery for 29 images */

  .imageGallery-29 img {
    grid-column: span 6;
  }

  .imageGallery-29 img:nth-child(3),
  .imageGallery-29 img:nth-child(4),
  .imageGallery-29 img:nth-child(5),
  .imageGallery-29 img:nth-child(8),
  .imageGallery-29 img:nth-child(9),
  .imageGallery-29 img:nth-child(10),
  .imageGallery-29 img:nth-child(13),
  .imageGallery-29 img:nth-child(14),
  .imageGallery-29 img:nth-child(15),
  .imageGallery-29 img:nth-child(18),
  .imageGallery-29 img:nth-child(19),
  .imageGallery-29 img:nth-child(20),
  .imageGallery-29 img:nth-child(23),
  .imageGallery-29 img:nth-child(24),
  .imageGallery-29 img:nth-child(25) {
    grid-column: span 4;
  }

  /* Grid Gallery for 30 images */

  .imageGallery-30 img {
    grid-column: span 6;
  }

  .imageGallery-30 img:nth-child(3),
  .imageGallery-30 img:nth-child(4),
  .imageGallery-30 img:nth-child(5),
  .imageGallery-30 img:nth-child(8),
  .imageGallery-30 img:nth-child(9),
  .imageGallery-30 img:nth-child(10),
  .imageGallery-30 img:nth-child(13),
  .imageGallery-30 img:nth-child(14),
  .imageGallery-30 img:nth-child(15),
  .imageGallery-30 img:nth-child(18),
  .imageGallery-30 img:nth-child(19),
  .imageGallery-30 img:nth-child(20),
  .imageGallery-30 img:nth-child(23),
  .imageGallery-30 img:nth-child(24),
  .imageGallery-30 img:nth-child(25),
  .imageGallery-30 img:nth-child(28),
  .imageGallery-30 img:nth-child(29),
  .imageGallery-30 img:nth-child(30) {
    grid-column: span 4;
  }

  .imageGallery-30 img:nth-child(31) {
    grid-column: span 12;
  }

  /* Grid Gallery for 31 images */

  .imageGallery-31 img {
    grid-column: span 6;
  }

  .imageGallery-31 img:nth-child(3),
  .imageGallery-31 img:nth-child(4),
  .imageGallery-31 img:nth-child(5),
  .imageGallery-31 img:nth-child(8),
  .imageGallery-31 img:nth-child(9),
  .imageGallery-31 img:nth-child(10),
  .imageGallery-31 img:nth-child(13),
  .imageGallery-31 img:nth-child(14),
  .imageGallery-31 img:nth-child(15),
  .imageGallery-31 img:nth-child(18),
  .imageGallery-31 img:nth-child(19),
  .imageGallery-31 img:nth-child(20),
  .imageGallery-31 img:nth-child(23),
  .imageGallery-31 img:nth-child(24),
  .imageGallery-31 img:nth-child(25),
  .imageGallery-31 img:nth-child(28),
  .imageGallery-31 img:nth-child(29),
  .imageGallery-31 img:nth-child(30) {
    grid-column: span 4;
  }

  .imageGallery-31 img:nth-child(31) {
    grid-column: span 12;
  }

  /* Grid Gallery for 32 images */

  .imageGallery-32 img {
    grid-column: span 6;
  }

  .imageGallery-32 img:nth-child(3),
  .imageGallery-32 img:nth-child(4),
  .imageGallery-32 img:nth-child(5),
  .imageGallery-32 img:nth-child(8),
  .imageGallery-32 img:nth-child(9),
  .imageGallery-32 img:nth-child(10),
  .imageGallery-32 img:nth-child(13),
  .imageGallery-32 img:nth-child(14),
  .imageGallery-32 img:nth-child(15),
  .imageGallery-32 img:nth-child(18),
  .imageGallery-32 img:nth-child(19),
  .imageGallery-32 img:nth-child(20),
  .imageGallery-32 img:nth-child(23),
  .imageGallery-32 img:nth-child(24),
  .imageGallery-32 img:nth-child(25),
  .imageGallery-32 img:nth-child(28),
  .imageGallery-32 img:nth-child(29),
  .imageGallery-32 img:nth-child(30),
  .imageGallery-33 img:nth-child(31),
  .imageGallery-33 img:nth-child(32),
  .imageGallery-33 img:nth-child(33),
  .imageGallery-34 img:nth-child(3),
  .imageGallery-34 img:nth-child(5),
  .imageGallery-34 img:nth-child(6),
  .imageGallery-34 img:nth-child(7),
  .imageGallery-34 img:nth-child(10),
  .imageGallery-34 img:nth-child(11),
  .imageGallery-34 img:nth-child(12),
  .imageGallery-34 img:nth-child(14),
  .imageGallery-34 img:nth-child(17),
  .imageGallery-34 img:nth-child(18),
  .imageGallery-34 img:nth-child(19),
  .imageGallery-34 img:nth-child(20),
  .imageGallery-34 img:nth-child(22),
  .imageGallery-34 img:nth-child(31),
  .imageGallery-34 img:nth-child(34) {
    grid-column: span 4;
  }

  /* Grid Gallery for 33 images */

  .imageGallery-33 img {
    grid-column: span 6;
  }

  /* Grid Gallery for 34 images */
  .imageGallery-34 {
    grid-template-rows: repeat(13, 1fr);
  }

  .imageGallery-34 img {
    grid-column: span 6;
  }

  .imageGallery-34 img:nth-child(24) {
    grid-column: span 2;
  }

  .imageGallery-34 img:nth-child(4),
  .imageGallery-34 img:nth-child(13),
  .imageGallery-34 img:nth-child(21),
  .imageGallery-34 img:nth-child(32),
  .imageGallery-34 img:nth-child(33) {
    grid-column: span 8;
  }
}

/* graphic styles */

/* --------  Amazon Re-Mars Page -------  */
.amazon-remarsPage h1 {
  background: linear-gradient(270deg, #ce2b01 0.26%, #2688bc 98.08%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Devcon Styles */
.devconPage h1 {
  background: linear-gradient(270deg, #37b9e6 0.26%, #e64c65 98.08%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* MEDIA QUERIES FOR LARGE DESKTOP */
@media only screen and (min-width: 1500px) {
  .workPageDetail {
    width: 80vw;
  }
  .workPageDetail p {
    width: 56vw;
    font-size: var(--step-2);
    line-height: 3.2vw;
    max-width: 80vw;
    margin: 0;
  }

  .workPageDetail h3 {
    font-size: var(--step-3);
    margin: 0;
  }

  .back-button,
  .forward-button {
    padding: 20px 24px;
    border: 4px solid #ffae40; /* Border color matches the icon */
    border-radius: 35px;
    font-size: 16px;
  }

  .back-button svg path,
  .forward-button svg path {
    stroke-width: 4;
  }
}