/*******************************************************
 * 1. GLOBAL RESETS
 *******************************************************/
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*******************************************************
 * 2. GLOBAL FONT & COLORS
 *******************************************************/
html,
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #6F6F6F;
}

body.home-page {
  margin: 0;
  overflow: hidden; /* Prevent scrolling */
  background-color: #fafafa; /* Light background */
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

body.white-page {
  background: #fff;
}


/* Hide mobile layout on large screens, show desktop layout */
.mobile-layout {
  display: none;
  position: relative; /* so we can absolutely-position children if needed */
}
.desktop-layout {
  display: block;
}

/* Show mobile layout on small screens, hide desktop */
@media (max-width: 768px) {
  .desktop-layout {
    display: none;
  }
  .mobile-layout {
    display: block;
    min-height: 100vh; /* Ensures the container fills the full viewport height */
  }

  body:not(.home-page) .mobile-social-nav {
    bottom: 20px; /* Adjust this value as needed */
  }
  
  /* Canvas behind everything, if needed */
  #gridCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; 
    width: 100%;
    height: 100%;
  }

  /* Top header row: logo (left) + battery (right) */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 20px;
  }
  .mobile-logo {
    width: 135px; /* Same as desktop */
    height: auto;
  }

  .mobile-logo:hover {
    content: url("/assets/images/SPI_Text_logo_Green.svg");
  }

  .mobile-battery {
    font-size: 1.1rem; /* Bigger text */
  }

  .mobile-center-logo-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    z-index: 1;
  }

  .mobile-center-logo-container .center-logo:hover {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  .mobile-center-logo-container .logo-with-text {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .mobile-center-logo-container .rotating-text {
    font-size: 18px; /* Increased from original size */
    transform: translate(-50%, -50%) scale(0.65); /* Adjusted scale for better text spacing */
    letter-spacing: 3px; /* Added letter spacing for better readability */
    font-weight: 500; /* Slightly bolder text for better visibility */
  }

  .mobile-center-logo-container .center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 175px; /* smaller center logo */
    height: auto;
    transform: translate(-50%, -50%);
  }

/* Ensure the mobile social navigation is in a single row */
.mobile-social-nav {
  position: fixed;
  bottom: 60px; /* Adjust vertical position as needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row; /* Explicitly set row layout */
  align-items: center;
  justify-content: center;
  gap: 20px; /* Space between each circle */
  z-index: 3;
}

/* Ensure the icons in left/right groups are arranged in a row */
.mobile-social-icons {
  display: flex;
  flex-direction: row;
  gap: 10px; /* Adjust spacing between the icons inside the group */
}
/* Social icon circles (Instagram, LinkedIn, GitHub, Mail) */
.mobile-social-icon {
  width: 60px;
  height: 60px;
  border: 2px solid #75cba5;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.mobile-social-icon:hover {
  background-color: #75cba5;
}

.mobile-social-icon-img {
  width: 25px; /* Adjust icon size as needed */
  height: 25px;
  object-fit: contain;
  transition: filter 0.3s;
  filter: invert(1) brightness(0);
}

.mobile-social-icon:hover .mobile-social-icon-img {
  filter: brightness(0) invert(1);
}

/* Existing Hamburger Icon styling remains as is */
.mobile-hamburger {
  width: 60px;
  height: 60px;
  border: 2px solid #75cba5;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  background-color: #fff;
}

.mobile-hamburger .line {
  width: 60%;
  height: 3px;
  background-color: #000;
  margin: 3px 0;
  transition: background-color 0.3s;
  border-radius: 2px; /* Rounded ends */
}

.mobile-hamburger:hover {
  background-color: #75cba5;
}

.mobile-hamburger:hover .line {
  background-color: #fff;
}

/* Ensure the mobile menu appears on hovering over the hamburger (or its container) */
.mobile-social-nav .mobile-hamburger:hover ~ .mobile-menu-list,
.mobile-menu-list:hover {
  display: block;
}

/* Position the mobile menu list relative to the hamburger icon */
.mobile-menu-list {
  display: none;
  position: absolute;
  bottom: 70px;  /* Position above the social nav */
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 10px;
  z-index: 3;
}

.mobile-menu-list li {
  margin-bottom: 10px;
}

.mobile-menu-list li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #fff;
  color: #000;
  border: 2px solid #75cba5;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mobile-menu-list li a:hover {
  background-color: #75cba5;
  color: #fff;
  border-color: #75cba5;
}

.mobile-menu-list li a.selected {
  background-color: #75cba5;
  color: #fff;
}


  /* Footer text fixed at bottom with a gap */
  .mobile-footer-text {
    position: fixed;
    bottom: 20px; /* gap from bottom */
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: #6F6F6F;
  }

  /* Override rotating text on mobile so it stays visible once triggered */
  .mobile-layout .rotating-text {
    opacity: 1 !important;
    visibility: visible !important;
    animation: spin-text 20s linear infinite;
  }

  .page-title{ 
    margin-top: 40px; /* Remove extra spacing */
  }

  .about-page-title{ 
    margin-top: 40px; /* Remove extra spacing */
  }

  @media (max-width: 768px) {
    .page-title {
      margin-left: -10px; /* Shift 10px to the left on smaller screens */
    }
  }

}

  

/*******************************************************
 * 3. CORNERS & LOGOS
 *******************************************************/
/* Base corner styles */
.corner {
  position: absolute;
  font-size: 12px;
  z-index: 10;
  color: #6F6F6F;
  transition: all 0.3s ease;
}

.corner-logo {
  width: clamp(80px, 15vw, 150px);
  height: auto;
  object-fit: contain;
  display: block;
  transition: all 0.3s ease;
}

.corner-logo:hover {
  content: url("/assets/images/SPI_Text_logo_Green.svg");
  transform: scale(1.05);
}

.corner-text {
  font-size: clamp(12px, 1.5vw, 14px);
  color: #6F6F6F;
  white-space: nowrap;
}

/* Corner positions */
.corner-top-left {
  top: clamp(10px, 2vw, 20px);
  left: clamp(10px, 2vw, 20px);
}

.corner-top-right {
  top: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
}

.corner-bottom-left {
  bottom: clamp(10px, 2vw, 20px);
  left: clamp(10px, 2vw, 20px);
}

.corner-bottom-right {
  bottom: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
}

.corner-top-right .corner-text {
  font-size: clamp(14px, 1.8vw, 16px);
}

/* Battery indicator link style */
.solar-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}

.solar-link:hover .corner-text {
  color: #75CBA5;
}



/*******************************************************
 * 4. CENTER LOGO + ROTATING TEXT
 *******************************************************/
/* Container that holds the center logo */
.center-logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: auto; /* Ensure interactions are enabled */
}

/* Wraps the main logo + rotating text */
.logo-with-text {
  position: relative;
  display: inline-block;
}

/* Main logo styles */
.center-logo {
  width: 255px;
  height: 267px;
  transition: transform 0.5s ease, content 0.5s ease;
  cursor: pointer;
  z-index: 10;
}

.center-logo:hover {
  transform: rotate(360deg);
  z-index: 1; /* Push it below anything else on hover if needed */
}

/* Rotating text that arcs around the center logo */
.rotating-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  fill: #75CBA5; /* SVG text color */
  pointer-events: none; /* Don't block pointer events */
  opacity: 0; /* Hidden by default */
  visibility: hidden;
  animation: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  letter-spacing: 2px;
}

/* Show rotating text on hover */
.logo-with-text:hover .rotating-text {
  opacity: 1;
  visibility: visible;
  animation: spin-text 20s linear infinite; 
}

/* Keyframes for the rotating text effect */
@keyframes spin-text {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/*******************************************************
 * 5. QUADRANT BOXES 
 *******************************************************/

 .quad-box {
  position: absolute;
  display: none; /* hidden by default */
  cursor: pointer;
  overflow: hidden;
  background: #eee; /* faint background for debug */
  border-radius: 10px;
  padding: 10px 20px; /* let the box wrap snugly around its text */
  transform: scale(0);
  transition: transform 0.5s ease, background 0.3s ease;
  text-decoration: none; /* remove default link underline */
  z-index: 2;  /* ensure the box is above the connecting line */
}

/* When .show-quads is added to body, animate & show the boxes */
body.show-quads .quad-box {
  display: flex;           /* use flex to center the text */
  align-items: center;
  justify-content: center;
  background: #fff;         /* white background */
  border: 1px solid #75CBA5; /* 1px green border */
  border-radius: 10px;
  transform: scale(1);
}

/* Hover: change background to green and text to white */
body.show-quads .quad-box:hover {
  background: #75CBA5;
}
body.show-quads .quad-box:hover .quad-text {
  color: #fff;
}

/* Text inside each quadrant box */
.quad-text {
  font-size: calc(24px + 1vw);
  font-weight: bold;
  color: black;
  transition: color 0.3s ease;
}

/* For very small screens */
@media (max-width: 480px) {
  .quad-text {
    font-size: 24px;
  }
}

/* Position the boxes in the 4 quadrants around the center */
.quad1 {
  top: 25%; 
  left: 15%;
}
.quad2 {
  top: 20%; 
  right: 15%;
}
.quad3 {
  bottom: 20%; 
  left: 15%;
}
.quad4 {
  bottom: 25%; 
  right: 15%;
}



/*******************************************************
 * 6. LINE TEXT (Used in Quad-Boxes or Services, etc.)
 *******************************************************/
.line-text {
  position: absolute;
  background: #75CBA5;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none; /* hidden by default; can be shown on hover or via JS */
  pointer-events: none; /* avoid flickery hover states */
  z-index: 9999; 
}

/*******************************************************
 * 7. FLOATING NAVIGATION BAR
 *******************************************************/
.floating-nav {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: auto; 
  height: 70px;
  border: 1px solid #75CBA5;
  background-color: #fff;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 36px;
  opacity: 1; 
  pointer-events: auto; 
  transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0 10px;
  height: 100%;
}

/* Nav items + icons */
.nav-item {
  position: relative;
  margin: 0 4px;
}

.nav-link {
  text-decoration: none;
}

.nav-icon-circle {
  width: 40px;
  height: 40px;
  background-color: #ECECEC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

/* Hover magnification effect on icon circle */
.nav-icon-circle:hover {
  transform: scale(1.2);
}

.nav-icon {
  width: 20px; 
  height: 20px;
  object-fit: contain;
  filter: invert(1) brightness(0);
}

.nav-item:hover::before {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 20px); /* 5px above the nav icon */
  left: 50%;
  transform: translateX(-50%);
  background: #75CBA5;
  border: 1px solid #B2E0CC;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-transform: lowercase;
  padding: 4px 8px;
  white-space: nowrap;
  z-index: 21;
}

/*******************************************************
 * 8. NAV ITEM HOVER => GREEN ICON
 *******************************************************/
.nav-item[data-label="Home"]:hover .nav-icon {
  content: url("../images/Nav_Home_Green.svg");
  filter: none;
}
.nav-item[data-label="Studio"]:hover .nav-icon {
  content: url("../images/Nav_Studio_Green.svg");
  filter: none;
}
.nav-item[data-label="Projects"]:hover .nav-icon {
  content: url("../images/Nav_Projects_Green.svg");
  filter: none;
}
.nav-item[data-label="Writings"]:hover .nav-icon {
  content: url("../images/Nav_Writings_Green.svg");
  filter: none;
}
.nav-item[data-label="About Me"]:hover .nav-icon {
  content: url("../images/Nav_About_Green.svg");
  filter: none;
}
.nav-item[data-label="Solarpunk"]:hover .nav-icon {
  content: url("../images/Nav_SP_Green.svg");
  filter: none;
}
.nav-item[data-label="Instagram"]:hover .nav-icon {
  content: url("../images/Nav_IG_Green.svg");
  filter: none;
}
.nav-item[data-label="Linkedin"]:hover .nav-icon {
  content: url("../images/Nav_Linkedin_Green.svg");
  filter: none;
}
.nav-item[data-label="Github"]:hover .nav-icon {
  content: url("../images/Nav_Github_Green.svg");
  filter: none;
}
.nav-item[data-label="Mail"]:hover .nav-icon {
  content: url("../images/Nav_Mail_Green.svg");
  filter: none;
}

/*******************************************************
 * 9. SELECTED NAV ITEM => GREEN ICON, OUTLINE, 4PX DOT
 *******************************************************/
.nav-item.selected .nav-icon-circle {
  outline: 2px solid #75CBA5;
}
.nav-item.selected[data-label="Home"] .nav-icon {
  content: url("../images/Nav_Home_Green.svg");
}
.nav-item.selected[data-label="Studio"] .nav-icon {
  content: url("../images/Nav_Studio_Green.svg");
}
.nav-item.selected[data-label="Projects"] .nav-icon {
  content: url("../images/Nav_Projects_Green.svg");
}
.nav-item.selected[data-label="Writings"] .nav-icon {
  content: url("../images/Nav_Writings_Green.svg");
}
.nav-item.selected[data-label="About Me"] .nav-icon {
  content: url("../images/Nav_About_Green.svg");
}
.nav-item.selected[data-label="Solarpunk"] .nav-icon {
  content: url("../images/Nav_SP_Green.svg");
}
.nav-item.selected[data-label="Instagram"] .nav-icon {
  content: url("../images/Nav_IG_Green.svg");
}
.nav-item.selected[data-label="Mail"] .nav-icon {
  content: url("../images/Nav_Mail_Green.svg");
}
.nav-item.selected::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #75CBA5;
  border-radius: 50%;
}

/*******************************************************
 * 10. DIVIDER LINE BETWEEN GROUPS IN NAV
 *******************************************************/
.nav-divider {
  margin: 0 8px;
  display: flex;
  align-items: center;
  height: 100%;
}

.divider-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(
    to bottom,
    rgba(226,226,226,0) 0%,
    #E2E2E2 50%,
    rgba(226,226,226,0) 100%
  );
}

/*******************************************************
 * 11. PAGE CONTENT (FOR SUBPAGES)
 *******************************************************/
.page-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 800px;
  text-align: center;
}

/*******************************************************
 * 12. RESPONSIVE: MAX-WIDTH 480PX (GLOBAL)
 *******************************************************/
@media (max-width: 480px) {
  .floating-nav {
    width: 90%;
    min-width: 300px;
    height: 50px;
    margin-bottom: 30px;
  }
  .nav-icon-circle {
    width: 30px;
    height: 30px;
  }
  .nav-icon {
    width: 15px;
    height: 15px;
  }
  .divider-line {
    height: 24px;
  }
  .corner-logo {
    width: 100px;
    height: auto;
  }
  .center-logo {
    width: 150px;  /* scale down the logo */
  }
  
  .rotating-text {
    font-size: 14px;             /* smaller text */
    transform: translate(-50%, -50%) scale(0.4); /* bring the text closer */
  }
  .center-logo:hover {
    transform: rotate(360deg);
  }
  #mainCenterLogo {
    width: 155px;
    height: auto;
    cursor: pointer;
    transition: transform 0.5s ease;
  }
  #mainCenterLogo:hover {
    transform: rotate(360deg);
  }

  /* Position the boxes in the 4 quadrants around the center */
.quad1 {
  top: 15%; 
  left: 5%;
}
.quad2 {
  top: 15%; 
  right: 5%;
}
.quad3 {
  bottom: 16%; 
  left: 5%;
}
.quad4 {
  bottom: 16%; 
  right: 5%;
}

}

/*******************************************************
 * 13. ABOUT TOP SECTION (BACKGROUND, PULSAR IMAGE, ETC.)
 *******************************************************/

.about-top-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; 
}

.about-bg {
  position: relative; /* Needed for absolute positioning */
  width: 100%;
  height: 100vh; /* Full screen */
  overflow: hidden;
}

.about-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image covers entire div */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Sends image to the back */
}

.about-title-container {
  position: absolute; /* Places title above image */
  margin-top: 80px; /* Remove extra spacing */
  left: 30px; /* Position from the left edge */
  color: white; /* Ensures text is visible */
  text-align: left; 
  z-index: 2; /* Ensures title stays above everything */
}

/* Bio Section Styles */
.bio-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 8vw;
  margin-top: 40px;  /* Space below "About Me" */
}

.bio-content {
  max-width: 800px;
  margin-top: 120px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  line-height: 1.8;
}

/* Large Headings for PPM Values */
.ppm-value {
  font-size: 28px;
  font-weight: bold;
  color: #75CBA5;
  margin-top: 40px;
  margin-bottom: 10px;
  list-style: none; /* Removes bullets */
}
.ppm-value a {
  text-decoration: none; /* Removes underlines */
  color: inherit; /* Ensures links match the parent text color */
}

/* General Text */
.bio-text {
  font-size: 28px;
  font-weight: 400;
  color: #333;
  margin-bottom: 20px;
}

/* Highlighted Role */
.bio-highlight {
  font-size: 2.5rem;
  font-weight: bold;
  color: #75CBA5;
  margin-top: 40px;
  text-transform: uppercase;
}

/* Bullet Point List */
.bio-list {
  font-size: 1.8rem;
  color: #333;
  padding-left: 20px;
  margin-bottom: 20px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .ppm-value {
      font-size: 3rem;
  }
  
  .bio-text, .bio-list {
      font-size: 1.6rem;
  }

  .bio-highlight {
      font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .ppm-value {
      font-size: 2.5rem;
  }

  .bio-text, .bio-list {
      font-size: 1.4rem;
  }

  .bio-highlight {
      font-size: 1.8rem;
  }
}


.bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    #fafafa 100%
  );
}

/* Bouncing boxes or pointers */
.bounce-container {
  position: absolute; 
  top: 0; left: 0;
  width: 100%; 
  height: 100vh;
  pointer-events: none;
}

.bounce-box {
  position: absolute;
  width: 100px;
  height: 40px;
  background-color: #75CBA5;
  border: 1px solid #B2E0CC;
  border-radius: 8px; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  pointer-events: auto; 
}

.bounce-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Media queries for bounce boxes on smaller screens */
@media (max-width: 768px) {
  .bounce-container {
    position: absolute; 
    height: 100%;
    z-index: 2; /* Ensure it's above other elements */
  }
  
  .bounce-box {
    width: 80px; /* Smaller width */
    height: 35px; /* Smaller height */
    font-size: 10px; /* Smaller font */
  }
}

@media (max-width: 480px) {
  .bounce-box {
    width: 70px; /* Even smaller width */
    height: 30px; /* Even smaller height */
    font-size: 9px; /* Even smaller font */
    padding: 2px; /* Reduce padding */
  }
}

/*******************************************************
 * 14. WRITINGS: LINK LIST
 *******************************************************/
 
.links-container {
  width: 900px;
  max-width: 90%; 
  position: relative; /* Change from absolute to relative */
  margin: 0 auto;
  opacity: 0;
  top: initial; /* Remove absolute positioning */
  transform: none; /* Remove centering transform */
  
}

.link-box {
  border-radius: 5px;
  padding: 10px;
  background-color: transparent;
  margin: 10px 0;
  transition: background-color 0.3s;
}

.link-box a {
  text-decoration: none;
  display: flex;
  align-items: center;
  opacity: 1;  
  transition: opacity 0.5s; 
}

.link-box:hover {
  background-color: #75CBA5; 
}

.link-title {
  font-weight: bold;
  color: black;
  transition: color 0.3s;
}

.link-box:hover .link-title {
  color: black;
}

.link-desc {
  color: rgb(255, 255, 255);
  margin-left: 10px;
  opacity: 1 !important; 
}

.link-title,
.link-desc {
  opacity: 0; 
  transition: opacity 0.5s;
}

.writings-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  
  margin-bottom: 20px; /* Space between title and gallery */
  margin-left: 30px; /* Align with the column-title */
  margin-top: 120px; /* Remove extra spacing */
}




/*******************************************************
 * 15. WRITINGS CONTENT AREA
 *******************************************************/
.writing-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding: 0 40px 60px;
  line-height: 1.6;
  margin-top: 20px; /* Add some space between header and content */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
  box-sizing: border-box;
}

.writing-title {
  font-size: 24px; 
  font-weight: bold; 
  color: black;
}


/*******************************************************
 * 16. STUDIO, LONGPLAYER, ETC.
 *******************************************************/
 

.studio-container {
  width: 90%;
  max-width: 1200px;
  margin: 100px auto;
  margin-top: 40px;
}

.section-title {
  font-size: 30px; 
  font-weight: bold; 
  color: black;
  margin-bottom: 20px; /* Reduced the bottom margin */
}


.column-image {
  position: relative;
  width: 461px; /* Adjust based on your image size */
  height: 394px; /* Match to ensure correct display */
  overflow: hidden;
  margin-right: 50px;
}

.static-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}


/* On hover, hide the static image and show the GIF */
.column-image:hover .static-image {
  display: none;
}


.longplayer-section {
  margin: 2em 0;
  text-align: left;
}

.longplayer-section a {
  color: #75CBA5;
  text-decoration: none;
  font-weight: bold;
}

.longplayer-section p {
  font-size: 18px;
  line-height: 1.6;
  max-width: auto; 
}

.longplayer-section a:hover {
  text-decoration: underline;
}

.content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 40px;
}

.what-on-earth {
  position: relative; 
  margin-bottom: 60px;
}

.what-on-earth p {
  flex: 1;
  font-size: 18px;
  line-height: 1.6;
  flex-direction: column;
  justify-content: flex-start; /* Start the text at the top */
  margin-top: 0; /* Remove any unnecessary margin */
  margin-bottom: 30px;
}

.highlighted-green {
  color: #75CBA5;
  font-weight: bold;
  text-decoration: none;
}

a.highlighted-green {
  text-decoration: none;
  border-bottom: none;
}

a.highlighted-green:hover {
  text-decoration: none;
  opacity: 0.8;
}

.bowl-image {
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.bowl-gallery {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}

.bowl-item {
  flex: 0 1 300px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .bowl-image {
    max-width: 100%;
  }
  
  .bowl-gallery {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .bowl-gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
  }
  
  .bowl-item {
    margin-bottom: 20px;
  }
}


/*******************************************************
 * 17. SERVICES, CLIENTS, ETC.
 *******************************************************/


.services {
  display: flex;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px; 
  margin-bottom: 60px; 
  padding: 0 20px; 
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.service-column {
  border: 1px solid #75CBA5; 
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
  padding: 20px; 
  background-color: #fff; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 8px; 
  text-align: center;
}

.service-column:hover {
  transform: translateY(-5px); 
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); 
}

.service-title {
  color: #000; 
  font-size: 20px; 
  font-weight: bold; 
  margin-bottom: 10px; 
}

.service-box {
  background-color: #75CBA5; 
  border: 1px solid #B2E0CC; 
  color: #fff; 
  font-weight: bold; 
  font-size: 14px; 
  border-radius: 5px; 
  padding: 4px 8px; 
  display: inline-block; 
  text-align: center; 
  transition: background-color 0.3s ease, transform 0.3s ease; 
  white-space: nowrap; 
}

/* Responsive for services grid */
@media (max-width: 1200px) {
  .services {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .services {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .services {
    grid-template-columns: 1fr;
  }
}

/* Clients container */
.clients {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 40px; 
  justify-content: center; 
  align-items: center; 
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px; /* Optional: add max-width to control the overall size */
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 80px;
}

.client-logo {
  width: 100%; 
  max-width: 100px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  image-rendering: -webkit-optimize-contrast;  /* Improves rendering in Chrome/Safari */
  image-rendering: crisp-edges;  /* General improvement for most browsers */
  -ms-interpolation-mode: nearest-neighbor;  /* IE specific */
  backface-visibility: hidden;  /* Prevents some blurring during transitions */
  transform: translateZ(0);  /* Force GPU acceleration */
}


.client-logo:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/*******************************************************
 * 18. CALL TO ACTION
 *******************************************************/


.cta-svg {
  position: fixed;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: auto;
  transition: right 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.cta-svg-2 {
  position: fixed;
  right: -40px;
  top: 55%;
  transform: translateY(-50%);
  width: 80px;
  height: auto;
  transition: right 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.cta-svg:hover {
  right: 0;
}

.cta-svg-2:hover {
  right: 0;
}

.cta-text {
  position: fixed;
  top: 50%;
  right: 90px; /* Position to the left of the SVG */
  transform: translateY(-50%);
  white-space: nowrap;
  background-color: #75CBA5;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #B2E0CC;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
  font-weight: 500;
}

.cta-text-2 {
  position: fixed;
  top: 55%;
  right: 90px; /* Position to the left of the SVG */
  transform: translateY(-50%);
  white-space: nowrap;
  background-color: #ffffff;
  color: #75CBA5;
  padding: 5px 10px;
  border-radius: 5px;
  border: 2px solid #75CBA5;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
  font-weight: 500;
}

.cta-svg:hover + .cta-text {
  opacity: 1;
}

.cta-svg-2:hover + .cta-text-2 {
  opacity: 1;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .cta-svg {
    width: 75px;
    right: -30px;
  }
  
  .cta-text {
    right: 90px;
    font-size: 14px;
  }
  .cta-svg-2 {
    width: 75px;
    right: -30px;
  }
  
  .cta-text-2 {
    right: 90px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .cta-svg {
    width: 60px;
    right: -30px;
  }
  
  .cta-text {
    right: 70px;
    font-size: 12px;
    padding: 4px 8px;
  }
  .cta-svg-2 {
    width: 60px;
    right: -30px;
  }
  
  .cta-text-2 {
    right: 70px;
    font-size: 12px;
    padding: 4px 8px;
  }
}

/*******************************************************
 * 19. WRITING PAGE SPECIFICS
 *******************************************************/
.writing-header {
  display: flex;
  align-items: center;
  margin-top: 140px;
  margin-bottom: 30px;
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-left: 340px; /* Reduce this to move everything left */
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
}

/* Adjust glossary title positioning */
.glossary-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-left: 0; /* Remove any left margin */
  text-align: left;
}

/* Mobile responsiveness */
@media (max-width: 768px) {

  .writing-header {
    margin-left: 10px; /* Even smaller margin on mobile */
    padding: 0;
    margin-top: 100px;
  }

  .back-arrow-container {
    margin-right: 15px; /* Slightly less space on mobile */
  }
  
  .glossary-title {
    font-size: 1.7rem;
    margin-left: -10px; /* Remove any left margin */
  }


/* For Cooper's page specifically */
.cooper-page .writing-header {
  margin-left: 20px; /* Reduce this to move everything left */
}

}

/*******************************************************
 * 20. GLOSSARY PAGE (COOPER, ETC.)
 *******************************************************/
.glossary-header {
  display: flex; 
  align-items: center;
  margin: 20px;
}

.glossary-container {
  display: flex;
  justify-content: space-between;
  margin: 40px auto;
  max-width: 900px;
  margin-bottom: 150px;
}
.glossary-text {
  width: 500px; 
  columns: 2; 
}
.glossary-text p {
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.col1 { color: #000; }
.col2 { color: #75CBA5; }

.glossary-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.glossary-images img {
  border-radius: 15px;
}
.img-small {
  width: 285px; 
  height: 235px; 
  object-fit: cover;
}
.img-large {
  width: 370px;
  height: 370px;
  object-fit: cover;
}


@media (max-width: 768px) {
  .glossary-container {
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
    margin-bottom: 150px;
  }
  .glossary-text {
    columns: 1; 
  }
  .glossary-text p {
    font-size: 16px;
  }
  
  .glossary-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .glossary-images img {
    border-radius: 15px;
  }
  .img-small {
    width: 285px; 
    height: 235px; 
    object-fit: cover;
  }
  .img-large {
    width: 370px;
    height: 370px;
    object-fit: cover;
  }
}


/*******************************************************
 * 21. EARTH PAGE, PDF WRAPPER
 *******************************************************/
.pdf-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100vh;
  padding: 0 20px; 
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

.pdf-header {
  flex-shrink: 0;
}

.pdf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.pdf-item {
  width: 200px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  max-width: 200px;
  flex: 0 0 auto;
}

.pdf-item a {
  display: block;
  line-height: 0;
  font-size: 0;
  max-width: 100%;
  width: 100%;
}

.pdf-cover {
  width: 100%;
  max-height: 250px;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  border: 2px solid #75CBA5;
  transition: transform 0.3s, filter 0.3s;
  display: block;
  max-width: 100%;
}

.pdf-cover:hover {
  transform: scale(1.05);
}

.pdf-title {
  font-size: 14px;
  font-weight: bold;
  color: black;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.pdf-desc {
  font-size: 12px;
  color: #75CBA5;
  margin-top: 5px;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive for PDF layout */
@media (max-width: 768px) {
  .pdf-grid {
    max-width: 400px;
  }
  
  .pdf-wrapper {
    flex-direction: column; 
    gap: 20px; 
    padding: 20px;
    height: auto;
  }
  
  .pdf-header {
    order: -1; 
  }
  
  .pdf-grid {
    padding: 0 15px;
    gap: 25px;
  }
  
  .pdf-item {
    width: 160px;
    max-width: 160px;
    margin-bottom: 15px;
  }
  
  .pdf-cover {
    height: auto;
    max-height: 200px;
  }
}

@media (max-width: 480px) {
  .pdf-grid {
    padding: 0 10px;
    max-width: 300px;
    gap: 15px;
  }
  
  .pdf-item { 
    width: 120px;
    max-width: 120px;
  }
  
  .pdf-cover {
    height: auto;
    max-height: 160px;
  }
  
  .pdf-title {
    font-size: 12px;
    margin-top: 8px;
  }
  
  .pdf-desc {
    font-size: 10px;
  }
}


/*******************************************************
 * 22. GALLERY CONTAINER (PROJECTS, ETC.)
 *******************************************************/
 .title-container {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-left: 30px; /* Align with the column-title */
  margin-top: 120px; /* Remove extra spacing */
}

.title .page-title {
  font-size: 60px;
  font-weight: bold;
  margin: 0;
  text-align: left; /* Align text to the left */
  margin-bottom: 30px;
  color: #75CBA5; 
  margin-bottom: 40px; /* Space below the title */
  z-index: 2; /* Ensures title stays above everything */
}

.title .writing-page-title {
  font-size: 48px;
  font-weight: bold;
  text-align: left; /* Align text to the left */
  margin-left: 303px;
  margin-bottom: 30px;
  color: #75CBA5;
}

/* Adjust gallery to sit properly below */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 150px;
}

.gallery-column {
  flex: 1;
  min-width: 300px;
}
.solo-column .projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.collab-column .projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.column-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
  color: #000000;
}

/* Projects generally */
.project {
  text-align: left;
}
.project-link {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-link:hover {
  transform: scale(1.1); 
}
.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: filter 0.3s ease;
  filter: grayscale(100%);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.project-image-blur {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
  filter: grayscale(100%) blur(3px);
}
.project-link:hover .project-image {
  filter: grayscale(0%);
}
.project-info {
  margin-top: 10px;
}
.main-project-title {
  font-size: 24px;
  font-weight: bold;
  margin-left: 10px;
  color: #000000;
}
.project-description {
  font-size: 18px;
  color: #6F6F6F;
  margin-top: 10px;
  line-height: 1.6;
  max-width: 200px; /* Match the width of project-link */
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word; /* Allow long words to break */
  overflow-wrap: break-word;
}

.project-description-main {
  font-size: 18px;
  color: #6F6F6F;
  margin-top: 10px;
  line-height: 1.6;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word; /* Allow long words to break */
  overflow-wrap: break-word;
}

#voyager-distance {
  transition: all 0.5s ease-in-out;
}

.project-container {
  width: 90%;
  max-width: 1200px;
  margin: 100px auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
}


/*******************************************************
 * 23. CAROUSEL
 *******************************************************/
 
 .carousel-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 80px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.carousel {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  max-height: 80vh; /* Limit maximum height on all devices */
}


.carousel-image {
  width: 100%;
  max-width: 800px;
  height: auto;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  display: none;
  margin: 0 auto;
  object-fit: contain; /* Ensure images maintain aspect ratio */
  object-position: center; /* Center the image */
  border-radius: 10px;
  max-height: 80vh; /* Limit maximum height */
}

.carousel-image.active {
  opacity: 1;
  display: block;
  transform: scale(1);
}

.carousel-arrow {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, border 0.3s ease;
}

.carousel-arrow:hover {
  background-color: #75CBA5;
  border: 1px solid white;
}

.carousel-arrow:hover .back-arrow {
  filter: brightness(0) invert(1);
}



@media (min-width: 1200px) {
  .left-arrow {
    left: 0px;
  }
  
  .right-arrow {
    right: 0px;
  }
}

@media (max-width: 768px) {
  .left-arrow {
    left: -35px;
  }
  
  .right-arrow {
    right: -35px;
  }
}

/*******************************************************
 * 24. MAIN PROJECT PAGE LAYOUT
 *******************************************************/
 
.project-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* Add padding to ensure content doesn't touch edges */
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}


.project-container {
  width: 100%;
  max-width: 1200px;
  margin: 100px auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fixed-image-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 30px 0;
}

.section-title {
  font-size: 30px;
  font-weight: bold;
  color: black;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}

.two-column-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column-text {
  flex: 1;
  font-size: 18px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 30px;
  width: 100%; /* Make text span full width */
  max-width: none; /* Remove max-width constraint */
  margin-left: 0;
  margin-right: 0; /* Remove auto margin on right */
  text-align: left;
}

.project-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.project-top-image {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.project-top-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.text-and-arrow-container {
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  margin: 40px;
  padding: 0 0px;
}

.back-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 35px; 
  height: 35px;
  border-radius: 50%; 
  background-color: transparent; 
  transition: background-color 0.3s ease, border 0.3s ease;
  border: none;
  flex-shrink: 0; /* Prevents squishing */
  margin-right: 20px; /* Space between arrow and title */
  margin-left: 0; /* Remove any left margin */
}

.back-arrow-container:hover {
  background-color: #75CBA5; 
  border: 1px solid white;
}

.back-arrow {
  width: 9px; 
  transition: filter 0.3s ease;
}
.back-arrow-container:hover .back-arrow {
  filter: brightness(0) invert(1); 
}

.back-arrow-project {
  width: 16px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.back-arrow-project:hover {
  content: url("../images/Back_Arrow_Green.svg");
  transform: scale(1.1); 
}

/*******************************************************
 * 25. PROJECT TITLE, AWARD SECTION, ETC.
 *******************************************************/

 .main-content-wrapper {
  max-width: 1200px; /* or any width that works for you */
  margin: 40px auto;    /* centers the wrapper horizontally */
  display: flex;
  flex-direction: row; /* if you want left/right sections side-by-side */
}


.project-title {
  font-size: 36px; /* Large font size for prominence */
  font-weight: bold; /* Bold for emphasis */
  color: #000; /* Black color */
  margin-bottom: 10px; /* Space below the title */
  text-align: left; /* Align text to the left */
}

.project-year {
  font-size: 14px; /* Slightly smaller font size */
  font-weight: 500; /* Medium weight for subtle emphasis */
  color: #75CBA5; /* Grey color for a secondary look */
  margin-bottom: 5px; /* Space below the year */
  text-align: left; /* Align text to the left */
}

.project-credit {
  font-size: 13px; /* Smaller font size for less emphasis */
  font-weight: normal; /* Regular weight for readability */
  color: #B2B2B2; /* Same grey as the year */
  line-height: 1.6; /* Line height for readability */
  text-align: left; /* Align text to the left */
  margin-bottom: 20px; /* Add space below credits for separation */
}

.awards-container {
  display: flex;
  align-items: center; /* This will vertically center the children */
  margin-top: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.award-section {
  border: 1px solid #75CBA5;
  border-radius: 10px;
  padding: 5px 5px;
  margin-right: 15px; /* Space between award and video */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.award-logo {
  margin: 0 10px;
  width: auto;
  height: 40px;
  max-width: 120px;
  display: inline-block;
  vertical-align: middle;
}

.video-section {
  display: flex;
  align-items: center;
  margin-top: 2px;
  gap: 15px;
  flex-wrap: wrap; /* Enable wrapping for small screens */
  padding: 10px 0;
}

.video-icon {
  width: auto;
  height: 55px;
  border: 1px solid #75CBA5;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-icon:hover {
  content: url('../images/video-icon-hover.svg');
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(117, 203, 165, 0.25);
}

.video-link {
  display: inline-block; /* Proper display for links */
  margin-right: 10px; /* Space between multiple video links */
}

/* Responsive styling for video section */
@media (max-width: 768px) {
  .video-section {
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 15px;
  }
  
  .video-icon {
    height: 45px;
  }
}

@media (max-width: 480px) {
  .video-section {
    gap: 8px;
    margin-bottom: 20px;
    padding: 5px 0;
  }
  
  .video-icon {
    height: 40px;
  }
  
  .video-link {
    margin-right: 8px;
  }
}

/* Tags container */
.tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 10px; /* Add spacing between tags */
  margin-top: 20px; /* Add spacing from the description */
  padding: 0; /* Ensure no extra padding */
}

/* Individual tag styling */
.tag {
  display: inline-block;
  background-color: #75CBA5; /* Your chosen color */
  color: white;
  font-size: 12px; /* Adjust font size */
  font-weight: bold;
  padding: 5px 10px; /* Adjust padding for a consistent look */
  border-radius: 8px; /* Rounded corners */
  border: 1px solid #B2E0CC; 
  text-align: center;
  white-space: nowrap; /* Prevent tags from breaking into multiple lines */
}

.fixed-image-1 {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  border: 1px solid #000; 
  border-radius: 10px; /* Add rounded corners */
  padding: 25px; /* Add white gap/padding */
  background-color: white; /* Ensure the padding is white */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
}

.fixed-image-2 {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-bottom: -100px;
}

.fixed-image-3 {
  max-width: 100%; /* Ensure responsiveness */
  width: 800px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-bottom: 60px;
}

.fixed-image-4 {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-bottom: 60px;
  margin-top: 160px;
}

.fixed-image-5 {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-top: 160px;
}

.fixed-image-eye {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-bottom: 60px;
}

.fixed-image-eye2 {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-bottom: 40px;
  margin-top: 40px;
}

.fixed-image-luca {
  max-width: 100%; /* Ensure responsiveness */
  width: 800px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  border: 1px solid #000; 
  border-radius: 10px; /* Add rounded corners */
  background-color: white; /* Ensure the padding is white */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
}

.fixed-image-vo {
  max-width: 100%; /* Ensure responsiveness */
  width: auto; /* Maintain aspect ratio */
  height: 600px; /* Maintain aspect ratio */
  border: 1px solid #000; 
  border-radius: 10px; /* Add rounded corners */
  padding: 25px; /* Add white gap/padding */
  background-color: white; /* Ensure the padding is white */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
}

.fixed-image-solar {
  max-width: 100%; /* Ensure responsiveness */
  width: 600px; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Needed for margin auto to work */
  margin: 0 auto; /* Center the image */
  border-radius: 10px; /* Add rounded corners */
  margin-bottom: -100px;
  margin-bottom: 20px;
  margin-top: 20px;
}


.centered-text-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Full viewport height */
  text-align: center;
  padding: 20px; /* Optional padding for spacing */
  margin-top: 150px;
  margin-bottom: 150px;
}

.centered-text {
  font-size: 48px;
  font-weight: bold; /* Optional for emphasis */
  color: #000000; /* Optional text color */
  line-height: 1.4; /* Adjust line height for readability */
  margin: 0;
}

.centered-green-text {
  font-size: 48px;
  font-weight: bold; /* Optional for emphasis */
  color:  #75CBA5;  /* Optional text color */
  line-height: 1.4; /* Adjust line height for readability */
  margin: 0;
}

.desance-quote {
  margin-top: 250px;
}

.project-images {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  width: 100%;
}

.indv-project-image {
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.indv-project-image:hover {
  transform: scale(1.02);
}


.centered-text-footer-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Full viewport height */
  text-align: center;
  padding: 20px; /* Optional padding for spacing */
  margin-bottom: 250px;
margin-top: 200px;
}

.centered-text-footer {
  font-size: 48px;
  font-weight: bold; /* Optional for emphasis */
  color: #75CBA5; /* Optional text color */
  line-height: 1.4; /* Adjust line height for readability */
  margin: 0;
}



/*******************************************************
 * FEATURE SECTIONS STACKED VERTICALLY
 *******************************************************/
.feature-section-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  margin: 60px 0;
  width: 100%;
}

.feature-section {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  justify-content: space-between; /* Space items evenly */
  gap: 40px; /* Space between the two columns */
  max-width: 900px; /* Limit the width of the section */
  margin-bottom: 100px;
}

.feature-right {
  flex-direction: row-reverse; /* Reverse the direction for right alignment */
  padding-top: 175px;
  margin-bottom: 50px;
}

.feature-right-text-bold {
  font-size: 60px;
  font-weight: bold;
  flex: 1; /* Allow it to take some space */
  text-align: left; /* Right-align the text */
  color: #000;
}

.feature-text-bold {
  font-size: 60px;
  font-weight: bold;
  flex: 1; /* Allow it to take some space */
  text-align: right; /* Right-align the text */
  color: #000;
}

.feature-description {
  font-size: 18px;
  line-height: 1.6;
  flex: 2; /* Allow it to take more space than the bold text */
  text-align: left; /* Left-align the description */
  color: #6F6F6F;
}


.feature-left {
  justify-content: space-between;  /* or flex-start, depending on preference */
  margin-top: 100px;
}

/* 
  For right alignment, if you want the bold text on the right side
  and the paragraph to the left, you can reverse order or adjust layout.
  Alternatively, you might prefer to keep the same order but
  shift text alignment to the right. 
*/
.feature-right {
  justify-content: flex-end;       /* or you can manipulate order below */
  text-align: right;               /* optional if you want text itself right-aligned */
}


/*******************************************************
 * 27. SOLAR HOSTING STYLES
 *******************************************************/
.solar-hosting {
  max-width: 900px; 
  margin: 50px auto; 
  padding: 20px;
  line-height: 1.6; 
  font-size: 16px;
  text-align: left;
}
.solar-hosting h1,
.solar-hosting h2,
.solar-hosting h3 {
  color: #000000; 
  margin-bottom: 15px;
}
.solar-hosting h1 {
  font-size: 30px; 
  font-weight: bold;
}
.solar-hosting h2 {
  font-size: 24px;
  font-weight: bold;
  color: #75CBA5; 
}
.solar-hosting h3 {
  font-size: 20px;
  margin-top: 20px; 
}
.solar-hosting p {
  margin-bottom: 15px; 
  color: #6F6F6F; 
}
.solar-hosting ul {
  margin-left: 20px; 
  padding-left: 10px;
}
.solar-hosting li {
  margin-bottom: 10px; 
}
.solar-hosting a {
  color: #75CBA5; 
  text-decoration: none;
}
.solar-hosting a:hover {
  text-decoration: underline; 
}
.solar-callout {
  background-color: #75CBA5; 
  color: #ffffff; 
  padding: 15px 20px;
  border-radius: 5px; 
  font-weight: bold;
  margin: 20px 0; 
}
.solar-image {
  max-width: 100%; 
  height: auto; 
  margin: 20px 0; 
  border-radius: 8px; 
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.solar-table {
  width: 100%;
  border-collapse: collapse; 
  margin: 20px 0;
  font-size: 16px;
}
.solar-table th,
.solar-table td {
  padding: 10px;
  border: 1px solid #e0e0e0; 
  text-align: left; 
}
.solar-table th {
  background-color: #75CBA5; 
  color: #ffffff; 
}
.solar-table td {
  background-color: #f9f9f9; 
}

/* Responsive for solar-hosting section */
@media (max-width: 768px) {
  .solar-hosting {
    padding: 25px; 
  }
  .solar-hosting h1 {
    font-size: 26px; 
  }
  .solar-hosting h2 {
    font-size: 20px;
  }
  .solar-hosting h3 {
    font-size: 18px;
  }
  .solar-hosting p {
    font-size: 18px; 
  }
}

/*******************************************************
 * 28. SOLARPUNK PAGE SECTIONS (BOOKS, FILMS, LINKS)
 *******************************************************/
.solarpunk-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  padding: 0px;
}

.solarpunk-intro {
  padding-top: 30px;
  margin-bottom: 40px;
}

.solarpunk-intro h1 {
  font-size: 30px;
  color: #000;
  margin-bottom: 15px;
}

.solarpunk-intro p {
  font-size: 18px; /* Increase font size from default */
  line-height: 1.8;
  margin-bottom: 20px;
  color: #333;
}


.solarpunk-intro-2 p {
  background-color: #fafafa;
  padding: 10px;
  color: #333;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 10px;
}

.column {
  flex: 1;
  min-width: 300px;
}

@media (max-width: 768px) {
  .two-column-layout {
    flex-direction: column;
  }
}

/* Left column: Text */
.intro-text {
  flex: 1; /* Takes up available space */
  font-size: 18px;
  line-height: 1.8;
}

.substack-link {
  text-decoration: none;
  color: inherit;
  text-align: left;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  margin-bottom: 20px;
}

/* Right column: RSS link and image */
.intro-right-column {
  flex: 1;
  max-width: 50%;
  text-align: left;
}

/* Title inside the right column */
.substack-title {
  font-size: 2em; /* Adjust size as needed */
  font-weight: bold;
  color: black;
  transition: color 0.3s ease; /* Smooth transition */
}

.substack-title:hover {
  color: #75CBA5;
}

/* Description text */
.substack-description {
  flex: 1; /* Takes up available space */
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

/* Ensure the Substack icon is the right size */
.substack-icon {
  display: block;
  width: 100%;
  object-fit: contain; /* Ensures the image retains proportions */
  margin-top: 20px;
  filter: grayscale(100%); /* Converts image to black and white */
  transition: filter 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

/* Hover effect: Full color and slight zoom */
.substack-icon:hover {
  filter: grayscale(0%); /* Restores color */
  transform: scale(1.05); /* Slightly enlarges image */
}


/* Main layout => left links, right content */
.solarpunk-main-layout {
  display: flex;
  gap: 30px;
}

.solarpunk-links h2 {
  font-size: 30px;
  margin-bottom: 15px;
  color: #000;
}

.solarpunk-link-box {
  border-radius: 5px;
  padding: 10px;
  background-color: transparent;
  margin: 10px 0 0 -20px;
  transition: background-color 0.3s;
  opacity: 1 !important; /* keep it visible at all times */
}

/* Always show link text; no fade-out on hover. */
.solarpunk-link-box a {
  text-decoration: none;
  display: flex;
  align-items: left;
  transition: opacity 0.5s;
}


/* Default text color: black */
.solarpunk-link-desc,
.solarpunk-links-title {
  color: #000;
  margin-left: 10px;
  opacity: 1 !important; /* always visible */
}

/* On hover: green background, white text */
.solarpunk-link-box:hover {
  background-color: #75CBA5;
}
.solarpunk-link-box:hover .solarpunk-link-desc,
.solarpunk-link-box:hover .solarpunk-links-title {
  color: #fff; 
}

.solarpunk-right-column {
  flex: 1;
  flex-direction: column;
}


/*******************************************************
 * 29. POETRY, TOPICS, WORKSHOPS, ETC.
 *******************************************************/
.poem {
  margin-bottom: 40px;
}

.topics-section ul {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

.topics-section ul li {
  margin: 10px 0;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.workshops-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.workshop-column {
  flex: 1 1 300px; 
  max-width: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.workshop-title {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

/*******************************************************
 * 30. TESTIMONIALS
 *******************************************************/
.testimonials-section {
  padding: 40px 20px;
  background-color: #fff; 
  text-align: center;
}

.testimonials-content p {
  font-style: italic;
  font-size: 16px;
  margin: 10px 0;
  color: #555;
}

/*******************************************************
 * 31. DECA
 *******************************************************/

/* Hero Section */
.hero-section {
  background: #75CBA5;
  color: white;
  text-align: center;
  padding: 20px 20px 20px;
  position: relative;
  margin: 20px auto;
  border-radius: 15px;
  max-width: 1000px;
  display: block;
}

.hero-logo {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
}

.hero-logo-large {
  position: absolute;
  right: 10px;
  width: 60px;
  height: 60px;
}

.hero-logo-footer {
  position: absolute;
  bottom: 30%;
  right: 18%;
  width: 150px;
  height: 150px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

/* About Section */
.about-section {
  background-color: #fff;
  padding: 40px 20px;
  position: relative;
}

.about-container, 
.features-container,
.success-stories-container,
.join-container {
  max-width: 1000px;
  margin: 0 auto;
}

.about-section h2,
.features-section h2,
.success-stories-section h2,
.join-section h2 {
  font-size: 36px;
  margin-bottom: 40px;
  color: #000;
  text-align: left;
}

.highlight-text {
  font-size: 22px;
  line-height: 1.8;
  color: #75CBA5;
  font-weight: 500;
  margin-bottom: 30px;
}

.about-content p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.8;
  color: #6F6F6F;
}

/* Features Section */
.features-section {
  padding: 40px 40px;
  position: relative;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.feature-box {
  background-color: #75CBA5;
  border-radius: 15px;
  padding: 30px;
  text-align: left;
  color: white;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-10px);
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

.feature-icon {
  font-size: 36px;
  margin-bottom: 20px;
}

.feature-box h3 {
  font-size: 28px;
  color: white;
  margin-bottom: 15px;
}

.feature-box p {
  font-size: 18px;
  color: white;
  line-height: 1.6;
}

/* Success Stories Section */
.success-stories-section {
  background-color: #fff;
  padding: 80px 20px;
  text-align: center;
}

.success-stories-container p {
  max-width: 1000px;
  margin: 0 auto 40px;
  font-size: 18px;
  line-height: 1.6;
  color: #6F6F6F;
  text-align: left;
}

.success-gallery {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

.gallery-item {
  flex: 0 1 300px;
  margin-bottom: 20px;
}

.gallery-item p {
  margin-top: 15px;
  font-size: 18px;
  color: #75CBA5;
  font-weight: 500;
  text-align: center;
  width: 100%;
  display: block;
}

.gallery-caption {
  margin-top: 15px;
  text-align: center;
  width: 100%;
  display: block;
}

.success-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid #75CBA5;
  transition: transform 0.3s ease;
}

.success-image:hover {
  transform: scale(1.05);
}

/* Join Section */
.join-section {
  background-color: #75CBA5;
  color: white;
  text-align: left;
  padding: 80px 20px 160px;
  position: relative;
}

.join-container p {
  max-width: 800px;
  font-size: 18px;
  line-height: 1.7;
}

.join-container h2 {
  color: white;
}

.join-subtitle {
  font-size: 20px;
  font-weight: 500;
}

.join-button {
  display: inline-block;
  background-color: #fff;
  color: #75CBA5;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  margin-top: 40px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: 2px solid #fff;
}

.join-button:hover {
  background-color: transparent;
  color: #fff;
  transform: translateY(-5px);
}

/* Responsive adjustments for DECA page */
@media (max-width: 768px) {
  .hero-section {
    padding: 40px 20px;
    max-width: 350px;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-logo-large {
    bottom: 15px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
  .about-section h2,
  .features-section h2,
  .success-stories-section h2,
  .join-section h2 {
    font-size: 36px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .success-gallery {
    flex-direction: column;
    align-items: center;
  }
  .success-image {
  height: 350px;
  }
  .gallery-item {
    width: 100%;
  }
  .join-container p {
    font-size: 16px;
  }
  .join-button {
    font-size: 16px;
    padding: 10px 20px;
  }
  .hero-logo-footer {
    position: absolute;
    bottom: 30%;
    right: 18%;
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 24px;
  }
  .about-section h2,
  .features-section h2,
  .success-stories-section h2,
  .join-section h2 {
    font-size: 36px;
  }
  .join-button {
    font-size: 14px;
    padding: 8px 16px;
  }
}

/*******************************************************
 * 32. Talks & Workshops
 *******************************************************/


/* Section Title & Description */
.talks-section {
  text-align: left;
  margin-bottom: 150px;
}

.section-title {
  font-size: 2em;
  font-weight: bold;
  margin-top: 40px;
}

.section-description {
  font-size: 18px;
  color: #555;
  max-width: 1000px;
  margin-left: 40px;
  margin-top: -20px;
  margin-bottom: 50px;
  line-height: 1.6; /* Adjust the spacing between lines */
}

/* Grid Layout */
.workshop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

/* Workshop Items */
.workshop-item {
  overflow: hidden;
  width: 320px;
  text-align: left;
  transition: transform 0.3s ease-in-out;
}

.workshop-item:hover {
  transform: scale(1.02);
}

/* General styling for all workshop images */
.workshop-image {
  display: block;
  width: 100%; /* Ensures it fills the container */
  max-width: 600px; /* Adjust to fit your layout */
  height: auto;
  border-radius: 10px; /* Rounded corners */
  object-fit: cover; /* Ensures proper cropping */
  border: 1px solid #2ECC71; /* Green 1px border */
  outline: none; /* Ensures no outline */
  background: transparent; /* Ensures no background */
}
/* Workshop Title */
.workshop-title {
  font-size: 1.4em;
  font-weight: bold;
  padding-top: 20px;
}

/* Workshop Date */
.workshop-date {
  font-size: 0.9em;
  color: #777;
}

/* Workshop Description */
.workshop-description {
  font-size: 16px;
  color: #444;
  padding-top: 10px;
  line-height: 1.6; /* Adjust the spacing between lines */
}

/* Workshop Tags - Styled to Match .tags */
.workshop-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 10px; /* Add spacing between tags */
  margin-top: 20px; /* Add spacing from the description */
  padding: 0; /* Ensure no extra padding */
}

/* Individual Tag Styling */
.workshop-tags .tag {
  display: inline-block;
  background-color: #75CBA5; /* Match the green tone */
  color: white;
  font-size: 12px; /* Adjust font size */
  font-weight: bold;
  padding: 5px 10px; /* Adjust padding for a consistent look */
  border-radius: 8px; /* Rounded corners */
  border: 1px solid #B2E0CC; /* Light border for contrast */
  text-align: center;
  white-space: nowrap; /* Prevents tags from breaking into multiple lines */
}

/* Remove underline from links inside workshop items */
.workshop-link {
  text-decoration: none !important;
  color: inherit; /* Keeps text color unchanged */
}

/* Ensure no underline on hover */
.workshop-link:hover {
  text-decoration: none !important;
}

/* Prevent inherited underline on child elements */
.workshop-item h3, 
.workshop-item p, 
.workshop-item .workshop-tags {
  text-decoration: none !important;
}

/* Hide mobile navigation on desktop */
@media (min-width: 769px) {
  .mobile-social-nav,
  .mobile-menu-list {
    display: none !important;
  }
}

/* Hide desktop navigation on mobile */
@media (max-width: 768px) {
  .floating-nav {
    display: none !important;
  }
  
  .mobile-social-nav {
    display: flex;
  }
  
  .mobile-menu-list {
    display: none;
  }
}

/* Mobile layout styles for Cooper's Glossary */
.mobile-glossary {
  display: none; /* Hidden by default */
  flex-direction: column;
  width: 100%;
}

.mobile-image-top,
.mobile-image-bottom {
  width: 100%;
  margin: 15px 0;
}

.full-width-image {
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
}

.mobile-glossary-text {
  width: 100%;
  margin: 25px 0;
}

.mobile-glossary-text p {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-glossary-text p .col1 {
  font-weight: 600;
}

/* Responsive behavior for Cooper's Glossary */
@media (max-width: 768px) {
  .cooper-page .glossary-text, 
  .cooper-page .glossary-images {
    display: none; /* Hide desktop layout on mobile */
  }
  
  .cooper-page .mobile-glossary {
    display: flex; /* Show mobile layout */
  }
  
  .cooper-page .glossary-container {
    flex-direction: column;
    padding: 0 20px;
    margin-bottom: 100px;
  }
  
  .cooper-page .full-width-image {
    max-width: 100%;
    height: auto;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .cooper-page .mobile-glossary-text p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  
  .cooper-page .mobile-image-top,
  .cooper-page .mobile-image-bottom {
    margin: 10px 0;
  }
  
  .cooper-page .glossary-container {
    padding: 0 15px;
    margin-bottom: 90px;
  }
}

/* Cooper's Glossary unified layout styles */
.cooper-page .glossary-container {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

/* Image styles for both desktop and mobile */
.cooper-page .mobile-image-top,
.cooper-page .mobile-image-bottom,
.desktop-image-top,
.desktop-image-bottom {
  width: 100%;
  margin: 15px 0;
}

.cooper-page .full-width-image {
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
}

/* Text styles for both desktop and mobile */
.cooper-page .glossary-text,
.cooper-page .mobile-glossary-text {
  width: 100%;
  margin: 25px 0;
  columns: 1; /* Force single column in both views */
}

.cooper-page .glossary-text p,
.cooper-page .mobile-glossary-text p {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* Format col1 and col2 consistently */
.cooper-page .col1 {
  font-weight: 600;
  color: #000;
}

.cooper-page .col2 {
  color: #75CBA5;
}

/* Hide original desktop layout elements */
.cooper-page .glossary-images {
  display: none;
}

/* Display control for desktop vs mobile layouts */
@media (min-width: 769px) {
  /* Desktop view */
  .cooper-page .mobile-glossary {
    display: none !important; /* Hide mobile layout on desktop */
  }
  
  /* Apply the same layout style to desktop view */
  .cooper-page .glossary-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
  }
  
  .cooper-page .glossary-text {
    columns: 1 !important; /* Force single column */
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Mobile view */
  .cooper-page .glossary-text {
    display: none !important; /* Hide desktop text on mobile */
  }
  
  .cooper-page .mobile-glossary {
    display: flex !important; /* Show mobile layout */
  }
  
  .cooper-page .glossary-container {
    padding: 0 20px;
    margin-bottom: 100px;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .cooper-page .mobile-glossary-text p,
  .cooper-page .glossary-text p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  
  .cooper-page .mobile-image-top,
  .cooper-page .mobile-image-bottom,
  .cooper-page .desktop-image-top,
  .cooper-page .desktop-image-bottom {
    margin: 10px 0;
  }
  
  .cooper-page .glossary-container {
    padding: 0 15px;
    margin-bottom: 90px;
  }
}

/* Update project centering for mobile view */
@media (max-width: 768px) {
  .gallery-container {
    justify-content: center;
    padding: 15px;
    margin-bottom: 80px; /* Add spacing between projects and bottom of screen */
    margin-top: -50px; /* Maintain bottom spacing on very small screens */
  }
  
  .gallery-column {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
    text-align: center;
  }
  
  .solo-column .projects,
  .collab-column .projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
  
  .column-title {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
  }
  
  .project {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px; /* Add spacing between projects */
  }
  
  .project-link {
    margin: 0 auto;
    width: 250px;
    height: 250px;
  }
  
  .main-project-title {
    text-align: center;
    margin-left: 0;
  }
  
  .project-description {
    text-align: center;
    max-width: 90%;
    margin: 10px auto 0;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .gallery-container {
    padding: 10px;
    margin-bottom: 80px; /* Maintain bottom spacing on very small screens */
    margin-top: -50px; /* Maintain bottom spacing on very small screens */
  }
  
  .project-link {
    width: 180px;
    height: 180px;
  }
}

/* Mobile responsiveness for project descriptions */
@media (max-width: 768px) {
  .project-description {
    max-width: 250px; /* Match the mobile width of project-link */
  }
}

@media (max-width: 480px) {
  .project-description {
    max-width: 180px; /* Match the very small screen width of project-link */
  }
}

/* Solarpunk Page Enhanced Layout */

/* Fix section spacing with consistent 30px gaps */
.solarpunk-links h2 {
  font-size: 30px;
  margin-bottom: 30px;
  color: #000000; /* Match h3 color to the green used throughout the site */
  position: relative;
  margin-top: 30px; /* Consistent 30px gap between categories */
}

.solarpunk-links h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #75CBA5; /* Match h3 color to the green used throughout the site */
  position: relative;
  margin-top: 30px; /* Consistent 30px gap between categories */
}

/* Add a margin to the first section to separate from intro */
.solarpunk-links h2:first-of-type,
.solarpunk-links h3:first-of-type {
  margin-top: 0;
}

/* Ensure two-column layout is maintained */
.solarpunk-main-layout {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  margin-bottom: 150px;
}

/* Make sure the left column takes appropriate space */
.solarpunk-links {
  flex: 1;
  min-width: 300px;
}

/* Better styles for the intro two-column layout */
.solarpunk-intro .two-column-layout {
  display: flex;
  gap: 40px;
}

.solarpunk-intro .intro-text {
  flex: 1;
}

/* Fix link boxes alignment */
.solarpunk-link-box {
  border-radius: 5px;
  padding: 10px;
  background-color: transparent;
  margin: 10px 0;
  transition: background-color 0.3s;
  opacity: 1 !important;
}

/* Responsive fixes for mobile views */
@media (max-width: 768px) {
  .solarpunk-main-layout {
    flex-direction: column;
    gap: 20px;
  }
  
  .solarpunk-intro .two-column-layout {
    flex-direction: column;
    gap: 30px;
  }
  
  .solarpunk-intro .intro-text {
    width: 100%;
  }
  
  .solarpunk-links,
  .solarpunk-right-column {
    width: 100%;
  }
  
  .solarpunk-links h2,
  .solarpunk-links h3 {
    text-align: left;
    margin-top: 30px;
  }
  
  .solarpunk-link-box {
    max-width: 90%;
  }
  
  .solarpunk-wrapper {
    padding: 0 20px;
  }
}

.code-comment {
  color: #75CBA5; /* Green color */
}

.code-block {
  position: relative;
  background-color: white;
  border: 2px solid #75CBA5; /* Green stroke */
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Courier New', monospace;
  max-width: 100%;
  white-space: pre-wrap; /* Allows text to wrap */
  word-break: break-word; /* Prevents overflow by breaking words when necessary */
}

/* Media queries for responsive code block */
@media (max-width: 768px) {
  .code-block {
    padding: 12px;
    font-size: 13px;
    border-width: 1px;
    margin: 12px 0;
  }
  
  .copy-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .code-block {
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    margin: 10px 0;
  }
  
  .copy-btn {
    top: 6px;
    right: 6px;
    padding: 3px 6px;
    font-size: 10px;
  }
}

.solar-hosting > * {
  margin-bottom: 60px;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #75CBA5;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease;
}

.copy-btn:hover {
  background-color: #5aa88c;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #75CBA5;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease;
  z-index: 10;
}

/* Responsive Project Page Styles */
@media (max-width: 1200px) {
  .project-page-container {
    max-width: 100%;
  }
  
  .main-content-wrapper {
    max-width: 100%;
    padding: 0 20px;
  }
  
  .fixed-image-1, .fixed-image-2 {
    width: 100%;
    max-width: 600px;
  }
  
  .project-images {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  
  .main-content-wrapper {
    max-width: 100%;
    margin-top: -300px;
  }

  .text-and-arrow-container {
    margin: 20px;
    flex-wrap: wrap;
  }
  
  .project-title {
    font-size: 28px;
    margin-top: 10px;
  }
  
  .project-description-main {
    font-size: 16px;
  }
  
  .two-column-layout {
    flex-direction: column;
  }
  
  .column-text {
    font-size: 16px;
  }
  
  .carousel-container {
    width: 100%;
    margin-bottom: 150px;
  }

  .carousel {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  .carousel-arrow {
    width: 30px;
    height: 30px;
    
  }
  
  .fixed-image-1, .fixed-image-2 {
    padding: 15px;
  }


.project-section-2 {
  margin-top: -100px;
}
  
  .centered-text-section {
    margin-top: 150px;
    margin-bottom: 150px;
  }
  
  .centered-green-text, .centered-text {
    font-size: 32px;
  }
  
  .tags {
    flex-wrap: wrap;
    justify-content: left;
  }
  
  .award-section {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .award-logo {
    margin: 10px;
  }

  .desance-quote .centered-green-text {
    margin-top: 150px;
  }  
}

@media (max-width: 480px) {
  .project-top-image {
    height: 70vh;
  }
  
  .text-and-arrow-container {
    margin: 15px;
  }
  
  .project-title {
    font-size: 24px;
  }
  
  .project-year {
    font-size: 12px;
  }
  
  .project-description-main {
    font-size: 14px;
  }
  
  .column-text {
    font-size: 16px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .fixed-image-1, .fixed-image-2 {
    padding: 10px;
  }
  
  .centered-green-text, .centered-text {
    font-size: 24px;
  }
  
  .project-images {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .carousel-arrow {
    width: 30px;
    height: 30px;
  }
  
  .centered-text-section {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  
  .back-arrow-container {
    width: 30px;
    height: 30px;
  }
}

/* Specific styling for the Fomentum Solis text in project pages */
.project-page-container .corner-top-right .corner-text {
  color: #fff; 
}

/* Hover state */
.project-page-container .corner-top-right .solar-link:hover .corner-text {
  color: #75CBA5; /* Darker green for hover */
}

/* Make Fomentum Solis text black specifically for 3rd-eye.html page */
body[class*="white-page"] .project-page-container[id="third-eye"] .corner-top-right .corner-text {
  color: #000;
}

/* Add green hover state for the Fomentum Solis text on 3rd-eye.html page */
body[class*="white-page"] .project-page-container[id="third-eye"] .corner-top-right .solar-link:hover .corner-text {
  color: #75CBA5;
}

@media (max-width: 768px) {
  .title .page-title {
    margin-left: -15px; /* Shift 10px to the left on smaller screens */
  }
}

/* Medium-sized screens */
@media (max-width: 768px) {
  .corner-top-left, .corner-bottom-left {
    left: 20px;
  }
  
  .corner-top-right, .corner-bottom-right {
    right: 20px;
  }
  
  .corner-top-left, .corner-top-right {
    top: 20px;
  }
  .corner-logo {
    width: 135px;
  }
  .corner-text {
    font-size: 14px;
  }
  /* Nudge top-right text slightly down */
  .corner-top-right .corner-text {
    position: relative;
    top: 4px;
  }
}

/* Smaller screens */
@media (max-width: 480px) {
  .corner-top-right .corner-text  {
    font-size: 14px;
  }
  
  .corner-logo {
    width: 135px;
    height: auto;
  }
  
  .corner-top-left, .corner-bottom-left {
    left: 20px;
  }
  
  .corner-top-right, .corner-bottom-right {
    right: 20px;
  }

  .corner-top-left, .corner-top-right {
    top: 20px;
  }
  /* Nudge top-right text slightly down */
  .corner-top-right .corner-text {
    position: relative;
    top: 4px;
  }
}

.solar-hosting ol {
  padding-left: 40px; /* Default padding for desktop */
  margin-bottom: 25px;
}

.solar-hosting ol li {
  margin-bottom: 10px;
  padding-left: 10px; /* Add padding between the number and the text */
  position: relative;
}

/* Media queries for responsive ol padding */
@media (max-width: 768px) {
  .solar-hosting ol {
    padding-left: 30px; /* Reduced padding for tablets but still enough space */
  }
  
  .solar-hosting ol li {
    padding-left: 8px;
  }
}

@media (max-width: 480px) {
  .solar-hosting ol {
    padding-left: 25px; /* Minimum padding for mobile to keep numbers visible */
  }
  
  .solar-hosting ol li {
    padding-left: 5px;
  }
}

/* Testimonial Section */
.testimonial-section {
  padding: 60px 0;
}

.testimonial-container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.testimonial-container h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: left;
  color: #000000;
}

/* Basic layout for testimonials */
.testimonial-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 30px;
}

/* Image column styles */
.testimonial-image-column {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* Content column styles */
.testimonial-content-column {
  flex: 1;
}

/* Quote styles */
.testimonial-quote {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid #75cba5;
  position: relative;
}

.testimonial-quote::before {
  content: "\201C"; /* Unicode for left double quotation mark */
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 60px;
  color: rgba(117, 203, 165, 0.2);
  font-family: Helvetica;
  line-height: 1;
}

.testimonial-quote::after {
  content: "\201D"; /* Unicode for right double quotation mark */
  position: absolute;
  bottom: 0;
  right: 10px;
  font-size: 60px;
  color: rgba(117, 203, 165, 0.2);
  font-family: Helvetica;
  line-height: 1;
}

.testimonial-quote p {
  margin-bottom: 18px;
  line-height: 1.6;
  color: #333;
}

.testimonial-quote p:last-child {
  margin-bottom: 0;
}

/* Author styles */
.testimonial-author {
  text-align: center;
  width: 100%;
}

.author-name {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
  color: #75CBA5;
}

.author-desc {
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}

.school-logo {
  width: 120px;
  height: auto;
  margin-top: 10px;
}

/* Right-aligned testimonial styles */
.testimonial-right {
  flex-direction: row-reverse;
}

.testimonial-right .testimonial-content-column {
  text-align: right;
}

.testimonial-right .testimonial-quote::before {
  left: auto;
  right: 10px;
}

.testimonial-right .testimonial-quote::after {
  right: auto;
  left: 10px;
}

.testimonial-right .testimonial-author {
  text-align: right;
}

/* Responsive styles */
@media (max-width: 968px) {
  .testimonial-layout {
    gap: 30px;
  }
  
  .testimonial-image-column {
    flex: 0 0 250px;
  }
}

@media (max-width: 768px) {
  .testimonial-layout,
  .testimonial-right {
    flex-direction: column;
  }
  
  .testimonial-image-column,
  .testimonial-right .testimonial-image-column {
    margin-bottom: 30px;
    width: 100%;
    max-width: 300px;
    align-items: center;
  }
  
  .testimonial-content-column,
  .testimonial-right .testimonial-content-column,
  .testimonial-author,
  .testimonial-right .testimonial-author {
    text-align: left;
  }
  
  .testimonial-right .testimonial-quote::before {
    left: 10px;
    right: auto;
  }
  
  .testimonial-right .testimonial-quote::after {
    right: 10px;
    left: auto;
  }
  
  .testimonial-quote {
    padding: 25px;
  }
  
  .testimonial-container h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }
  
  .testimonial-layout {
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .testimonial-section {
    padding: 40px 0;
  }
  
  .testimonial-quote {
    padding: 20px;
  }
  
  .testimonial-quote::before {
    font-size: 40px;
  }
  
  .testimonial-quote::after {
    font-size: 40px;
  }
  
  .author-name {
    font-size: 16px;
  }
  
  .author-desc {
    font-size: 12px;
  }
  
  .school-logo {
    width: 100px;
  }
}

.business-card-container {
  position: absolute;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  left: 185px; /* Position to the right of the corner logo which is ~150px + 30px spacing */
  top: 30px; /* Match top position with corner-top-left */
  z-index: 100;
  cursor: pointer;
}

/* The closed business card icon */
.business-card-container .icon {
  width: 30px;
  height: 30px;
  background: url('../images/business_card_closed.png') no-repeat center/contain;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 5px;
  pointer-events: none; /* Make sure parent catches all clicks */
}

/* The popup card (open business card) */
.business-card-container .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: auto;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1002; /* Higher than overlay */
  cursor: pointer;
  background-color: transparent;
}

.business-card-container .popup img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
  position: relative;
  z-index: 1003; /* Even higher to ensure visibility */
  object-fit: contain;
}

/* Mobile Business Card Styles */
.mobile-business-card-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 15px;
  z-index: 100;
  cursor: pointer;
}

.mobile-business-card-container .icon {
  width: 30px;
  height: 30px;
  background: url('../images/business_card_closed.png') no-repeat center/contain;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 1px;
  pointer-events: none; /* Make sure parent catches all clicks */
}

.business-card-container .icon:hover {
  transform: scale(1.1);
}

/* The popup card (open business card) */
.business-card-container .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1002; /* Increased to be higher than overlay */
  cursor: pointer;
  background-color: transparent;
}

.business-card-container .popup img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
  position: relative;
  z-index: 1003; /* Even higher to ensure visibility */
}

/* Overlay background */
.business-card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 1000; /* Lower than popup */
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Initially can't be clicked */
}

.overlay-active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: auto !important;
}

/* Separate class for popup active state */
.popup-active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: auto !important;
  z-index: 1050 !important; /* Extremely high z-index */
}

/* The popup card (open business card) */
.business-card-container .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1050; /* Much higher than overlay */
  cursor: pointer;
  pointer-events: auto; /* Always clickable */
  background: none;
}

.business-card-container .popup img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
  position: relative;
}

.mobile-business-card-container .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  width: auto;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1050; /* Much higher than overlay */
  cursor: pointer;
  pointer-events: auto; /* Always clickable */
  background: none;
}

.mobile-business-card-container .popup img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
  position: relative;
  object-fit: contain;
}

/* Responsive adjustments for business card */
@media (max-width: 768px) {
  .business-card-container {
    left: 165px;
    top: 20px;
  }
  
  .business-card-container .icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .business-card-container {
    left: 165px;
    top: 15px;
  }
  
  .business-card-container .icon {
    width: 25px;
    height: 25px;
  }
}

/* Mobile Business Card Styles */
.mobile-business-card-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 15px;
  z-index: 100;
  cursor: pointer;
}

.mobile-business-card-container .icon {
  width: 30px;
  height: 30px;
  background: url('../images/business_card_closed.png') no-repeat center/contain;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 5px;
  pointer-events: none; /* Make sure parent catches all clicks */
}

.mobile-business-card-container .icon:hover {
  transform: scale(1.1);
}

.mobile-business-card-container .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1002; /* Higher than overlay */
  cursor: pointer;
  background-color: transparent;
}

.mobile-business-card-container .popup img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
  position: relative;
  z-index: 1003; /* Even higher to ensure visibility */
}

@media (max-width: 480px) {
  .mobile-business-card-container {
    margin: 0 10px;
  }
  
  .mobile-business-card-container .icon {
    width: 25px;
    height: 25px;
  }
}

body.solarpunk .corner-top-right .corner-text {
  position: relative;
  top: 4px;
  font-size: 14px;
}

.mobile-battery-container {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.mobile-corner-text {
  font-size: 14px;
  color: #6F6F6F;
  margin-right: 10px;
  white-space: nowrap;
  position: relative;
  top: 4px;
}

/* Add matching positioning for white-page class */
body.white-page .corner-top-right .corner-text {
  position: relative;
}

/* Email link fix - ensure clickability */
a[href^="mailto:"] {
  position: relative;
  z-index: 999; /* Ensure links are above other elements */
  pointer-events: auto !important; /* Force pointer events to be enabled */
  cursor: pointer !important; /* Ensure cursor shows as pointer */
}

/* Mobile CTA Link - Ensures the Resume link is visible on mobile */
.mobile-cta-link {
  position: fixed;
  bottom: 120px; /* Position above the mobile nav */
  right: 10px;
  z-index: 1000; /* Increased z-index to be higher than other elements */
  display: none; /* Hidden by default, shown only on mobile */
}

/* Ensure visibility on mobile devices */
@media (max-width: 768px) {
  .mobile-cta-link {
    display: block !important; /* Use !important to override any conflicting styles */
    right: 0; /* Align with edge of screen */
    width: 60px; /* Control width of the clickable area */
  }
  
  /* Make CTA elements more visible */
  .mobile-cta-link .cta-svg {
    opacity: 1;
    right: 0;
  }
  
  .mobile-cta-link .cta-text {
    opacity: 1;
    right: 65px;
  }
}

/* ====== Charging Page Styles ====== */
.charging-page .content-container,
.charging-page .mobile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.charging-page .title-container {
  margin-top: 8vh;
}

.charging-page .title .page-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #75CBA5;
}

.solar-hosting {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.solar-hosting h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.solar-hosting p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  color: #444;
  max-width: 650px;
  line-height: 1.6em;
}

.solar-hosting .icon {
  margin: 2rem 0;
  text-align: center;
}

.solar-hosting .icon img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: block;
  animation: pulse 2s infinite ease-in-out;
}

.recharge-message {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1rem;
  color: #75CBA5;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile adjustments for charging page */
@media (max-width: 768px) {
  .charging-page .mobile-content {
    padding: 1.5rem;
    margin-top: 30px;
  }
  
  .charging-page .title .page-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .solar-hosting h2 {
    font-size: 1.5rem;
  }
  
  .solar-hosting p {
    font-size: 1rem;
  }
  
  .solar-hosting .icon img {
    width: 100px;
    height: 100px;
  }
  
  .recharge-message {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .charging-page .title .page-title {
    font-size: 1.8rem;
  }
  
  .solar-hosting h2 {
    font-size: 1.3rem;
  }
  
  .solar-hosting p {
    font-size: 0.95rem;
  }
  
  .solar-hosting .icon img {
    width: 80px;
    height: 80px;
  }
}

.solar-base {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.solar-animation-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.solar-base {
  width: 100%;
  height: 100%;
}


@keyframes breathe {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Adjust dimensions for different screen sizes */
@media (max-width: 768px) {
  .solar-icon-container {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 480px) {
  .solar-icon-container {
    width: 80px;
    height: 80px;
  }
}

/* Specific fix for studio.html right-aligned testimonial */
.testimonial-section:nth-of-type(2) .testimonial-layout {
  flex-direction: row-reverse;
}

.testimonial-section:nth-of-type(2) .testimonial-content-column {
  text-align: right;
}

.testimonial-section:nth-of-type(2) .testimonial-quote::before {
  left: auto;
  right: 10px;
}

.testimonial-section:nth-of-type(2) .testimonial-quote::after {
  right: auto;
  left: 10px;
}

.testimonial-section:nth-of-type(2) .testimonial-author {
  text-align: right;
}

@media (max-width: 768px) {
  .testimonial-section:nth-of-type(2) .testimonial-layout {
    flex-direction: column;
  }
  
  .testimonial-section:nth-of-type(2) .testimonial-content-column,
  .testimonial-section:nth-of-type(2) .testimonial-author {
    text-align: left;
  }
  
  .testimonial-section:nth-of-type(2) .testimonial-quote::before {
    left: 10px;
    right: auto;
  }
  
  .testimonial-section:nth-of-type(2) .testimonial-quote::after {
    right: 10px;
    left: auto;
  }
}