@import url(global.css);

.bg {
  background: linear-gradient( 
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.7)
    ),
    url(images/5.jpg);
  background-size: cover;
}

.global-header .logo {
  background-image: url(images/logo-white.svg);
}

.global-header a {
  color: white;
}

.global-header a::after {
  background-color: white;
}

.hero {
  display: flex;
  flex-direction: row-reverse;
}

.hero h1 {
  text-align: right;
  margin-top: 8vh;
  padding-right: 2rem;
  color: white;
  font-weight: 300;
  width: 40ch;
  font-size: 2.5vw;
}

.hero h1::first-letter {
  font-size: 3vw;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 8vh 2vw;
  column-gap: 10vw;
}

.projects a {
  background-color: white;
  /* border-radius: 1rem; */
  height: 35vh;
  overflow: hidden;
  background-size: cover;
  position: relative;
  transition: transform 200ms var(--animation-timing-function);
  border: 1vh solid white;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.projects a:nth-child(3n + 1) {
  transform-origin: left center;
}

.projects a:nth-child(3n + 2) {
  transform-origin: center center;
}

.projects a:nth-child(3n) {
  transform-origin: right center;
}

.projects a:hover {
  transform: scale(1.2);
}

.projects a p {
  letter-spacing: 0.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
  font-size: 2vw;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding-block: 1vh;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.projects a[href*="jewar"] {
  background-image: url(images/jewar.avif);
}

.projects a[href*="dholera"] {
  background-image: url(images/dholera.webp);
}

.projects a[href*="rudrapur"] {
  background-image: url(images/rudrapur.webp);
}

.projects:has(a:hover) a:not(:hover) {
  filter: grayscale(1);
}