.img-style {
  display: block;
  max-width: 600px;
  height: auto;
  width: 90%;
  object-fit: cover;
  padding-bottom: 33px;
}
#intro {
  position: relative;
  overflow: hidden;
  background-image: url("/images/photo-backgrounds/pexels-tracehudson-2724664.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* Fallback for browsers without smooth scroll */
}

/* When smooth scroll is active, background-attachment will be overridden by JS */
.smooth-scroll-active #intro {
  background-attachment: scroll;
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* below text, above background */
  pointer-events: none; /* lets you click links through particles */
}
.actions {
  margin-top: 35px;
}
#intro .inner {
  position: relative;
  z-index: 2; /* ensures content sits above particles */
  text-align: center;
  color: white; /* or whatever fits */
}

#intro p {
  font-size: 1.25em;
}
.title {
  /* display: flex; */
  gap: 1px;
}
.scroll-down {
  display: flex;
  flex-direction: column;
  padding-top: 10%;
}
.scroll-down > h2,
p {
  margin: 0;
}
.scroll-down > a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-top: 10px;
  gap: 2px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}
.scroll-down > a:hover {
  color: rgb(213, 80, 213);
}
.scroll-down > a > img {
  width: 20px;
}

@media screen and (max-width: 980px) {

  #intro p br {
    display: none;
  }
}

@media screen and (max-width: 736px) {

  #intro p {
    font-size: 1em;
  }
}

@media screen and (max-width: 1280px) {
  #intro {
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
  }
}

/* Additional mobile optimizations */
@media screen and (max-width: 768px) {
  #intro {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}