html{
   scroll-behavior: smooth;
}


button:focus,
a:focus,
.icon:focus {
  outline: none;
}

.home img{
    width: 100%;
    height:100%;
    object-fit: cover;
    position: relative;
    z-index:-1;
}

@media (min-width:900px){
.text{
    position: absolute;
    width:60%;
    max-width: 800px;
    padding: 0 3.5rem;
}
}

.line{
    width:100%;
    height:1.6px;
    background-image: linear-gradient(to right, rgb(183, 178, 178), black);
}

.text h2{
    font-size:clamp(0.8rem,2.5rem, 3.2rem);
    font-weight: 400;
    padding-bottom: 0.3rem;
    white-space: nowrap;
    margin-block-end: -2.5rem;
}

.text h3{
    font-size: 1.2rem;
    margin-block-end: -0.75rem;
    margin-block-start: 0.85rem;
}

.text h1{
    font-size:clamp(1.5rem, 3rem,4rem);
    margin-block-end: 0.75rem;
}

.text p{
    letter-spacing: 0.05rem;
    line-height: 1.5rem;
    width:95%;
    font-size: 0.95rem;
}

.text button{
    color: black;
    background-color: white;
    border-radius: 8rem;
    padding: 0.5rem 1rem;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    font-family:"Montserrat", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text button:hover{
    color: white;
    background-color: black;
    border: 2px solid white;
    cursor:pointer;
}

.up-arrow{
    color:black; 
    width:24px; 
    height:24px;
    margin-left:2px;
}

.text button:hover .up-arrow{
    color:white;
}


.proj-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  
  padding: 2rem;
  padding-top:4.5rem;
  box-sizing: border-box;
  gap:2rem;
  padding-left:4.5rem;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none;        /* Firefox */
}

.proj-wrap::-webkit-scrollbar {
  display: none;               /* Chrome, Safari */
}

/* BOX */
.box {
  flex: 0 0 auto;              
  width: min(22vw, 260px);     /* responsive width cap */
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background-color: black;

    width: 20rem;
    height:30rem;

  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.03);
  cursor: pointer;

}

/* IMAGE */
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity:0.7;
}

.report-text{
    display: flex;
    position: absolute;
    top:0;
    flex-direction: column;
    width:100%;
    height: 100%;
    padding:2rem;
    z-index:0;
    justify-content: space-between;
}

.box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;

  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.box:hover::before {
  opacity: 1;
}

/* GREEN TINT */
.g1::before {
  background: linear-gradient(
    to bottom,
    #82344d,
    black
  );
}

/* ORANGE / GOLD TINT */
.g2::before {
  background: linear-gradient(
    to bottom,
    #002e28,
    black
  );
}

/* BLUE TINT */
.g3::before {
  background: linear-gradient(
    to bottom,
    #3d0002,
    black
  );
}

/* PURPLE / PINK TINT */
.g4::before {
  background: linear-gradient(
    to bottom,
    #001030,
    black
  );
}

.g5::before {
  background: linear-gradient(
    to bottom,
    #62027d,
    black
  );
}

.g6::before {
  background: linear-gradient(
    to bottom,
    #562d1e,
    black
  );
}

.proj-wrap a{
  text-decoration: none;
  color:white;
}

.report-text p{
    visibility:hidden;
    line-height: 1.4rem;
}

.report-text:hover{
  position: absolute;
  visibility: visible;

  z-index: 2;
  padding:2rem;
}

.report-text:hover p{
    visibility: visible;
}

.report-text button{
    width:fit-content;
    padding:0;
    color:white;
    font-weight: bold;
    font-size: 1rem;
    margin-top:1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.5rem;
    background-color: transparent;
    border:none;
}

.report-text button:hover{
  transform: scale(1.1);
  cursor:pointer;
}


.proj-nav-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
    background-color: transparent;
    backdrop-filter: blur(5px);
    color: white;
    border: 2px solid white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: background 0.3s, transform 0.2s;
}

.home5{
  position:relative;
}

.proj-nav-btn:hover {
    backdrop-filter:blur(20px);
    border-color:olivedrab;
    transform: translateY(-50%) scale(1.1);
}

/* Ensure smooth scrolling when triggered by JS */
.proj-wrap {
    scroll-behavior: smooth;
}


.proj-wrap {
    display: flex;
    flex-wrap: nowrap;      /* Crucial: keeps boxes in one line */
    overflow-x: auto;       /* Allows horizontal scroll */
    scroll-behavior: smooth; /* Native smooth scroll */
    -webkit-overflow-scrolling: touch;
}

/* Make sure the links don't collapse */
.proj-wrap a {
    flex: 0 0 auto;         /* Prevents links from shrinking */
    display: block;
}