#boxy4 .anime-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

#boxy4 #anime-card1 img,
#boxy4 #anime-card2 img,
#boxy4 #anime-card3 img,
#boxy4 #anime-card4 img,
#boxy4 #anime-card5 img {
  width: 120px;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid #fff;
  margin-left: -18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 0.2s;
  position: relative;
  z-index: 1;
}
#boxy4 #anime-card1 img { margin-left: 0; transform: rotate(-10deg); z-index: 5; }
#boxy4 #anime-card2 img { transform: rotate(8deg); z-index: 4; }
#boxy4 #anime-card3 img { transform: rotate(-5deg); z-index: 3; }
#boxy4 #anime-card4 img { transform: rotate(12deg); z-index: 2; }
#boxy4 #anime-card5 img { transform: rotate(-7deg); z-index: 1; }
#boxy4 #anime-card1 img:hover,
#boxy4 #anime-card2 img:hover,
#boxy4 #anime-card3 img:hover,
#boxy4 #anime-card4 img:hover,
#boxy4 #anime-card5 img:hover {
  transform: scale(1.08) !important;
  z-index: 10;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('./fonts/NeueMontreal-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Recoletta';
    src: url('./fonts/Recoleta-RegularDEMO.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    transition: background 300ms ease,
                backdrop-filter 300ms ease,
                box-shadow 300ms ease,
                border 300ms ease;
    z-index: 1000;
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#navlinks {
    display: flex;
    align-items: center;
    gap: 40px;
}
/* Custom cursor hover effect */
.custom-cursor.hover {
  width: 30px;
  height: 30px;
  background: black;
  border: 2px solid black;
}

#flower-logo {
  width: 40px;
  height: 40px;
  display: inline-block !important;
  vertical-align: middle;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 10px !important;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.6s ease-in-out;
}

#flower-logo:hover {
  transform: rotate(360deg);
}



#navlinks {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 40px;
}

#email-copy-btn {
    position: absolute;
    top: 15px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(255, 255, 255); /* Changed from white */
    border: 1px solid #ddd;
    color: rgb(97, 97, 97); /* Changed from #333 */
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Neue Montreal', sans-serif;
    font-size: 14px;
    transition: background 0.3s ease;
}

#email-copy-btn:hover {
    background: #333; /* Darker on hover */
}

.boytxt{
  font-size: 16px;
   color: #818181;
    text-decoration: none;
    line-height: 30px;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}


#wholebodycontainer{
  position: relative;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: blueviolet;
}


.link {
   color: #4e4f52; /* Reverted to original gray */
    text-decoration: none;
    font-size: 16px;
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}

.bodytxt {
   color: #818181;
    text-decoration: none;
    font-size: 18px;
    text-align: left;
    justify-content: center;
    width: fit-content;
    line-height: 30px;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}

#subtxt {
   color: #818181;
    text-decoration: none;
    font-size: 22px;
    line-height: 30px;
    font-family: 'Recoletta', serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}

.Topper{
  position: relative;
  padding: 0;
  max-width: 500px;
  margin: 0 auto;
}


#Myname{
    display: grid;
    flex-direction: column;
    justify-content: center;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0px;
}

#Myname h1{
    margin: 0;
}

#image{
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1; /* Lower z-index than hover images */
}

#avatar-stack {
    position: relative;
    width: 65px;
    height: 50px;
}

#avatar-stack img {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 10%;
}

#avatar-stack img:first-child {
    left: 0;
    top: 0;
    z-index: 2;
    transform: rotate(5deg); 
    animation: floatAvatar1 3s ease-in-out infinite;
}

#avatar-stack img:last-child {
    left: 15px;
    top: 4px;
    z-index: 1;
    transform: rotate(-5deg); 
    animation: floatAvatar2 3s ease-in-out infinite 0.5s;
}

@keyframes floatAvatar1 {
    0%, 100% {
        transform: translateY(0px) rotate(-deg);
    }
    50% {
        transform: translateY(-4px) rotate(2deg);
    }
}

@keyframes floatAvatar2 {
    0%, 100% {
        transform: translateY(0px) rotate(2deg);
    }
    50% {
        transform: translateY(-3px) rotate(-2deg);
    }
}

.linktxt{
   color: #959595;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 0.8px;
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}


.subtext {
  display: flex;
  align-items: center;  /* ← This should center them vertically */
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6);
  transition: color 0.4s ease;
  position: relative;
  gap: 4px;
}

.subbody:hover,
.subtext:hover .linktxt{
    color: #000000;
}

.subtext:hover .subimage {
  opacity: 0.7; /* subtle fade */
  transform: scale(1.05);
}

.subtext:last-child {
  border-bottom: none;
}

/* Hide the copy-email-btn on desktop, show only on mobile */
.copy-email-btn {
  display: none;
}

/* Standalone copy icon for desktop */
.copy-icon-desktop {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 8px;
  transition: transform 0.2s, opacity 0.2s;
}
.copy-icon-desktop:hover {
  opacity: 0.7;
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .copy-email-btn {
    display: flex;
  }
  .copy-icon-desktop {
    display: none;
  }
}

/* Hide the text inside the button on desktop, show only the icon */
.copy-email-btn .copy-text {
  display: none;
}

/* Always show the copy icon */
.copy-email-btn .copy-icon {
  display: inline-block;
}

@media (max-width: 768px) {
  .copy-email-btn {
    display: flex; /* Show full button on mobile */
  }
  .copy-email-btn .copy-text {
    display: inline;
  }
}

.copy-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.copy-email-btn:hover {
  background: #333;
  color: white;
  transform: scale(1.05);
}

.subtext:hover .subimage {
  transform: scale(1.1);
}

a{
    color: inherit;
    text-decoration: none;
}

a:hover{
    color:#59B9FF ;
}

#contacts{
  display: flex;
  justify-content: left;
  max-width: 500px;
  width: fit-content;
  /* margin: 0 auto; */
  align-items: flex-start; /* align items vertically */
  gap: 1rem; /* space between each contact item */
}


.headertxt{
    font-family: 'Recoletta', serif;
    font-weight: normal;
    font-size: 46px;
    color: #373737;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.headertxt2{
    font-family: 'Recoletta', serif;
    font-weight: normal;
    font-size: 46px;
    color: #373737;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.header3{
    color: #373737;
    font-family: 'Recoletta', serif;
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    margin-bottom: 12px;
}

.header4{
    color: #373737;
    font-family: 'Recoletta', serif;
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    margin-bottom: 12px;
}

.random-img-container {
  position: relative;
  width: 100%;
  height: 100vh; /* or more if needed */
}

.random-img {
  position: absolute;
  width: 120px; /* or however big you want them */
  transition: transform 0.3s ease;
  border-radius: 12px;
}

.random-img:hover {
  transform: scale(1.1);
  z-index: 2;
}

.header2{
    font-family: 'Recoletta', serif;
    font-weight: normal;
    font-size: 20px;
    color: #404040;
    margin-bottom: 0px;
}

.sectionspace{
    margin-top: 0;
    padding-top: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

.sectionspacework{
    margin-top: 30px;
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

.cover{
    width: 600px;
    max-width: 100%;
    display: block;
    height: 300px;
    border-radius: 30px;
    margin-top: 0;
    margin: 0 auto;;
}

.casebodyone{
    font-size: 14px;
    color: #5e5e5e;
    margin-bottom: 0;
    line-height: 1.4;
    padding: 0px;
    margin: 0px;
    text-align: left;
    margin-bottom: 6px;
    font-family: 'Neue Montreal', serif;
    font-weight: normal;
}

.casetitle{
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 0;
    line-height: 1.2;
    padding: 0px;
    margin: 0px;
    font-family: 'Neue Montreal', serif;
    font-weight: normal;
}

.casebody {
    color: #818181;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    line-height: 1.2;
    text-decoration: none;
    font-size: 16px;
    line-height: 30px;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}

.casestudytext{
    position: static;
    text-align: left;
    padding-top: 0;
    margin-top: 14px;
}




#bgimage {
  background-image: url('images/bg\ image.webp');
  background-size: cover;    
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
}

#floating-boxes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

#floating-boxes div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: #D0D3DA; /* temporary color to see them */
    border-radius: 6px;
}

#reachmeitems{
    display: flex;
    background-color: #59B9FF;
    justify-items: center;
    align-items: center; 
}


#footer {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px 6px 40px;

  box-sizing: border-box; /* ensures padding is included */
}


#wholebody{
  max-width: 600px;
  margin-top: 140px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

#workssection{
    text-align: center;
    padding-bottom: 0;
}

.work1{
    position: relative;
    display: inline-block;
    margin-bottom: 40px; /* This causes the bottom space after each .work1 */
    padding-bottom: 0;
}

.work1:last-child {
    margin-bottom: 0; /* Remove bottom margin for the last .work1 */
}

#sectionspacehero{
  position: relative;
    margin-top: 30px;
    z-index: 100;
}

#arrow{
    height: auto;
}


.chat-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
  width: 100%;
  /* padding: 40px 20px; */
  /* margin: 0 auto; */
}

.chat-message {
  display: flex;
  /* display: none; */
  width: 100%;
  align-items: flex-end;
  justify-content: left; /* Center the message block */
  gap: 10px;
}

.message-bubble {
  background: white; /* White background */
  color: black; /* Black text */
  padding: 15px 20px;
  border-radius: 20px; /* More rounded */
  max-width: 70%;
  position: relative;
  display: inline-block;
  white-space: normal;
  font-family: 'Neue Montreal', sans-serif;
  font-size: 16px;
}

.message-bubble a {
  text-decoration: underline;
  color: #000;
}

.email-copy {
  cursor: pointer;
  color: black;
  text-decoration: underline;
}

.timestamp {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 12px;
  color: #818181;
  
}

.avatar {
  width: 40px;
  flex-shrink: 0;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Remove old styles */
#thecontainer,
#reachmeitems,
.circle-button,
.spread-circle,
#email-section,
#email-text,
#copy-button {
  display: none;
}

/* Ensure flower logo is always visible */
#flower-logo {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ...existing code... */

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif;
}

/* Floating boxes - ABSOLUTE positioning inside hero section */
#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8 {
  position: absolute; /* Changed from fixed */
  border-radius: 6px;
  background: #D0D3DA;
  z-index: 1;
  pointer-events: none;
  /* animation: gentleFloat 4s ease-in-out infinite; */
}

/* Gentle floating animation */
@keyframes gentleFloat {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -10px);
  }
}

  #box1 { animation-delay: 0s; }
  #box2 { animation-delay: 0.5s; }
  #box3 { animation-delay: 1s; }
  #box4 { animation-delay: 1.5s; }
  #box5 { animation-delay: 0.3s; }
  #box6 { animation-delay: 0.8s; }
  #box7 { animation-delay: 1.2s; }
  #box8 { animation-delay: 0.6s; }


/* LEFT SIDE BOXES - positioned relative to #sectionspacehero */
#box1 {
  width: 16px;
  height: 16px;
  top: 120px;
  left: 20%;
}

#box8 {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  top: 400px;
  left: 18%;
}

#box3 {
  width: 15px;
  height: 15px;
  top: 230px;
  left: 22%;
}

#box4 {
  width: 20px;
  height: 20px;
  top: 270px;
  left: 12%;
}

/* RIGHT SIDE BOXES */
#box2 {
  width: 20px;
  height: 20px;
  top: 140px;
  right: 20%;
}

#box5 {
  width: 16px;
  height: 16px;
  top: 210px;
  right: 15%;
}

#box6 {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  top: 310px;
  right: 17%;
}

#box7 {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  top: 350px;
  right: 11%;
}

/* Mobile - hide boxes */
@media (max-width: 768px) {
  #box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8 {
    display: none;
  }
}

#email-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-family: 'Neue Montreal', sans-serif;
  opacity: 0;
  z-index: 3;
  display: none;
  transition: opacity 0.8s ease;
}

#email-section.show {
  opacity: 1;
  display: block;
}

.link {
  position: relative;
  z-index: 10;
}

#email-text {
  color: white;
  font-size: 22px;
  margin-bottom: 12px;
  font-family: 'Neue Montreal', sans-serif;
}

#copy-button {
  margin-top: 12px;
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-family: 'Neue Montreal', sans-serif;
  transition: background 0.3s ease;
}

#copy-button:hover {
  background: #eaeaea;
  color: black;
}

.contact-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121212;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.contact-page.show {
  opacity: 1;
  pointer-events: auto;
}


#footerleft {
   color: #818181;
    text-align: left;
    text-decoration: none;
    font-size: 16px;
    line-height: 30px;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}

#footerright {
   color: #818181;
    text-align: right;
    text-decoration: none;
    font-size: 16px;
    line-height: 30px;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
}

/* ===== About Page ===== */

#workssection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 40px;
}

#workssection .header3 {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;
}

@media (max-width: 768px) {
  #navbar {
    padding: 10px 20px;
  }
  #navlinks {
    gap: 20px;
  }
  #email-copy-btn {
    right: 20px;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Hero Section */
  #Myname {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }
  .headertxt {
    font-size: 32px;
    margin-bottom: 0;
  }
  .bodytxt {
    font-size: 16px;
    margin-top: 0;
  }

  /* Contacts */
  #contacts {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .linktxt {
    display: none;
  }
  .copy-email-btn {
    display: flex; /* Show on mobile */
  }

  .firstsection {
    flex-direction: row;
    display: flex;
    
  }

.thumbnail{
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 30px;
    margin: 0 auto;
    border: 6px solid white;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    display: block;
}

  .subbody {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* Footer */
  #footer {
    padding: 10px 20px 6px 20px;
  }
  #footerleft, #footerright {
    font-size: 14px;
  }
  /* About Page */
  #workssection {
    padding: 40px 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
  #workssection .header3 {
    font-size: 24px;
  }

  /* Chat Section */
  .chat-container {
    padding: 10px;
  }
  .message-bubble {
    max-width: 90%;
    font-size: 14px;
  }

  /* Anime Grid */
  .anime-grid {
    width: 100%;
  }
}


/* #navlinks {
    display: flex;
    align-items: center;
    gap: 40px;
} */

.thumbnail{
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    display: block;
    height: 380px;
    aspect-ratio: 16 /9;
    border-radius: 30px;
    margin: 0 auto;
    border: 6px solid white;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    display: block;
}


#boxy1 {
  border: 6px solid white;
  max-width: 500px; /* Maximum width on desktop */
  height: 250px;
  overflow: hidden;
  border-radius: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.books-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: relative;
  height: 160px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

  .books-grid {
    height: 120px;
    padding: 0 5px;
  }

.book-img {
  border-radius: 12px;
  border: 4px solid white;
  position: absolute;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  height: auto;
  aspect-ratio: 2/3; /* Maintains book proportions */
}

.book-img:hover {
  transform: translateY(-15px) scale(1.08) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 100 !important;
}

/* Position each book with overlapping, rotation, and descending sizes */
/* Position each book with overlapping, rotation, and responsive sizes */
.book1 { 
  left: 2%; 
  top: 50%;
  width: 22%;
  max-width: 120px;
  min-width: 60px;
  transform: rotate(-12deg); 
  z-index: 5; 
}

.book2 { 
  left: 16%; 
  top: 25%;
  width: 26%;
  max-width: 140px;
  min-width: 70px;
  transform: rotate(4deg); 
  z-index: 4; 
}

.book3 { 
  left: 32%; 
  top: 19%;
  width: 30%;
  max-width: 160px;
  min-width: 80px;
  transform: rotate(4deg); 
  z-index: 3; 
}

.book4 { 
  left: 52%; 
  top: 12%;
  width: 34%;
  max-width: 180px;
  min-width: 90px;
  transform: rotate(4deg); 
  z-index: 2; 
}

.book5 { 
  left: 68%; 
  top: 6%;
  width: 38%;
  max-width: 200px;
  min-width: 100px;
  transform: rotate(4deg); 
  z-index: 1; 
}


/* Mobile responsiveness */
@media (max-width: 768px) {
  #boxy1 {
    width: 100%;
    max-width: 350px;
    height: 250px;
  }

  .books-grid {
    height: 140px;
  }

  .book-img {
    width: 70px;
    height: 110px;
  }

  .book1 { left: 8%; }
  .book2 { left: 22%; }
  .book3 { left: 36%; }
  .book4 { left: 50%; }
  .book5 { left: 64%; }
}

 .sectiontitle{
   color: #818181;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
    margin: 20px 40px;
 }

#boxy2{
  border: 6px solid white;
  width: 300px;
  height: 250px;
  overflow: hidden;
  border-radius: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.musictab {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
}
.musictab a {
  text-decoration: none;
  width: 100%;
  display: flex;
}

.music-frame {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 500px; /* pill shape */
  padding: 8px 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  box-sizing: border-box;
  width: auto;
  max-width: none;
}

.music-frame:hover {
  transform: translateY(-5px);
}

.music-cover {
  width: 30px;
  height: 30px;
  border-radius: 300px;
  margin-right: 6px;
  object-fit: cover;
}

@keyframes scrollMusic {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* scroll half the width; adjust as needed */
  }
}

.music-wrapper1:hover .music-grid1
.music-wrapper2:hover .music-grid2
.music-wrapper3:hover .music-grid3 
{
  animation-play-state: paused;
}

.musictxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1px;
}

.musicheadertxt {
  font-size: 14px;
  font-weight: 600;
  color: #505050;
  margin: 0;
}

.musicsubtxt {
  font-size: 12px;
  color: #555;
  margin: 2px 0 0 0;
  text-align: left;
}

.music-wrapper1,
.music-wrapper2,
.music-wrapper3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  margin-bottom: 8px;
  overflow: hidden;
}
.music-grid2{
  display: flex;
  flex-direction: row;
  gap: 10px; /* space between pills */
  animation: scrollMusic 20s linear infinite;
  animation-direction: reverse;
}

.music-grid,
.music-grid1,
.music-grid3 {
  display: flex;
  flex-direction: row;
  gap: 10px; /* space between pills */
  animation: scrollMusic 20s linear infinite;
}

 .sectiontitle2{
   color: #818181;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.2;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: 0.4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'clig', 'kern';
    text-align: center;
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
 }


 #boxy3 {
            border: 6px solid white;
            width: 100%;
            max-width: 300px;
            height: 250px;
            display: flex;
            overflow: hidden !important;
            border-radius: 24px;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
        }

        .image-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: visible !important;
        }

        .verse-reveal {
            position: absolute;
            max-width: 220px;
            text-align: center;
            padding: 20px;
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.6s ease, transform 0.6s ease;
            pointer-events: none;
            z-index: 0;
        }

        #boxy3:hover .verse-reveal {
            opacity: 1;
            transform: scale(1);
            transition-delay: 0.4s;
        }

        .verse-text {
            color: #2d3748;
            margin-bottom: 12px;
            font-weight: 500;
            text-decoration: none;
            font-size: 14px;
            line-height: 1.2;
            align-items: center;
            text-align: center;
            justify-content: center;
            font-family: 'Neue Montreal', sans-serif;
            letter-spacing: 0.4px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: 'liga', 'clig', 'kern';
            margin: 10px 40px;
        }

        .verse-reference {
            font-size: 12px;
            color: #718096;
            font-style: italic;
        }

        /* .scattered-img {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transition: transform 0.8s ease-out;
            border: 3px solid white;
            will-change: transform;
            z-index: 1;
        } */

        .scattered-img {
          position: absolute;
          width: 100px;
          height: 100px;
          border-radius: 0;
          object-fit: cover;
          transition: transform 0.8s ease-out;
          border: 3px solid white;
          border-bottom: 15px solid white; /* Polaroid effect */
          will-change: transform;
          z-index: 1;
        }

        /* Hover state - images fly OUTSIDE the box - 12 images */
        #boxy3:hover .scattered-img:nth-child(1) {
            transform: translate(-180px, -120px) rotate(-65deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(2) {
            transform: translate(180px, -130px) rotate(70deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(3) {
            transform: translate(-170px, 140px) rotate(60deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(4) {
            transform: translate(190px, 135px) rotate(-75deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(5) {
            transform: translate(0px, -180px) rotate(45deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(6) {
            transform: translate(0px, 180px) rotate(-50deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(7) {
            transform: translate(-160px, -80px) rotate(-55deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(8) {
            transform: translate(170px, 80px) rotate(65deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(9) {
            transform: translate(-90px, -150px) rotate(-40deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(10) {
            transform: translate(-130px, 110px) rotate(80deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(11) {
            transform: translate(160px, -90px) rotate(-60deg) scale(0.8) !important;
        }

        #boxy3:hover .scattered-img:nth-child(12) {
            transform: translate(100px, 150px) rotate(55deg) scale(0.8) !important;
        }

        @media (max-width: 768px) {
            #boxy3 {
                max-width: 350px;
            }

            .scattered-img {
                width: 90px;
                height: 90px;
            }
        }
.move {
  transform: translate(
    calc(-50px + 100px * var(--rand-x)),
    calc(-50px + 100px * var(--rand-y))
  ) rotate(45deg);}

.anime-card1{
  width: 100px;
  height: 200px;
  border-radius: 12px;
} */

#boxy4 #anime-card1 img { margin-left: 0; transform: rotate(-10deg); z-index: 5; }

.anime-card2{
  width: 100px;
  height: 200px;
  border-radius: 12px;
}

.anime-card3{
  width: 100px;
  height: 200px;
  border-radius: 12px;
}

.anime-card4{
  width: 100px;
  height: 200px;
  border-radius: 12px;
}

.anime-card5{
  width: 100px;
  height: 200px;
  border-radius: 12px;
}

#boxy4{
  border: 6px solid white;
  width: 500px;
  height: 250px;
  overflow: hidden;
  border-radius: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.firstsection {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .firstsection {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: stretch;
  }
}

/* Smaller subimage for hero section links */
#contacts .subimage {
  width: 20px;
  height: 20px;
  object-fit: contain;
  padding: 0;
  margin: 0;

}

/* Add this to your styles.css */
#sectionspacehero .headertxt {
    min-height: 60px; /* Prevents jumping */
    display: inline-block;
    min-width: 280px;
}

/* Add a blinking typing cursor effect */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 0.8em;
    background-color: #373737;
    margin-left: 4px;
    animation: blink 0.7s infinite;
    vertical-align: baseline;
    position: relative;
    top: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@media (max-width: 768px) {
  /* Make all boxes same width */
  #boxy1, #boxy3{
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto 15px auto;
  }

  /* Special handling for music box */
  #boxy2 {
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }

  #boxy2 .sectiontitle2 {
    margin: 0 auto 10px auto !important;
    text-align: center !important;
    padding: 0 !important;
    flex-shrink: 0;
    width: auto !important;
    
  }

  /* Ensure music wrappers have space */
  .music-wrapper1,
  .music-wrapper2,
  .music-wrapper3 {
    margin-bottom: 4px;
    margin-top: 10px;
    padding: 0 10px;
  }

  /* Adjust music grid gap if needed */
  .music-grid1,
  .music-grid2,
  .music-grid3 {
    gap: 8px;
  }

    @media (max-width: 768px) {
  
  /* ... your existing code for boxy1, boxy2, boxy3 ... */

  /* Special handling for anime box */
  #boxy4 {
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  #boxy4 .sectiontitle2 {
    margin: 20px auto 15px auto !important; /* Reduced from default, centered */
    text-align: center !important;
    padding: 0 !important;
    flex-shrink: 0;

    width: auto !important;
    max-width: 90%;
  }

  #boxy4 .anime-grid {
    display: flex;
    padding-bottom: 30px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    margin-top: 0; /* Remove extra top margin */
    margin-bottom: 0; /* Remove extra top margin */
    padding-bottom: 0; /* Remove extra top margin */
  }

  #boxy4 #anime-card1 img,
  #boxy4 #anime-card2 img,
  #boxy4 #anime-card3 img,
  #boxy4 #anime-card4 img,
  #boxy4 #anime-card5 img {
    width: 90px !important; /* CHANGE THIS */
    margin-bottom: -30px !important;
    height: 140px !important; /* CHANGE THIS */
    min-width: 90px !important; /* Force minimum width */
    min-height: 140px !important; /* Force minimum height */
    max-width: 90px !important; /* Force maximum width */
    max-height: 140px !important; /* Force maximum height */
    border-radius: 8px !important;
    margin-left: -18px !important;
    object-fit: cover !important;
    border: 3px solid #fff !important;
  }

 /* Fan-style rotation for anime cards */
  #boxy4 #anime-card1 img { 
    margin-left: 0 !important; 
    transform: rotate(-15deg) !important;
    z-index: 5 !important; 
  }
  
  #boxy4 #anime-card2 img { 
    transform: rotate(-8deg) !important;
    z-index: 4 !important; 
  }
  
  #boxy4 #anime-card3 img { 
    transform: rotate(0deg) !important;
    z-index: 3 !important; 
  }
  
  #boxy4 #anime-card4 img { 
    transform: rotate(8deg) !important;
    z-index: 2 !important; 
  }
  
  #boxy4 #anime-card5 img { 
    transform: rotate(15deg) !important;
    z-index: 1 !important; 
  }


/* Books box - similar structure to anime box */
#boxy1 {
  width: 100%;
  max-width: 350px;
  height: 250px;
  margin: 0 auto 15px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0 0;
  box-sizing: border-box;
  overflow: hidden;
}

#boxy1 .sectiontitle {
  margin: 10px auto 15px auto !important;
  text-align: center !important;
  padding: 0 20px !important;
  flex-shrink: 0;
  width: 100%;
  max-width: 90%;
}

.books-grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: row;
  position: relative;
  height: 160px;
  width: 100%;
  padding: 0;
  padding-bottom: 30px; /* Push books down */
  box-sizing: border-box;
}

.book-img {
  border-radius: 12px;
  border: 4px solid white;
  position: absolute;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
  height: auto;
  aspect-ratio: 2/3;
  margin-bottom: -40px !important; /* Push books down to touch bottom */
}

.book-img:hover {
  transform: translateY(-15px) scale(1.08) !important;
  z-index: 100 !important;
}

/* Position books SPREADING FROM LEFT TO RIGHT */
.book1 { 
  left: 5% !important; /* Start from left */
  bottom: 0 !important;
  top: auto !important;
  width: 22%;
  max-width: 120px;
  min-width: 60px;
  transform: rotate(-12deg) translateY(10px) !important; /* Push down */
  z-index: 5; 
}

.book2 { 
  left: 20% !important; /* Spread evenly */
  bottom: 0 !important;
  top: auto !important;
  width: 22%;
  max-width: 120px;
  min-width: 60px;
  transform: rotate(-6deg) translateY(5px) !important;
  z-index: 4; 
}

.book3 { 
  left: 35% !important; /* Center */
  bottom: 0 !important;
  top: auto !important;
  width: 22%;
  max-width: 120px;
  min-width: 60px;
  transform: rotate(0deg) translateY(0px) !important;
  z-index: 3; 
}

.book4 { 
  left: 50% !important; /* Continue spreading right */
  bottom: 0 !important;
  top: auto !important;
  width: 22%;
  max-width: 120px;
  min-width: 60px;
  transform: rotate(6deg) translateY(5px) !important;
  z-index: 2; 
}

.book5 { 
  left: 65% !important; /* End on right */
  bottom: 0 !important;
  top: auto !important;
  width: 22%;
  max-width: 120px;
  min-width: 60px;
  transform: rotate(12deg) translateY(10px) !important;
  z-index: 1; 
}
    }

  .firstsection {
    flex-direction: column;
    align-items: center;
  }

  /* Adjust books for mobile */
  .books-grid {
    height: 140px;
  }

  .book-img {
    width: 70px;
    height: 110px;
  }

  .book1 { left: 5px; }
  .book2 { left: 45px; }
  .book3 { left: 85px; }
  .book4 { left: 125px; }
  .book5 { left: 165px; }

#reachmesection {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 60px auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Mobile responsive */
@media (max-width: 768px) {
  #boxy3 {
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto 15px auto;
  }

  .food-img {
    width: 35px;
    height: 35px;
  }

  .verse-card {
    max-width: 200px;
    padding: 15px 20px;
  }
  
  .verse-card .sectiontitle {
    font-size: 14px;
  }
}

/* ====================================
   MOBILE RESPONSIVE FIXES
   Add these rules to your styles.css
==================================== */

@media (max-width: 768px) {
  
  /* 1. REMOVE HOVER IMAGES ON MOBILE */
  #hover-images {
    display: none !important;
  }
  
  #image {
    cursor: default;
  }
  
  #mypicture:hover #hover-images {
    opacity: 0;
    visibility: hidden;
  }
  
  #contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
  }
  
  #contacts .subtext,
  #contacts .link-item {
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;  /* ← CHANGE THIS NUMBER to control spacing */
    margin: 0;
  }
  
  /* Remove border from last item */
  #contacts .subtext:last-child,
  #contacts .link-item:last-child {
    border-bottom: none;
  }

  
  /* Hide the copy button on mobile */
  .copy-email-btn {
    display: none !important;
  }
  
  /* Show the desktop copy icon on mobile too */
  .copy-icon-desktop {
    display: inline-block !important;
    width: 16px;
    height: 16px;
  }
  
  /* Make sure link text is visible */
  .linktxt {
    display: inline-block !important;
    font-size: 15px;
  }
  
  /* Adjust subimage size */
  .subimage {
    width: 20px;
    height: 20px;
    object-fit: contain;
    padding: 0;
    margin: 0;
  }

  /* 3. CASE STUDY BANNERS - RESPONSIVE */
  .thumbnail {
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: 450px;
    border-radius: 20px;
    border: 4px solid white;
  }
  
  .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
  
  .work1 {
    margin-bottom: 30px;
    width: 100%;
  }
  
  #workssection {
    padding: 20px 0;
  }
  
  /* 4. CHAT CONTAINER - RESPONSIVE */
  .chat-container {
    max-width: 80%;
    width: 100%;
    padding: 15px 10px;
    margin-left: auto;
    margin-right: auto;
    gap: 15px;
  }
  
  .chat-message {
    width: 100%;
  }
  
  .message-bubble {
    max-width: 85%;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
  }


  
  .avatar {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
  }
  
  .timestamp {
    font-size: 11px;
    bottom: 3px;
    right: 8px;
  }
  
  
  .link {
    font-size: 15px;
  }
  
  #flower-logo {
    width: 35px;
    height: 35px;
  }
  
  /* Hero section */
  #wholebody {
    margin-top: 80px;
    padding: 0 15px;
  }
  
  #sectionspacehero {
    margin-top: 20px;
  }
  
  .Topper {
    padding: 5px;
  }
  
  /* Avatar on top, name below */
  #Myname {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 15px;
  }
  
  #image {
    width: 50px;
    height: 50px;
  }
  
  .headertxt2 {
    font-size: 40px;
    letter-spacing: 0.5px;
    margin: 0;
  }
  
  .bodytxt {
    font-size: 16px;
    line-height: 26px;
    margin-top: 15px;
  }
  
  /* Section spacing */
  .sectionspacework {
    margin-top: 40px;
  }
  
  .sectionspace {
    margin-top: 40px;
  }
  
  /* Header text */
  .header3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  /* Footer */
  #footer {
    padding: 10px 20px 6px 20px;
  }
  
  #footerleft,
  #footerright {
    font-size: 14px;
  }
}

/* Extra small devices (phones, 375px and down) */
@media (max-width: 375px) {
  .headertxt2 {
    font-size: 28px;
  }
  
  .bodytxt {
    font-size: 15px;
    line-height: 24px;
  }
  
  #navlinks {
    gap: 15px;
  }
  
  .link {
    font-size: 14px;
  }
  
  .thumbnail {
    min-height: 180px;
    max-height: 250px;
  }
  
  .message-bubble {
    max-width: 90%;
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  /* 2. CONTACTS - VERTICAL STACK, NO BUTTON */
  #contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
  }
  
  /* Target the <a> wrapper AND the .subtext inside */
  #contacts a.link-item {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
  }
  
  /* Reset ALL contact items */
  #contacts .subtext {
    width: 100%;
    padding: 8px 0;  /* ← Controls spacing */
    margin: 0;
    border: none;
  }}

/* newfix */
@media (max-width: 768px) {
  /* Remove ALL default link styling */
  #contacts a.link-item {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Make all subtexts identical */
  #contacts .subtext {
    width: 100%;
    padding: 10px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px; /* Force same height */
  }
  
  /* Normalize the text */
  #contacts .linktxt {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }
  
  /* Normalize icons */
  #contacts .subimage,
  #contacts .copy-icon-desktop {
    margin: 0 !important;
    flex-shrink: 0;
  }
}

/* ABOUT ME PAGE */
#Hero .headertxt {
  text-align: left;
}

#Hero #Myname {
  text-align: left;
  display: block;
}

#Hero .headertxt .typing-cursor {
  display: inline-block;
}
        .card-stack {
            position: relative;
            width: 200px;
            height: 140px;
            perspective: 1000px;
        }

        .verse-card {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: transform 0.5s ease-out, box-shadow 0.3s ease;
            cursor: pointer;
            user-select: none;
        }
        
        .verse-card.active {
            transform: translate(0px, 0px) rotate(0deg) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        .verse-card:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
            transform: scale(1.02);
        }
        
        .verse-card.active:hover {
            transform: translate(0px, 0px) rotate(0deg) scale(1) !important;
        }

        .verse-text {
            font-size: 13px;
            line-height: 1.4;
            color: #2d3748;
            margin-bottom: 12px;
            font-weight: 500;
        }

        .verse-reference {
            font-size: 11px;
            color: #718096;
            font-style: italic;
        }

        /* Color variations - applied via data attribute */
          .verse-card[data-color="1"] {
              background-color: #ffeaa7; /* solid yellow */
          }

          .verse-card[data-color="2"] {
              background-color: #fab1a0; /* solid pink */
          }

          .verse-card[data-color="3"] {
              background-color: #a29bfe; /* solid purple */
          }

          .verse-card[data-color="4"] {
              background-color: #55efc4; /* solid green */
          }

          .verse-card[data-color="5"] {
              background-color: #81ecec; /* solid cyan */
          }

          .verse-card[data-color="6"] {
              background-color: #dfe6e9; /* solid gray */
          }


        /* Fixed scattered positions - these NEVER change */
        .verse-card:nth-child(1) {
            transform: translate(0px, 0px) rotate(-3deg);
            z-index: 6;
        }

        .verse-card:nth-child(2) {
            transform: translate(-40px, 30px) rotate(12deg);
            z-index: 5;
        }

        .verse-card:nth-child(3) {
            transform: translate(45px, 35px) rotate(-15deg);
            z-index: 4;
        }

        .verse-card:nth-child(4) {
            transform: translate(-35px, -25px) rotate(8deg);
            z-index: 3;
        }

        .verse-card:nth-child(5) {
            transform: translate(50px, -20px) rotate(-10deg);
            z-index: 2;
        }

        .verse-card:nth-child(6) {
            transform: translate(15px, 55px) rotate(5deg);
            z-index: 1;
        }

        /* Hover hint */
        .hover-hint {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #818181;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
        }
      }

/* ====================================
   MOBILE RESPONSIVE FIXES
==================================== */

@media (max-width: 768px) {
  /* Add space between navbar and content */
  #wholebody {
    margin-top: 180px; /* Space below navbar */
    padding: 0 20px;
  }

  #sectionspacehero {
    margin-top: 20px; /* Reduce top margin on mobile */
  }

  /* BOOKS BOX - Keep overlap style but bigger and spread out */
  #boxy1 {
    width: 100%;
    max-width: 350px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between header and books */
    padding: 15px 0 15px 0; /* Top and bottom padding */
  }

  .books-grid {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align books to bottom */
    height: 140px; /* THIS controls height of books area */
    width: 100%;
  }

  .book-img {
    width: 75px !important;
    height: 115px !important;
  }

  /* Position books with overlap - more spread out and VISIBLE */
  .book1 { 
    left: 5% !important; /* Far left */
    bottom: 0 !important; /* Use BOTTOM instead of TOP */
    top: auto !important; /* Reset top */
    transform: rotate(-12deg) !important;
    z-index: 5; 
  }

  .book2 { 
    left: 22% !important;
    bottom: 10px !important; /* Slightly raised */
    top: auto !important;
    transform: rotate(4deg) !important;
    z-index: 4; 
  }

  .book3 { 
    left: 39% !important; /* Center */
    bottom: 15px !important; /* More raised */
    top: auto !important;
    transform: rotate(-6deg) !important;
    z-index: 3; 
  }

  .book4 { 
    left: 56% !important;
    bottom: 10px !important;
    top: auto !important;
    transform: rotate(8deg) !important;
    z-index: 2; 
  }

  .book5 { 
    left: 73% !important; /* Far right */
    bottom: 0 !important;
    top: auto !important;
    transform: rotate(-4deg) !important;
    z-index: 1; 
  }

  .sectiontitle {
    margin-bottom: 0; /* No extra margin */
    padding: 0 20px; /* Side padding for text */
  }

  /* ANIME BOX - Text at top, cards at bottom */
  #boxy4 {
    width: 100%;
    max-width: 350px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between header and cards */
    padding: 15px 0 15px 0; /* Top and bottom padding */
  }

  .sectiontitle2 {
    margin: 0; /* No extra margin */
    padding: 0 20px; /* Side padding for text */
    align-self: flex-start; /* Keep at top */
  }

  #boxy4 .anime-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* Align cards to bottom */
    justify-content: center;
    gap: 0;
  }

  #boxy4 #anime-card1 img,
  #boxy4 #anime-card2 img,
  #boxy4 #anime-card3 img,
  #boxy4 #anime-card4 img,
  #boxy4 #anime-card5 img {
    width: 70px !important;
    height: 115px !important;
    border-radius: 8px;
    margin-left: -14px !important;
  }

  /* Fan-style rotation for anime cards */
  #boxy4 #anime-card1 img { 
    margin-left: 0 !important; 
    transform: rotate(-8deg) !important;
    z-index: 5; 
  }
  
  #boxy4 #anime-card2 img { 
    transform: rotate(-4deg) !important;
    z-index: 4; 
  }
  
  #boxy4 #anime-card3 img { 
    transform: rotate(0deg) !important;
    z-index: 3; 
  }
  
  #boxy4 #anime-card4 img { 
    transform: rotate(4deg) !important;
    z-index: 2; 
  }
  
  #boxy4 #anime-card5 img { 
    transform: rotate(8deg) !important;
    z-index: 1; 
  }

  /* Other mobile adjustments */
  .firstsection {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  #boxy2, #boxy3 {
    width: 100%;
    max-width: 350px;
  }

  /* Navbar mobile spacing */
  #navbar {
    padding: 12px 20px;
  }

  #navlinks {
    gap: 25px;
  }

  .link {
    font-size: 15px;
  }

  #flower-logo {
    width: 35px;
    height: 35px;
  }

  /* Hero section mobile */
  .headertxt {
    font-size: 32px;
  }

  .boytxt {
    font-size: 15px;
    line-height: 26px;
  }

  #subtxt {
    font-size: 18px;
  }

  /* Footer mobile */
  #footer {
    padding: 10px 20px 6px 20px;
  }

  #footerleft, #footerright {
    font-size: 14px;
  }
}

.verse-image{
  width: 250px;
  height: 250px;

}

/* Extra small devices */
@media (max-width: 375px) {
  .book-img {
    width: 60px !important; /* Keep decent size on tiny screens */
    height: 95px !important;
  }

  #boxy4 #anime-card1 img,
  #boxy4 #anime-card2 img,
  #boxy4 #anime-card3 img,
  #boxy4 #anime-card4 img,
  #boxy4 #anime-card5 img {
    width: 60px !important;
    height: 100px !important;
    margin-left: -12px !important;
  }
}


  /* Hide default cursor */
body, body * {
  cursor: none !important;
}

/* Custom circular cursor */
.custom-cursor {
  width: 10px;
  height: 10px;
  background: black;
  border: 2px solid black;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-width 0.2s ease;
}

/* Masonry grid container */
#workssection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 40px;
}
#workssection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 40px;
}

#workssection .header3 {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;
}

/* Loading indicator */
.loading-indicator {
  text-align: center;
  padding: 40px;
  font-family: 'Neue Montreal', sans-serif;
  color: #818181;
  font-size: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #59B9FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px auto;
}





/* Works Section - Breaks out of container and centered */
.columns-section {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  
  /* Break out of parent container */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  
  padding: 40px 20px;
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  max-width: 380px; /* Limit column width so they fit nicely */
}

/* Box Styles */
.column-box1, .column-box2, .column-box3 {
  border: 6px solid white;
  border-radius: 24px;
  padding: 0;
  transition: transform 0.3s ease, opacity 0.6s ease;
  cursor: pointer;
  position: relative; /* ADD THIS - it's the parent container */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.column-box1 {
  height: 250px;
}

.column-box2 {
  height: 400px;
}

.column-box3 {
  height: 300px;
}

.column-box1:hover,
.column-box2:hover,
.column-box3:hover {
  transform: translateY(-10px); /* Lift up by 10px */
  /* No box-shadow on hover */
}

/* Text Styles */
.column-box1 h3,
.column-box2 h3,
.column-box3 h3 {
  font-family: 'Recoletta', serif;
  font-size: 24px;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Desktop heights - keep existing */
.column-box1 { height: 250px; }
.column-box2 { height: 400px; }
.column-box3 { height: 300px; }

/* Mobile heights with variations */
@media (max-width: 768px) {
  /* Default mobile heights */
  .column-box1 { height: 250px; }
  .column-box2 { height: 340px; }
  .column-box3 { height: 300px; }
  
  /* Add these size classes */
  .box-short { height: 220px !important; }
  .box-medium { height: 280px !important; }
  .box-tall { height: 360px !important; }
  .box-extra-tall { height: 400px !important; }
}

/* ===== MOBILE RESPONSIVE - SINGLE COLUMN ===== */
@media (max-width: 768px) {
  .columns-section {
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    gap: 20px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0;
    position: static;
  }
  
  .column {
    width: 100%;
    max-width: 350px; /* This centers them! */
  }
  
  .column-box1,
  .column-box2,
  .column-box3 {
    height: 300px;
    width: 100%;
    max-width: 330px; /* Max width for mobile boxes */
    margin: 0 auto;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .columns-section {
    padding: 20px 15px;
    gap: 15px;
  }
  
  .column-box1,
  .column-box2,
  .column-box3 {
    height: 180px;
    padding: 20px;
    max-width: 100%; /* Full width on very small screens */
  }
  
  .column-box1 h3,
  .column-box2 h3,
  .column-box3 h3 {
    font-size: 18px;
  }
}

/* Custom cursor for case study boxes */
.case-study-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.case-study-cursor.active {
  opacity: 1;
}

.cursor-content {
  background: rgba(0, 0, 0, 0.9);
  padding: 12px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.eye-icon {
  flex-shrink: 0;
}

.cursor-text {
  color: white;
  font-family: 'Neue Montreal', sans-serif;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
}

/* Case study boxes - NO LIFT on hover */
.case-study-box:hover {
  transform: none !important; /* Override the lift */
  cursor: none !important; /* Hide default cursor */
}

/* Regular boxes - KEEP LIFT on hover */
.column-box1:not(.case-study-box):hover,
.column-box2:not(.case-study-box):hover,
.column-box3:not(.case-study-box):hover {
  transform: translateY(-10px) !important;
}

/* Mobile - hide custom cursor */
@media (max-width: 768px) {
  .case-study-cursor {
    display: none;
  }
  
  .case-study-box:hover {
    cursor: pointer !important;
  }
}
/* Custom cursor for case study boxes */
.case-study-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.case-study-cursor.active {
  opacity: 1;
}

.cursor-content {
  background: rgba(0, 0, 0, 0.9);
  padding: 12px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.eye-icon {
  flex-shrink: 0;
}

.cursor-text {
  color: white;
  font-family: 'Neue Montreal', sans-serif;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
}

/* Case study boxes - NO LIFT on hover */
.case-study-box:hover {
  transform: none !important;
  cursor: none !important;
}

/* Regular boxes - KEEP LIFT on hover */
.column-box1:not(.case-study-box):hover,
.column-box2:not(.case-study-box):hover,
.column-box3:not(.case-study-box):hover {
  transform: translateY(-10px) !important;
}

/* Mobile - hide custom cursor */
@media (max-width: 768px) {
  .case-study-cursor {
    display: none;
  }
  
  .case-study-box:hover {
    cursor: pointer !important;
  }
}

/* GIF background */
.bg-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay image */
/* Overlay image - applies to all boxes */
.column-box1 .box-overlay,
.column-box2 .box-overlay,
.column-box3 .box-overlay {
  position: relative;
  z-index: 2;
  width: 85%;
  margin: auto;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

.column-box1 .box-overlay {
  position: absolute; /* Changed from relative to absolute */
  z-index: 2;
  width: 120%; /* Made it larger */
  bottom: 0; /* Position from bottom */
  right: 10px; /* Position from right */
  transform: none; /* Remove the centering transform */
  margin: 0; /* Remove auto margin */
}

.column-box2 .box-overlay {
  position: relative;
  z-index: 2;
  width: 75%;
  margin: auto;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  padding-top: 220px; /* Push it down by 40px */
}