/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    background-color: #EEEEEC;
    font-family: "Neue Haas Grotesk Display Thin", sans-serif;
    color: #000000;
    margin: 0;
    font-weight: 200;
    padding: 0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #EEEEEC;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header h1 {
    font-family: 'Panchang Variable', sans-serif;
    font-weight: 400;
    font-size: 1.8vw;
}

#go-back {
  /* Match whatever styles you used for your h2 */
  font-size: 18px;     /* same as your h2 */
  font-weight: 200;
  font-family: "Neue Haas Grotesk Display Thin", sans-serif;
  margin-bottom: -5px;
  /* plus your existing button styles if you like */
  color: #000;
  border: 1.3px solid #000;
  background-color: #d4d4d470;
  border-radius: 50px;
  padding: 6px 15px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
}
/* Hover state */
#go-back:hover {
  background-color: #28282A; /* White background on hover */
  color: #EEEEEC; /* Blue text on hover */
  border: 1.7px solid #031ba600; /* Keep blue outline */
}

.title-section {
    margin: 0;
    padding: 0;
  }
  
  .title-section h2 {
    font-family: 'Neue Haas Grotesk Display Pro Light', sans-serif;
    font-weight: 300;
    text-align: center;
    margin: 40px 0 20px 0;
    font-size: clamp(8px, 3vw, 17px); /* Responsive font size */
    line-height: 1.2;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

  .title-section .main-photo {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 20px 0;      /* Only bottom spacing; no horizontal margin */
  }

  .photo3 {
    display: block;
    width: 100%;
    height: auto;
    align-items: center;
    margin-top: 180px;
    margin-bottom: 200px;
  }

  .photo3 img{
   margin-bottom: 0;
  }

  .photo4-section {
    display: flex;
    max-width: 85%;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center the image horizontally */
    text-align: left; /* Ensure text aligns left */
    width: fit-content; /* Adjust width based on content */
    margin: 0 auto; /* Center the whole section */
    margin-bottom: 10vh;
}

.photo4 {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto;
}

.photo4-description {
    align-self: flex-start; /* Align description to the left */
    margin-top: 1.5vh; /* Add some spacing */
      font-size: 1em;
}


  .description {
    max-width: 40%;        /* Optional: limit line width */
    margin: 0 40px 60px 40px; /* top: 0, right: 40px, bottom: 60px, left: 40px */
    font-size: clamp(14px, 2vw, 18px); 
    line-height: 1.4;
    text-align: left;        /* Keep paragraph text left-aligned */
  }

/* --------------------------------------- */
/*           PHOTO GALLERY STYLES         */
/* --------------------------------------- */

/* Center the entire gallery, limit total width, provide big gap */
.photo-gallery {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  gap: 2rem; /* Reduce gap a little for better scaling */
  justify-content: center;
  align-items: flex-start; /* Keep alignment consistent */
  margin-bottom: 4rem;
  padding: 0 2rem; /* Adjusted padding for better spacing */
  box-sizing: border-box;
  overflow: hidden; /* Prevent layout shifts */
}

.photo-block {
  text-align: left;
  box-sizing: border-box;
  flex: 1 1 auto; /* Allow blocks to shrink/grow */
  max-width: 40vw; /* Control max size based on screen */
  margin-left: auto;
  margin-right: auto;
}

/* Image styling - shrink with screen */
.photo-block img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 40vw; /* Shrinks proportionally */
  margin-bottom: 0.5rem;
}

/* Move-down effect for the first photo */
.photo-block.move-down {
  margin-top: 40vh; /* Dynamic vertical spacing */
}

.photo-caption {
  font-size: 1em; /* Default font size */
}


.photo-block.large2 img {
    display: block;
    width: 100%;
    height: auto;
    margin: 50px 0 20px 0;      /* Only bottom spacing; no horizontal margin */
}

/* If you used .photo.large in the HTML, override it here or remove it. */
.photo.large {
    /* You could remove or reduce the scale so it’s not too huge */
    transform-origin: center;
}


.photo-caption2 {
    margin-left: 25px;
    font-size: 1em; /* Default font size */
}


/* --------------------------------------- */
/*         OTHER EXISTING STYLES           */
/* --------------------------------------- */
/* General Layout */
/* General Layout */
.text-photo-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: 6vw;
  padding: 0px;
  justify-content: space-between;
}

.text-block {
  flex: 1 1 30%; /* Allow flexible resizing */
  max-width: 30%;
  margin-top: 10px;
  padding: 0 20px; /* Add padding instead of fixed margins */
  font-size: 1.1em; /* Scale with screen size */
  line-height: 1.6;
}

.text-block ul {
  margin-top: 10px;
  padding-left: 20px;
}

.text-block li {
  margin: 10px 0;
  line-height: 1.5;
}


/* Floating Photo Section */
.floating-photo-section {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.floating-photo {
  width: 40vw; /* Scales with screen width */
  max-width: 1000px; /* Prevents it from getting too big */
  margin-right: 5vw; /* Adjust spacing dynamically */
}

.floating-photo img {
  width: 100%;
  height: auto;
}

/* Glued Photo & Text Container */
.glued-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap; /* Allows wrapping */
  margin-top: -10vh; /* Use viewport height for better scaling */
  margin-bottom: 20vh; /* Use viewport height for better scaling */
}

/* Glued Photo */
.glued-photo {
  width: 45vw; /* Scales with screen width */
  max-width: 750px;
}

.glued-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text Block */
.color-description-block {
  flex: 1;
  min-width: 300px;
  max-width: 45vw; /* Adjust width relative to screen */
  padding-left: 2vw;
  margin-top: auto; /* Align with glued photo */
}

.color-description {
  font-size: 1em; /* Scale with screen size */
  line-height: 1.6;
}



  .full-width-gallery {
    margin: 0;      /* remove default margin if any */
    padding: 0;     /* remove default padding if any */
  }

  .photo.wide-large,
.photo.wide-small,
.photo.full-width {
  display: block;
  width: 100%;
  margin: 0; /* remove bottom margin */
}

.photo.full-width{
  margin-top: -10vh;
}

.photo-set {
    display: block;
    margin: 0;      /* remove default margins */
    padding: 0;
    gap: 0;         /* if you’re using gap, set it to 0 to remove spacing */
  }

.photo.wide-large {
    display: block;
    width: 100%;
    margin-bottom: 0px;
}

.photo.wide-small {
    display: block;
    width: 100%;
    margin-bottom: 200px;
}

.photo.full-width {
    width: 100%;
    margin-bottom: 0px;
}

@font-face {
    font-family: "Panchang Variable";
    src: url("./fonts/Panchang-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
}
  
  /* The container spans 100% width and is relatively positioned 
     for absolutely placed nav buttons */
  .carousel-container {
    width: 100%;
    overflow: hidden; 
    position: relative;
  }
  
  /* The sliding wrapper of images */
  .carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  /* Each image has full viewport width (for a full-width slider) */
  .carousel-slide img {
    min-width: 100vw;
    height: auto;
    object-fit: cover;
    display: block;
  }
  
  /* Navigation buttons */
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
  }
  
  .prevBtn {
    left: 5px;
  }
  
  .nextBtn {
    right: 5px;
  }
  
  @font-face {
    font-family: "Neue Haas Grotesk Display Thin";
    src: url("./fonts/NeueHaasDisplay-Thin.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
  }

 /* =======================================
     FOOTER STYLES
     ======================================= */
     footer {
      background-color: #D0CDC5;
      padding: clamp(10px, 3vw, 20px); /* Adjusts padding dynamically */
    }
      
      /* Top row: H1 on left, H2 on right */
      .footer-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(10px, 5vw, 20px); /* Shrinks margin */
      }
      
      .footer-top-row h3 {
        font-size: clamp(50px, 8vw, 100px);
        margin-bottom: clamp(50px, 10vw, 150px); /* Shrinks space below */
      }
      
      .footer-top-row h2 {
        font-size: 1.4vw;
      }
      
      /* Bottom row */
      .footer-bottom-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: clamp(10px, 2vw, 20px); /* Dynamic spacing */
        padding: clamp(10px, 2vw, 20px) 0; /* Shrinks vertical padding */
      }
      
      /* Make bottom-row text shrink */
      .footer-bottom-row h2 {
        font-size:1.4vw;
      }
      
      .left-footer {
        text-align: left;
      }
      
      .center-footer {
        text-align: center;
      }
      
      .right-footer {
        text-align: right;
      }

      h2 {
        font-size: 1,4vw;
        font-weight: lighter;
        margin-bottom: -5px;
      }
      
      h3 {
        font-size: 4vw;
        font-weight: 500;
        font-family: "Panchang Variable", sans-serif;
        color: #ededf1;
      }

      
      /* Reset / base styling (optional) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: sans-serif;
  }
  
/* Hide the default cursor */
body {
    cursor: none;
}

/* Style for the custom cursor */
.custom-cursor {
    width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
    z-index: 1000;
}

a, button {
    cursor: none !important;
  }

  a:hover .custom-cursor,
  button:hover .custom-cursor {
      width: 30px;
      height: 30px;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  @media (hover: none) and (pointer: coarse) {
  .custom-cursor {
    display: none;
  }
}

@media (max-width: 1024px) {
  .photo-block.move-down {
    align-self: flex-end;
    margin-top: 15vh;
  }

  .photo-caption,
  .photo-caption2 {
    font-size: 0.9em;
  }

  .text-block {
    flex: 1 1 45%;
    font-size: 1em;
    max-width: 45%;
    margin-left: 0;
    margin-right: 0;
  }

  .text-block ul {
    padding-left: 15px;
  }

  .text-block li {
    font-size: 1em;
  }
}

@media (max-width: 768px) {
  .photo4-description {
    font-size: 0.9em;
    bottom: -20px;
    left: 5px;
    padding: 3px 6px;
  }

  .photo-gallery {
    flex-wrap: wrap;
    justify-content: center;
  }

  .photo-caption,
  .photo-caption2 {
    font-size: 0.9em;
    margin-top: 1vh;
  }

  .photo-block {
    max-width: 90vw;
    width: 90vw;
    margin: 0 auto;
    text-align: center;
  }

   .photo-block img {
    width: 100%;               /* Fill the block */
    max-width: none;           /* Don't restrict with vw */
  display: block;
  margin: 0 auto;
  }
  .text-photo-section {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10vh;
  }

  .glued-photo {
    margin-top: 10vh;
  }

  header h1 {
    font-size: 3vw;
  }

  .text-block {
    flex: 1 1 80%;
    max-width: 80%;
    margin-left: 0;
    margin-right: 0;
    font-size: 1em;
  }

  .text-block ul {
    padding-left: 10px;
  }

  .text-block li {
    font-size: 1em;
    margin-bottom: 15px;
  }

  .floating-photo-section {
    justify-content: right;
  }

  .floating-photo {
    width: 65vw;
    margin-right: 0;
  }

  .glued-container {
    flex-direction: column;
    align-items: left;
    margin-top: 5vh;
  }

  .glued-photo {
    width: 60vw;
  }

  .color-description-block {
    max-width: 80%;
    text-align: left;
    padding-left: 20;
    margin-left: 4vw;
    margin-top: 5vh;
  }

  .color-description {
    font-size: 0.9em;
  }


  .photo3 {
    margin-top: -5vh;
  }

  .footer-top-row,
  .footer-bottom-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-row {
    gap: clamp(5px, 2vw, 10px);
  }

   .footer-top-row h3 {
    font-size: clamp(50px, 8vw, 100px);
    margin-bottom: clamp(50px, 10vw, 150px);
  }

  .footer-bottom-row h2,
  .footer-top-row h2 {
    font-size: 2.5vw;
  }

   .photo-block.move-down {
    align-self: center;
    margin-top: 5vh;
  }
    .photo-block.move-down .photo.small {
    width: 60vw;  /* Make it bigger */
    max-width: none;
    height: auto;
  }

     .photo-block {
    align-self: center;
    margin-top: 5vh;
    margin-bottom: 10vh;
  }
    .photo-block .photo.small {
    width: 60vw;  /* Make it bigger */
    max-width: none;
    height: auto;
  }
}