/* Define EB Garamond locally */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-500-latin.woff2') format('woff2');
}


@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/webfonts/fa-solid-900.woff2") format("woff2"),
       url("/assets/webfonts/fa-solid-900.ttf") format("truetype");
}


/* short_xx made the hover field for the texts longer */

#short_home {
  width: 400%;
  min-height: 50px;
  padding: 100px 0 100px 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  /* border: 2px solid yellow; */

}

#short_tech_and_taw{
  width: 250%;
  min-height: 50px;
  padding: 100px 0 100px 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  /* border: 2px solid yellow; */

}

#short_ai{
  width: 200%;
  min-height: 50px;
  padding: 100px 0 100px 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  /* border: 2px solid yellow; */

}


.slider-image {
  filter: brightness(80%) !important;
  /* opacity: 1.0 !important; */
}


.custom-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;  
}

.link-logo {
  display: inline-block;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 1.00));
}

/* .custom-margin {
  margin-left: auto !important;
  margin-bottom: -3px !important;
} */

/* Hide the centered text by default */

/* Ensure nav-list is positioned correctly */
.nav-list {
  display: none; /* Hidden by default */
  transition: opacity 0.3s ease;
  opacity: 0;
}

.nav-list.active {
  display: block; /* Show when active */
  opacity: 1;
}

/* Style for the centered text container */
.centered-text {
  position: absolute; /* Overlay on top of other content */
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it’s above other elements */
  pointer-events: none; /* Allows clicks to pass through to links below if needed */
}

/* Style for the text itself */
.menu-centered-text {
  font-size: 2rem; /* Adjust size as needed */
  font-weight: bold;
  text-align: center;
  margin: 0;
  color: white; /* Already set in HTML, but included here for clarity */
  
}

/* .custom-info {
font-size: 30px !important;
margin-top: -100px !important;
top: -100px !important;
z-index: 1000 !important;
} */

.tags.open-text {
    margin-top: -100px !important; /* Move "Clothing & Law" 50px upwards */
}

.custom-info {
  /*font-size: 30px !important;  Increase the font size to make "Style, Clothing" bigger */
  font-size: clamp(18px, 1.6vw, 30px) !important;
}

/* Default state for all tags links */
.zlides-texts .swiper .swiper-slide .project-data .tags a {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translate(10%, 100%) rotateZ(5deg);
  transition: opacity 0.15s linear, transform 0.15s ease;
}

/* Show tags links on active slide by default */
.zlides-texts .swiper .swiper-slide-active .project-data .tags a {
  opacity: 1;
  transform: translate(0%, 0%) rotateZ(0deg);
}

/* Ensure tags container is visible on active slide */
.zlides-texts .swiper .swiper-slide-active .project-data .tags {
  opacity: 1;
}

.intro {
  max-width: 1000px; /* Limits the width of the text block */
  text-align: left; /* Centers the text within the constrained width */
  margin: 0 auto; /* Ensures the element itself is centered (optional, since flexbox handles this) */
  line-height: 1.5; /* Improves readability if the text wraps */
  
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .intro {
      max-width: 90%; /* Use a percentage for smaller screens */
  }
}

@media (max-width: 576px) {
  .intro {
      max-width: 95%;
      font-size: 1.5rem; /* Optionally reduce font size for mobile */
  }
}


/* Your existing class */
.narrow-text {
  max-width: 1000px;
  text-align: left;
  margin: 0 auto;
  line-height: 1.5;
  display: inline-block;
  font-family: 'EB Garamond', serif; /* EB Garamond with serif fallback */
  color: #D4AF37; /* Muted gold for a Renaissance look */
  font-weight: 500; /* Medium weight */
}

.text-signature-container {
  text-align: center; /* Centers the entire container (text and signature) on the screen */
  display: inline-block; /* Ensures the container wraps as a unit */
  background: url('') center center / cover;
  padding: 20px; /* Add padding to frame the content */
  width: 1200px;
  
}

.signature {
  margin-top: 20px;
  text-align: center;
  /* background: linear-gradient(rgba(245, 245, 220, 0.1), rgba(245, 245, 220, 0.1)); */
  padding: 10px 20px; /* Frame the signature */
}

.signature img {
  max-width: 500px;
  height: auto;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3));
}

@media (max-width: 768px) {
  .narrow-text {
      max-width: 90%;
  }
  .signature img {
      max-width: 400px; /* Smaller size for tablets */
  }
}

@media (max-width: 576px) {
  .narrow-text {
      max-width: 95%;
      font-size: 1.5rem;
  }
  .signature img {
      max-width: 350px; /* Smaller size for mobile */
  }
}


.dot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(black 8%, transparent 9%);
  background-size: 3px 3px; /* Adjust for dot density */
  pointer-events: none;
  opacity: 0.5; /* Adjust for the desired effect */
}

/* For SVG Icons */
.phone-icon, .email-icon {
  width: 16px; /* Adjust size */
  height: 16px;
  stroke-width: 1.5; /* Adjust thickness */
  margin-right: 8px; /* Space between icon and circle */
}

/* For Font Awesome */
.fas {
  font-size: 16px; /* Adjust size */
  margin-right: 8px; /* Space between icon and circle */
}

/* Ensure the hover effect works */
a[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  background: #00000000; /* Match your design */
  color: #fff;
  padding: 0px 0px;
  margin-left:50px;
  margin-top:-27px;
  border-radius: 4px;
  font-size: 16px;
  z-index: 99;
  white-space: nowrap;
}

.dark-overlay {
  position: relative;
  --overlay-opacity: 0.99; /* Start with a darker overlay (higher opacity) */
}

.dark-overlay::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  left: 0;
  opacity: var(--overlay-opacity); /* Use the custom property */
  z-index: 999;
  transition: opacity 12.00s linear; /* Transition the opacity */
}

li[data-follow-mouse=".7"] a i.fas.fa-phone {
  position: relative; /* Allows us to nudge the icon */
  left: 3px; /* Moves the icon 2 pixels to the right */
  top: -4px; /* Moves the icon 1 pixel down */
}

li[data-follow-mouse=".7"] a i.fas.fa-envelope {
  position: relative; /* Allows us to nudge the icon */
  left: 3px; /* Moves the icon 2 pixels to the right */
  top: -3px; /* Moves the icon 1 pixel down */
}

.audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #222;
    color: white;
    padding: 4px 12px;      /* reduced top/bottom padding */
    display: flex;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    min-height: 36px;       /* ensure a minimal, shorter height */
    background: rgba(34, 34, 34, 0.4);  /* 0.7 = 70% opaque, increase/decrease for more/less transparency */
}

.controls {
    display: flex;
    align-items: center;
    margin-right: 10px;     /* less margin */
    flex-shrink: 0;
}

.nav-btn, .play-btn {
    background: #4CAF50;
    border: none;
    color: white;
    padding: 4px 8px;      /* less padding */
    border-radius: 50%;
    cursor: pointer;
    margin: 0 3px;         /* less margin */
    font-size: 15px;       /* slightly reduced font */
    width: 28px;           /* smaller button */
    height: 28px;          /* smaller button */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px 2px #4CAF50;
}

.nav-btn:hover, .play-btn:hover {
    background: #45a049;
}

.nav-btn:disabled {
    background: #666;
    cursor: not-allowed;
}

.track-info {
    flex: 0 1 180px;         /* less wide */
    margin-left: 6px;        /* less margin */
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    min-width: 100px;
}

.track-title {
    font-size: 13px;         /* a little smaller */
    margin: 0 0 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    font-size: 11px;         /* smaller font */
    margin: 0 0 1px 0;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-indicator {
    font-size: 10px;         /* smaller */
    opacity: 0.7;
    margin: 0;
    white-space: nowrap;
}

.audio-controls {
    flex: 1;
    min-width: 220px;        /* less than before */
    display: flex;
    align-items: center;
    gap: 7px;                /* smaller gap */
}

.time-display {
    font-size: 10px;
    min-width: 40px;
    text-align: right;
}

.progress-container {
    flex: 1;
    height: 6px;        /* less height */
    background: #444;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.progress-bar {
    height: 100%;
    background: #4CAF50;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 60px;    /* less width */
}

.volume-slider {
    flex: 1;
    height: 6px;        /* less height */
    background: #444;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

/* Thumb size for range inputs */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;        /* smaller thumb */
    height: 10px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

audio {
    display: none; /* Hide the native audio element */
}