/* Define the custom font */
@font-face {
    font-family: 'ASITP';
    src: url('../fonts/AShellinthePit-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Italic */
@font-face {
    font-family: 'ASITP';
    src: url('../fonts/AShellinthePit-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'ASITP';
    src: url('../fonts/AShellinthePit-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.content {
    z-index: 1;
    position: relative;
    background: linear-gradient(to bottom, #a8f0fe 26%, #00c3af 10%);
    min-height: 100vh;

}

@media only screen and (min-width: 760px) {
    .content {
    background: linear-gradient(to bottom, #a8f0fe 30%, #00c3af 10%);
    min-height: 100vh;

}
}

html, body {
    font-family: sans-serif; /* Use a fallback for general body text */
    background-color: #a8f0fe;
    margin: 0;
    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
	font-family: 'ASITP', sans-serif; /* Apply the custom font here */
}

.header {
    background-color: #a8f0fe;
    width: 100%;
    height: 250px;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: -4vh;
    /* border-bottom: 4px solid black; */
}

.headerContent {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 211px;
}

.header h1 {
    margin: 0;
    font-size: 100px;
    color: black;
    font-family: 'ASITP', sans-serif; /* Apply the custom font here */
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 0 40px;
}

@media only screen and (min-width: 760px) {
.header h1 {
    margin: 0;
    font-size: 100px;
    color: black;
    font-family: 'ASITP', sans-serif; /* Apply the custom font here */
    margin-top: -20px;
    margin-bottom: 20px;
    padding: 0 60px;
}
}

.header nav {
    margin-top: -13px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap; /* CRITICAL: Allows links to drop to the next line */
    justify-content: center; /* Centers the links on all screen sizes */
    gap: 1.5em clamp(10px, 4vw, 57px); /* Adds vertical (1.5em) and horizontal (1em) space between items */
    width: 100%; /* Ensure the flex container uses all available space */
}

.header nav ul li {
    margin: 0; /* Minimal vertical margin. Horizontal spacing is now handled by the 'gap' property above. */
    text-align: center;
}

.header nav ul li a {
    color: black;
    text-decoration: none;
	font-size: clamp(25px, 2.8vw, 40px); /* The new fluid font size */
    padding: 5px 0; /* Add a little vertical padding for click space */
}

/* Hide the toggle button by default (Desktop/Large Screens) */
.menu-toggle {
    display: none; 
}

.soundstuff-section {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
	font-size: 30px;
}

h1, h2 {
    color: #333;
}

p {
    color: black;
}

.projectsRowContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Optional, for responsiveness */
  gap: 30px 20px;
  margin: 80px 0;
  position: relative;
  padding-bottom: 0px;
  background: #a8f0fe;
}

/* 1. First Header Container - (1st child in HTML) - Needs to be FIRST on mobile. */
 .projectsRowContainer > .projectsHeaderContainer:nth-child(1) {
  order: 1; 
} 

/* 2. Second Header Container - (3rd child in HTML) - Needs to be SECOND on mobile. */
/* We target the 3rd child of the parent container. */
 .projectsRowContainer > .projectsHeaderContainer:nth-child(2) {
  order: 2; 
} 

/* 3. Project Text Container - (2nd child in HTML) - Needs to be LAST on mobile. */
.projectsRowContainer > .projectTextContainer {
  order: 3; 
} 


@media only screen and (min-width: 760px) {
  .projectsRowContainer {
    display: flex;
    flex-direction: row; /* Overrides the mobile column stacking */
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: nowrap; /* Overrides the mobile flex-wrap */
    margin: 0px 0;
    position: relative;
    padding-bottom: 0;
    background: transparent;
  }
  
  /* Crucial Step: Disable the mobile reordering on desktop.
     When screen width is >= 760px, these rules are applied, resetting 
     all items back to their default visual order (source order).
     
     Note: Since all flex items default to order: 0, you could simply 
     apply order: 0 to all three children in this block, but explicitly 
     setting the defaults for clarity is good practice.
  */
  /* 1. First Header Container - (1st child in HTML) - Needs to be FIRST on mobile. */
 .projectsRowContainer > .projectsHeaderContainer:nth-child(2) {
  order: 2; 
} 

/* 2. Second Header Container - (3rd child in HTML) - Needs to be SECOND on mobile. */
/* We target the 3rd child of the parent container. */
 .projectsRowContainer > .projectsHeaderContainer:nth-child(3) {
  order: 3; 
} 

/* 3. Project Text Container - (2nd child in HTML) - Needs to be LAST on mobile. */
.projectsRowContainer > .projectTextContainer {
  order: 1; 
} 
}

.projectsHeaderContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 0%;
  z-index: 9999;
  width: auto;
  padding: 0px;
}

@media only screen and (min-width: 760px) {
    .projectsHeaderContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  margin-bottom: 5%;
  z-index: 9999;
  width: 100%;
  padding: 80px;
}
}

.projectsHeaderContainer img {
    max-width: 2000px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
}

.Servicebubble {
    width: 200px; /* Initial size of the bubbles */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth animation for size and opacity */
    z-index: 999;
    pointer-events: auto;
}

/* Individual servicecontrol */
.bubble1 {
  width: 100px;
  margin-left: 0px;
  transform: translateY(-10px);
}

@media only screen and (min-width: 760px) {
  .bubble1 {
  width: 200px;
  margin-left: 20px;
  transform: translateY(-10px);
}
}

@media only screen and (max-width: 400px) {
  .bubble1 {
  width: 80px;
  margin-left: 0px;
  transform: translateY(-10px);
}
}

.bubble2 {
  width: 150px;
  margin-right: 0px;
  transform: translateY(0px);
}

@media only screen and (min-width: 760px) {
  .bubble2 {
  width: 300px;
  margin-right: 450px;
  transform: translateY(0px);
}
}

@media only screen and (max-width: 400px) {
  .bubble2 {
  width: 120px;
  margin-right: 0px;
  transform: translateY(0px);
}
}

.bubble3 {
  width: 100px;
  margin-left: 0px;
  transform: translateY(15px);
}

@media only screen and (min-width: 760px) {
  .bubble3 {
  width: 250px;
  transform: translateY(15px);
}
}

@media only screen and (max-width: 400px) {
  .bubble3 {
  width: 80px;
  margin-left: 0px;
  transform: translateY(15px);
}
}

.bubble4 {
  width: 100px;
  margin-left: 0px;
  transform: translateY(-5px);
}

@media only screen and (min-width: 760px) {
  .bubble4 {
  width: 250px;
  margin-left: -10px;
  transform: translateY(-5px);
}
}

@media only screen and (max-width: 400px) {
  .bubble4 {
  width: 80px;
  margin-left: 0px;
  transform: translateY(-5px);
}
}

.bubble5 {
  width: 100px;
  margin-left: 0px;
  transform: translateY(10px);
}

@media only screen and (min-width: 760px) {
  .bubble5 {
  width: 200px;
  margin-left: 500px;
  transform: translateY(10px);
}
}

@media only screen and (max-width: 400px) {
  .bubble5 {
  width: 80px;
  margin-left: 0px;
  transform: translateY(10px);
}
}

.bubble6 {
  width: 150px;
  margin-right: 0px;
  transform: translateY(-20px);
}

@media only screen and (min-width: 760px) {
  .bubble6 {
  width: 300px;
  margin-right: 15px;
  transform: translateY(-20px);
}
}

@media only screen and (max-width: 400px) {
  .bubble6 {
  width: 120px;
  margin-right: 0px;
  transform: translateY(-20px);
}
}

.Servicebubble:hover {
    transform: scale(1.5);
}

.Servicebubble.active {
    transform: scale(1.2); /* Enlarge the clicked bubble */
    z-index: 1; /* Ensure it's on top of the others */
}

.Servicebubble:not(.active) {
    transform: scale(1); /* Keep the inactive bubble at normal size */
    opacity: 0.5; /* Dim the inactive bubbles */
    z-index: 0; /* Ensure it's below the active one */
}

.projectTextContainer {
  max-width: 600px;
  text-align: center;
  position: relative;
  top: 0px;
  transform: translateX(0%);
  width: 100%;
  padding: 10%;
}


.projectText {
  font-size: 20px;
  display: none;
}

.projectText.active {
  display: block;
}

@media only screen and (min-width: 760px) {
.projectTextContainer {
  max-width: 600px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0%;
  line-height: 1.3;
}


.projectText {
  font-size: 35px;
  display: none;
}

.projectText.active {
  display: block;
}
}


.box-row {
    display: flex; /* Set the child container to be flex */
    justify-content: center; /* Horizontally align the items in a row */
    gap: 80px; /* Adds space between the images */
}

.box-row img {
    width: 275px;  /* Set the desired width */
    height: 275px; /* Set the desired height */
    /* border: 3px solid black; */
    padding: 30px;
    object-fit: contain; /* This ensures the image scales properly within the set dimensions */
}

.boxContent {
    padding: 0px; /* Optional: adds some padding inside each box */
    text-align: left; /* Centers the text within the box */
    flex: 1;                 /* Makes all boxes equal width */
    max-width: 330px;        /* Optional: set a maximum width if needed */
    font-size: 20px;
    line-height: 25px;
    /* border: 3px solid black; */
    margin-left: -60px;
}

.contentWidthSound {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  float: none;
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin-top: min(50vh, 0px);
}
@media only screen and (min-width: 760px) {
  .contentWidthSound {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    float: none;
    max-width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0%;
    margin-top: min(50vh, 0px);
  }
}
@media only screen and (min-width: 1275px) {
  .contentWidthSound {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    float: none;
    max-width: 80%;
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* Remove the .floatingOnWater prefix from these rules */

.sfxReelContainer {
  position: relative; /* It now takes up real space on the page */
  width: 100%;
  margin: 0 auto;    /* This is the easiest way to center a relative element */

  
  /* Use margin-top/bottom to create breathing room */
  margin-top: 34px;
  margin-bottom: -350px; 
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media only screen and (min-width: 760px) {
  .sfxReelContainer {
    width: 40%;
    margin-top:  -190px;
    margin-bottom: -30px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}

.sfxReelFloating {
  position: relative;
  display: block;
  pointer-events: all;
  width: 85%;
  margin: 0 auto;
  z-index: 999;
}

@media only screen and (min-width: 760px) {
.sfxReelFloating {
  position: relative;
  display: block;
  pointer-events: all;
  width: 85%;
  margin: 0 auto;
  z-index: 999;
  top: -130px;
}
}

.sfxWaterLayer {
  position: absolute;
  width: 100%;
  bottom: -31%;
  pointer-events: none;
  opacity: 0.8;
  z-index: 1000;
}

@media only screen and (min-width: 760px) {
.sfxWaterLayer {
  position: absolute;
  width: 100%;
  bottom: -31%;
  pointer-events: none;
  opacity: 0.8;
  z-index: 1000;
  top: 140px;
}
}

.underwaterDecorationsTop {
  display: none;
  position: absolute;
  z-index: 999999999999999999999999;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  opacity: 0.9;
}

@media only screen and (min-width: 760px) {
.underwaterDecorationsTop {
  display: block;
  position: absolute;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  opacity: 0.9;
}
}
.underwaterDecorationsTop .screen4-1 {
  position: absolute;
  top: 32%;
  left: -9%;
  width: 20%;
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-1 {
    top: 29%;
    left: 5%;
    width: 10%;
  }
}
.underwaterDecorationsTop .screen4-2 {
  position: absolute;
  top: 18%;
  right: -10%;
  width: 20%;
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-2 {
    top: 29%;
    right: 5%;
    width: 11%;
  }
}
.underwaterDecorationsTop .screen4-3 {
  position: absolute;
  top: 39%;
  right: -10%;
  width: 20%;
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-3 {
    top: 40%;
    right: 4%;
    width: 11%;
  }
}
.underwaterDecorationsTop .screen4-4 {
  position: absolute;
  top: 39%;
  right: -10%;
  width: 20%;
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-4 {
    top: 57%;
    left: 3%;
    width: 11%;
  }
}
.underwaterDecorationsTop .screen4-5 {
  position: absolute;
  top: 8%;
  left: 3%;
  width: 20%;
  transform: scaleX(-1);
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-5 {
    top: 41%;
    left: 3%;
    width: 11%;
    transform: scaleX(-1);
  }
}
.underwaterDecorationsTop .screen4-6 {
  position: absolute;
  top: 39%;
  right: -10%;
  width: 20%;
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-6 {
    top: 59%;
    right: 4%;
    width: 11%;
  }
}
.underwaterDecorationsTop .screen4-7 {
  position: absolute;
  top: 39%;
  right: -10%;
  width: 20%;
}
@media only screen and (min-width: 760px) {
  .underwaterDecorationsTop .screen4-7 {
    top: 38%;
    right: 4%;
    width: 11%;
  }
}

.belowHorizonSound {
  position: relative;
  z-index: 1001;
  overflow-y: visible;
  top: 200px;
  background: #00c3af;
}

@media only screen and (min-width: 760px) {
.belowHorizonSound {
  position: relative;
  z-index: 1001;
  overflow-y: visible;
  top: 0px;

}
}