/* COLORS */
/* set any colors you plan to use throughout the buildout here */
/* then you can adjust the color value easily */
:root {

    body {
        background-color: #ffffff;
    }

}

header {
    /* add header image below */
    /* can use a file path before the photo is uploaded to ceo */
    background: 
    /* linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%),  */
    url('../images/Furman2025-09-11CL.JPG');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* SET ANY MORE STYLES YOU WANT HERE: */
.arrow-container {
  position: fixed;
  bottom: 190px; /* Adjust the bottom position as needed */
  left: 50%;
  transform: translateX(-50%);
}

.arrow-container img {
  max-width: 90%; /* Ensure the arrow's width is responsive */
  height: auto; /* Maintain the aspect ratio */
}

.box-container {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-around; */
  
  display: grid;
  grid-template-columns: repeat(3, min-content);
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.dropdown {
  display: none; /* Initially hide the dropdown */
  position: absolute; /* Position the dropdown */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1;
}

.footer-logo {
  max-width: 20%; /* Ensure the image doesn't exceed its container */
  height: auto; /* Maintain the image's aspect ratio */
  display: block; /* Remove extra space below the image */
  margin: 0 auto; /* Center the image horizontally */
}

/* Optional: Add some space around the image */
.container {
  padding-top: 0rem !important;
  padding-bottom: 8px;
}


li.toggle {
  display: none;
}

@media (min-width: 769px) {
  .item.dropdown {
    opacity: 0;
    pointer-events: none;
  }
}

.toggle .button {
  display: none;
}


.word-cloud {
  text-align: center;
  padding: 3rem 2rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.word-cloud-title {
  font-size: 2rem;
  font-weight: bold;
  color: #CFAE70;
  margin-bottom: 1.5rem;
}

#wordCloudCanvas {
  display: block;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .word-cloud {
    padding: 2rem 1rem 1rem;
  }
}

footer {
  margin-top: 0px;
}

footer .col-md-3 {
  margin-bottom: 20px; /* Adjust the value for the desired space */
}


@media (max-width: 1000px) {
  header {
    background: url('https://iili.io/JAQZh2s.jpg alt="Four students lounge on Alumni Lawn on a sunny day with their backs to the camera. One student in the background sits with a laptop on a blue chair."');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

.box-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #D6B464;
  border: 2px solid black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #946E24;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box h5 {
  font-size: 1.25rem;
  text-transform: uppercase;
  /* text-transform: lowercase; */
}

.box:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.categories-section {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.categories-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #CFAE70;
}

.photo-gallery {
  width: 100%;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  overflow: hidden;
  background-color: #D6B464;
  /* padding: 2rem 0; */
  padding-top: 3rem;
  padding-bottom: 0rem;
}

.gallery-track {
  display: flex;
  animation: scroll 50s linear infinite;
  width: max-content;
}

.gallery-track img {
  height: 300px;
  width: 400px;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-right: 1rem;
}

.gallery-track img:last-child {
  margin-right: 0;
}

.gallery-track img:hover {
  transform: scale(1.05);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* transform: translateX(calc(-200% / 3)); */
    transform: translateX(-50%);
  }
}

/* ADD TO PAUSE GALLERY SCROLL ON HOVER (a bit jarring) */
/* .gallery-track:hover {
  animation-play-state: paused;
} */

body {
  position: relative;
  /* background: linear-gradient(135deg, #000000 0%, #D6B464 100%); */
  background-color: #E0D5C0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

main {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
}

a {
  color: #D6B464;
}

.photo-gallery {
  background-color: transparent;
}

.survey-section {
  width: 100%;
  /* padding: 4rem 4rem; */
  padding-top: 0rem;
  padding-left: 6rem;
  padding-right: 6rem;
  padding-bottom: 0rem;
  background: transparent;
  overflow: hidden;
}

.survey-content {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
}


.survey-text {
  flex: 2;
  padding: 0 3rem;
}

.survey-stats {
  flex: 1;
}

.survey-text h3 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: #CFAE70;
  font-weight: bold;
  line-height: 1.2;
}

.survey-text p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: #1C1C1C;
}

.survey-stats ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.survey-stats li {
  margin-top: 0.5rem;
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
  color: #CFAE70;
  font-weight: 300;
  white-space: nowrap;
}

@media (max-width: 768px) {
  header {
    justify-content: center;
  }
  
  nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  /* Center the ABOUT link */
  header nav ul li.item {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  header nav ul li.toggle {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .item.dropdown {
    display: none;
    position: absolute; 
    top: 3.5rem;    /* below header */
    right: 1rem;    /* align to the right edge of screen */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .item.dropdown.show {
    display: block;  /* Now it’s visible when .show is toggled */
  }

  /* Make the dropdown links display in a vertical stack */
  .item.dropdown .dropdown-content a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #000;
  }

  li.toggle {
    display: block;
    text-align: center;
  }

  #surveyLink h8 {
      font-size: 1.2rem;
      white-space: nowrap;
  }

  .survey-text h3 {
      font-size: 2.5rem;
      margin-bottom: 0rem;
  }

  .survey-section {
    padding-left: 0px;
    padding-right: 0px;
  }

  .survey-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
  }

  .survey-stats {
      padding: 1rem;
  }

  .toggle {
    display: block;
  }
}


/* For mobile devices */
@media (max-width: 480px) {
  header nav ul {
      flex-direction: column;
      align-items: flex-start;
      padding: 5px;
  }

  .item.dropdown {
    display: none;
  }

  /* When .item.dropdown has "show," make it appear */
  .item.dropdown.show {
    display: block;
  }

  .item.dropdown .dropdown-content {
    display: block; 
    background-color: #fff; 
    border: 1px solid #ccc;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
  }

  .item.dropdown .dropdown-content a {
    display: block;
    padding: 0.5rem;
    color: #333;
    text-decoration: none;
  }

  .item.dropdown .dropdown-content a:hover {
    background-color: #f1f1f1;
  }

  #surveyLink h8 {
      font-size: 1rem;
      text-align: center;
      margin: 5px 0;
      white-space: normal;
  }

  /* .fas .fa-bars .fa-lg {
    aria-hidden: false;
  } */

  .toggle {
      display: block;
      cursor: pointer;
      margin-right: 1rem;
  }

  .toggle button {
    border: none;
    background: none;
    cursor: pointer;
    color: #000; 
  }

  .dropdown-content {
      display: none;
      flex-direction: column;
      width: 100%;
  }

  .toggle.active + .dropdown-content {
      display: flex;
  }

  .survey-text h3 {
      font-size: 2rem;
      text-align: center;
  }

  .survey-text p {
      font-size: 1.5rem;
      padding: 0 1rem;
  }

  .survey-stats {
      text-align: center;
      padding: 1rem 0;
  }
}