body {
  margin: 0;
  background-color: 	#ffffff;
  /*cursor: url('arrow-cursor.png') 0 0, auto; /* set hot spot (x y) */
cursor: none;
/*background-size: 85.5px 85.5px;
 background-image:
    linear-gradient(to right, #A9A9A9 1px, transparent 1px),
    linear-gradient(to bottom, #A9A9A9 1px, transparent 1px);
  background-attachment: fixed;
  background-position: center;
  cursor: none; /* Hide the default cursor */
}
.custom-cursor {
position: fixed;
top: 0;
left: 0;
width: 20px; /* Adjust size as needed */
height: 20px;
/*border: 2px solid #7f7f7f; /* black outline */
background-color: #69df46; /* light gray with 40% opacity */
border-radius: 50%; /* Make it a circle */
pointer-events: none; /* Ensure it doesn't block clicks */
z-index: 10000; /* Keep it above all other elements */
transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
transform: translate(-50%, -50%);
opacity: 0; /* Start as hidden */
}
.hidden {
opacity: 0; /* Hide when out of bounds */
}
.content {
   margin: 30px;
}
a {
text-decoration: none;
color: #7f7f7f;
}
.link a:hover {
text-decoration: none;
color: #69df46;  
}
/*.link {
line-height: 0px;
}*/

.link{
margin-top: 41.2px;
line-height: 0px;
text-transform: uppercase;
/*font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 25px;*/
/*font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);*/
}

.text-block {
    text-align: center;
    padding-bottom: 20px;
  }

.subject {
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);
text-align: left;
align-self: flex-start; /* For flexbox layouts */
}

.header {
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
/*font-size: clamp(1rem, 2vw + 2rem, 3rem);*/
font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);
display: inline; /* makes background only cover the text */
/*background-color: #69df46;*/
margin: 0;       /* remove default margin */
padding: 0;      /* remove any padding */
}

h3 {
font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
}
.project-info {
/*  display: flex;
  justify-content: space-between; 
  align-items: center;
  gap: 7rem;*/
color: #7f7f7f;
font-family: "indivisible", sans-serif;
font-weight: 500;
/*font-style: italic;*/
font-size: clamp(0.9rem, 1vw, 1rem);
padding-top: 7px;
}

p {
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 23px;
}

.text p {
text-align: left;
font-size: 23px;
width: 100%;
padding-top: 10px;
padding-bottom: 40px;
}
@media (max-width: 768px) {
  .text {
    width: 100%;
  }
}
.project {
color: #7f7f7f;
padding-top: 20px;
padding-bottom: 1px;
font-family: "indivisible", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.9rem, 1vw, 1rem);
padding-bottom: 7px;
}
.project-descriptor {
color: gray;
font-family: "owners-text", sans-serif;
font-weight: 400;
font-style: normal;
padding-top: 30px;
 font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);

}

.content1 {
margin-top: 20px;
display: flex;
/*justify-content: space-between; /* pushes text left, image right */
align-items:flex-start; /* aligns them at the top */
/*   gap: 50px; space between text and image */
/*border-top: 2px solid black;
border-bottom: 2px solid black; /* bottom border */
/*padding: 10px 0; /* optional: add space between borders and content */
margin: 200px;
}

/* Responsive styling for smaller screens (e.g. phones) */
@media (max-width: 768px) {
  .content1 {
    flex-direction: column;   /* stack items vertically */
    align-items: center;      /* center the content */
    margin: 0;                /* remove large margins */
    padding: 20px;            /* add comfortable padding */
    width: 97vw;             /* take full viewport width */
    min-height: 100vh;        /* fill the full screen height */
    box-sizing: border-box;   /* include padding in total width */
  }
}

.banner_animation {
  width: 100%;
  height: auto;
  display: block;
}

img {
  max-width: 700;  /* ensures it never exceeds its container */
  height: auto;     /* maintains aspect ratio */
  display: block;   /* removes extra space below image */
}
.slides {
  width: 100%;

}

.shrink-hover {
  transition: transform 0.3s ease;
}

.shrink-hover:hover {
  transform: scale(0.9);
}

/* Optional: adjust size for very small screens */
@media (max-width: 600px) {
  img {
    width: 200px;    /* fills container on mobile */
    max-width: none;
  }
}

 /*.gif {
    padding-top: 50px;
    padding-bottom: 50px;
    margin: auto;
    width: 55%; 
    height: auto; 
    display: block; 
  }

  /* For larger screens */
@media (min-width: 1024px) {
 .gif {
    max-width: 100%;
    padding-top: 150px;
    padding-bottom: 150px;
  }
}
*/

.Map {
  width: 100%;
  padding-top: 0px;
}
  /* For larger screens */
@media (min-width: 1024px) {
  .map {
    max-width: 100%;
    padding-top: 150px;
  }
}

.center {
display: flex;
justify-content: center;
align-items: center;    
flex-direction: column;
text-align: center;
font-family: "indivisible", sans-serif;
font-weight: 500;
}
.subject {
  font-family: "indivisible", sans-serif;
font-weight: 600;
font-style: normal;

 font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
 padding-top: 50px;

/*  display: inline;
  background-color: #69df46;
  margin: 0;
  padding: 0; */
}
.figjam {
text-decoration: underline;
margin: auto;
padding-bottom: 10px;
}

.history{
padding-top: 30px ;
padding-bottom: 50px;
width: 100%;
display: block;
margin: 0 auto;
text-align: left;
}

.list{
  padding-top: 30px;
  width: 70%;
    display: block;
  margin: 0 auto;
  text-align: left;
}

.header_image {
  filter: grayscale(1);
  width: 100%;          /* Always take full width of container */
  height: auto;         /* Keep aspect ratio */
  display: block;       /* Removes inline spacing issues */
  padding: 0;           /* Reset padding for mobile */
  object-fit: cover;    /* Ensures it crops nicely if constrained */
}

/* Larger screens */
@media (min-width: 1024px) {
  .header_image {
    max-width: 100%;
    height: auto;
    padding-top: 150px;
    padding-bottom: 150px;
  }
}

.sketch {
  width: 100%;
  height: auto;  
}
  /* For larger screens */
@media (min-width: 1024px) {
  .sketch {
    max-width: 100%;
    height: auto;  
  }
}

.ears {
  width: 50%;
  height: auto;  
    display: block;
  margin: 0 auto;
}
  /* For larger screens */
@media (min-width: 1024px) {
  .ears {
    max-width: 100%;
    height: auto;  
  }
}


.ears {
  display: block;       /* removes inline spacing */
  width: 100%;          /* fills parent width */
  max-width: 100%;      /* prevents overflow */
  height: auto;         /* keeps aspect ratio */
}

.ears-container {
  display: flex;
  gap: 10px; /* space between images */
}

.ears {
  max-width: 100%;
  height: auto;
}

.image-flex {
  display: flex;             /* Enable flex layout */
  justify-content: center;   /* Center images horizontally */
  align-items: flex-start;   /* Top-align images (no stretching) */
  gap: 10px;                 /* Add space between images */
}

.image-flex img {
  max-width: 100%;           /* Ensure image fits container */
  height: auto;              /* Preserve aspect ratio */
  display: block;            /* Remove inline spacing */
}

.image-row {
  display: flex;
  justify-content: center;  /* Center all images horizontally */
  align-items: flex-start;  /* Align images to the top */
  gap: 10px;                /* Space between images */
  flex-wrap: wrap;          /* Allow wrapping on smaller screens */
}
.image-row img {
  display: block;
  height: auto;
  max-width: 100%;          /* Prevent stretching */
}