@font-face {
  font-family: 'NMSGeoSans';
  src: url('fonts/NMSGeoSans_Kerned.ttf') format('truetype');
}

@font-face {
  font-family: 'Anurati';
  src: url('fonts/Anurati-Regular.otf') format('truetype');
}

@font-face {
  font-family: 'FenomenSans-Thin';
  src: url('fonts/FenomenSans-Thin.ttf') format('truetype');
}

.background-grid {
  position: relative;
  overflow: hidden;
  background-color: #fff3d0;
  z-index: -2
}

.dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: transform 0.2s ease-out;
  pointer-events: none;
  z-index: -1
}

/* Your main section */
.wrapper {
  height: 500px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: 0px; /* move closer to top by reducing this */
  z-index: 4;
}

/* Header style */
.header {
  font-family: 'NMSGeoSans', sans-serif;
  font-size: 7rem;
  color: #1f1230;
  text-align: center;
}

h1 {
  display: flex;
  justify-content: center;   /* horizontal centering */
  align-items: center;       /* vertical centering */
  height: 100vh;             /* full screen height */
  font-family: 'NMSGeoSans', sans-serif;
  font-size: 7rem;
  color: #1f1230;
  opacity: 0;
  transform: translateY(-10%);
  letter-spacing: normal;
  
  white-space: nowrap;
  text-align: center;
}

h2 {
  position: absolute;
  top: 100vh; /* Exactly one viewport height down (just under screen) */
  left: 50%;
  transform: translateX(-50%);
  
  font-family: 'NMSGeoSans', sans-serif;
  font-size: 6.5rem;
  color: #1f1230;
  opacity: 0;

  white-space: nowrap;
  text-align: center;
  z-index: 50;
}

.line {
  width: 0%; /* Start at 0% for animation */
  height: 4px;
  background-color: #1f1230; /* Match your heading color */
  margin: 0 auto;
  opacity: 0;
  transition: width 1s ease-out;
}

.line.line-visible {
  width: 800px;
}

#title-wrapper {
  position: relative;
  top: 100vh; /* Push below the full screen hero */
  text-align: center;
}

/* Layout */
.project-entry {
  display: flex;
  gap: 3.11vw;
  align-items: flex-start;
  margin-top: 50px;
  margin-left: -13vw;
}

.project-image {
  width: 33vw;
  object-fit: cover; /* ensures image fills box nicely */
  transform: translate(-7.45vw);

}

/* Right side content */
.project-content {
  max-width: 600px;
  margin-left: 6vh;
  margin-top: -55px;
  transform: translate(-0.54vw);

}

.project-heading {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #1f1230;
}

.project-description {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1f1230;
  margin-bottom: 3.24vh;
}

/* Glowing "more" button */
.more-button {
  padding: 10px 30px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #ff3b00;
  background: transparent;
  border: 2px solid #ff3b00;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  position: relative;
  box-shadow: 0 0 10px rgba(255, 59, 0, 0.4);
  width: 600px;
  transform: translate(13.25vw, -10.82vh);
}

.more-button:hover {
  background-color: #ff3b00;
  color: #fff3d0;
  box-shadow: 0 0 20px rgba(255, 59, 0, 0.7), 0 0 40px rgba(255, 59, 0, 0.5);
}

/* button */
.ui-button {
  background: transparent;
  border: none;
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  padding: 0;
  outline: none;
  overflow: visible;
  transform: translate(13.56vw, -11.58vh);
}
.ui-button__background {
  --gradient-background: #1f1230;
  align-items: center;
  background: var(--gradient-background);
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 1.8125rem 4rem 1.6875rem 4.25rem;
  position: relative;
  width: 39vw;
  height: 0.8vh;
}
.ui-button__background:after {
  background: var(--gradient);
  content: "";
  height: 100%;
  left: 0;
  mix-blend-mode: overlay;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
}
.ui-button__text {
  -webkit-text-fill-color: #fff3d0;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: all .2s ease-in-out;
  will-change: transform;
  z-index: 2;
  position: relative;
}
.ui-button__gradient {
  pointer-events: none;
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  height: 100%;
  opacity: 0.3;
  background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 100%);
  transform: translateX(-440px);
  transition: none;
  z-index: 1;
}
/* Optional: subtle glow on hover */
.ui-button:focus:before,
.ui-button:hover:before {
  opacity: 1;
  transform: rotate(0);
  transition: transform .3s cubic-bezier(.05,.87,.32,1.07),opacity .1s ease-out;
}

.ui-button:hover .ui-button__text {
  text-shadow: 0 0 8px rgba(255, 243, 208, 0.9),
               0 0 12px rgba(255, 243, 208, 0.7),
               0 0 16px rgba(255, 243, 208, 0.5);
  transition: text-shadow 0.3s ease;
}

.navbar {
  position: fixed;       /* stays at the top */
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;    /* larger at top */
  transition: padding 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar.shrink {
  padding: 10px 20px;    /* smaller after scroll */
}


.menu-bar nav {
  margin-left: 0;        /* remove any unwanted extra margin */
  padding-right: 20px;   /* add space from the right edge */
}


.links {
  transform: translateX(-5vw);
}


.navbar a {
text-decoration: none;
color: #333;
margin: 0 10px;
font-weight: bold;
}


.navbar a:hover {
color: #007bff;
}