* {
  -webkit-tap-highlight-color: transparent;
}

/* Loader Styles */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease;
  pointer-events: all;
}

#loader img {
  max-width: 80vw;     /* adjust size for responsiveness */
  max-height: 80vh;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* #loader video {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  border: none;
  outline: none;
  box-shadow: none;
  pointer-events: none;
}

#loader video:focus {
  outline: none;
} */

/* Content Visibility Control */
#content {
  display: none;
  opacity: 0;
  transition: opacity 1s ease;
  padding: 0;
  background: #212121;
  min-height: 100vh;
  padding-top: 80px;
}

body.loading {
  overflow: hidden;
}

body.loaded #content {
  display: block;
  opacity: 1;
}

img {
  max-width: 100%;
  height: auto;
}

.image-wrapper {
  margin-top: 180px;
  position: relative;
  display: inline-block;
  -webkit-touch-callout: none;
}

.image-wrapper img {
  display: block;
}

/* Section Scroll Reveal */
section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
  margin-bottom: 40px;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

section:first-of-type img {
  filter: grayscale(100%) brightness(50%);
  transition: filter 0.8s ease-in-out;
  will-change: filter;
}

section:first-of-type img:hover {
  filter: grayscale(0%) brightness(100%);
}

section h2,
section p {
  color: #fff;
  text-align: center;
}

/* Titles */
h2.section-title {
  font-size: 3em;
  letter-spacing: 3px;
  margin-bottom: 30px;
  text-transform: uppercase;
  user-select: none;
  color: #ff9933;
}

.work h2 {
  font-size: 3em;
  letter-spacing: 3px;
  margin-bottom: 10px;
  text-transform: uppercase;
  user-select: none;
  color: #ff9933;
}

.why-us {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Use a shorter height */
  min-height: 50vh;
  padding: 40px 2vw;
  /* Smaller padding on all sides */
  margin-bottom: 0;
}

.why-us h2 {
  font-size: 2.5em;
  letter-spacing: 1.5px;
  margin-bottom: 5px;
  text-transform: uppercase;
  user-select: none;
  color: #ff9933;
  text-align: center;
}

.why-us p.about {
  max-width: 900px;
  width: 100%;
  font-size: 1.5em;
  line-height: 1.6;
  color: #fff;
  margin: 0 auto;
  text-align: justify;
  /* Ensures even edges left and right */
  text-align-last: center;
}


.carousel-wrapper {
  width: 100vw;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 auto;
}

.carousel-container {
  height: 70vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 170px;
  position: relative;
  will-change: transform;
  transition: transform 0.2s linear, opacity 0.2s linear;
  padding: 0 170px;
}


.carousel-item {
  flex: 0 0 auto;
  transition: filter 0.4s ease, transform 0.4s ease;
  margin: 0;
}

.carousel-item img {
  width: 70vw;
  height: 70vw;
  max-width: 250px;
  max-height: 250px;
  object-fit: cover;
  border-radius: 10px;
  filter: blur(2px);
  transition: transform 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}

.carousel-item img.zoomed-in-center {
  transform: scale(1.4);
  filter: blur(0);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

/* Flip-out animation for header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform-origin: top center;
  transition: background 0.4s ease, transform 0.7s ease, opacity 0.4s ease;
  backface-visibility: hidden;
}

header.light-header {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

header.turn-page {
  transform: perspective(800px) rotateX(-90deg);
  opacity: 0;
}

.process {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1000px;
  margin: auto;
}

.step {
  background: transparent;
  border-radius: 1.5rem;
  padding: 1.5rem 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
  border: none;
}

.step:hover,
.step.active {
  background: #666666;
  box-shadow: 0 8px 24px rgba(92, 92, 92, 0.05);
}

.step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  transition: all 0.6s ease;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #666666;
  border-radius: 50%;
  padding: 6px;
  transition: all 0.6s ease;
  z-index: 2;
  margin-left: 20px;
}

.icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-line-full {
  position: absolute;
  top: 65px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff9933;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.step .title {
  margin-top: 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #ff9933;
  ;
}

.step .desc {
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  margin-top: 0.5rem;
  color: white;
}

/* === Hover or Tap Triggered Animation === */
.step:hover .icon-container,
.step.active .icon-container {
  justify-content: center;
}

.step:hover .icon-wrapper,
.step.active .icon-wrapper {
  margin-left: 0;
}

.step:hover .icon-line-short,
.step.active .icon-line-short {
  opacity: 0;
}

.step:hover .icon-line-full,
.step.active .icon-line-full {
  transform: scaleX(1);
}


@keyframes glitch {
  0% {
    filter: grayscale(100%) brightness(50%) contrast(100%)
  }

  20% {
    filter: grayscale(80%) brightness(120%) contrast(150%) blur(1px)
  }

  40% {
    filter: grayscale(50%) brightness(150%) contrast(90%) hue-rotate(20deg)
  }

  60% {
    filter: grayscale(20%) brightness(130%) contrast(110%) blur(0.5px)
  }

  80% {
    filter: grayscale(0%) brightness(110%) contrast(100%)
  }

  100% {
    filter: grayscale(0%) brightness(100%) contrast(100%)
  }
}

@keyframes glitch-reverse {
  0% {
    filter: grayscale(0%) brightness(100%) contrast(100%)
  }

  100% {
    filter: grayscale(100%) brightness(50%) contrast(100%)
  }
}



@media print {
  body {
    display: none !important;
  }
}

/* ===============================
   RESPONSIVE TWEAKS (Fluid Shrink)
   =============================== */

/* iPad Landscape (1024px and below) */
@media (max-width: 1024px) {

  .image-wrapper {
    margin-top: 150px;
    height: 500px;
    margin-bottom: 15px;
    width: 100%
  }

  .image-wrapper img {
    height: 500px;
    width: 100%;
  }


  .why-us p.about {
    font-size: 1.3em;
    padding: 0 2vw;
  }

  .carousel-track {
    gap: 120px;
    padding: 0 120px;
  }

  .carousel-item img {
    max-width: 200px;
    max-height: 200px;
  }

  .work h2,
  h2.section-title {
    font-size: 2.5em;
  }

  .step .title {
    font-size: 1.4rem;
  }

  .step .desc {
    font-size: 1.1rem;
  }
}


/* Tablet Portrait + Smaller Tabs (768px and below) */
@media (max-width: 768px) {
  .why-us p.about {
    font-size: 1.5em;
    line-height: 1.5;
    padding: 0 4vw;
  }

  .carousel-track {
    gap: 80px !important;
    padding: 0 80px !important;
  }

  .carousel-item img {
    max-width: 180px !important;
    max-height: 180px !important;
  }

  .work h2,
  .why-us h2,
  h2.section-title {
    font-size: 2em;
  }

  .step .title {
    font-size: 1.2rem;
  }

  .step .desc {
    font-size: 1rem;
  }

  .icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .process {
    padding: 0 2vw;
  }

}


/* Mobile Phones (468px and below) */
@media (max-width: 468px) {

  .why-us h2,
  .work h2,
  h2.section-title {
    font-size: 1.5em;
    letter-spacing: 1px;
  }

  .why-us p.about {
    font-size: 1em;
    padding: 0 6vw;
  }

  .carousel-track {
    gap: 50px !important;
    padding: 0 50px !important;
  }

  .carousel-item img {
    max-width: 200px !important;
    max-height: 200px !important;
  }

  .step {
    padding: 1rem 0.5rem;
  }

  .step .title {
    font-size: 1rem;
  }

  .step .desc {
    font-size: 0.9rem;
  }

  .icon-wrapper {
    width: 36px;
    height: 36px;
  }

  .icon-line-full {
    top: 55px;
  }
}

/* 1024px and below (iPads) */
@media (max-width: 1024px) {
  .carousel-track {
    gap: 120px !important;
  }
}

/* 768px and below (Tablets + Mobile L) */
@media (max-width: 768px) {
  .carousel-track {
    gap: 80px !important;
  }
}

/* 468px and below (Mobile M) */
@media (max-width: 468px) {
  .carousel-track {
    gap: 50px !important;
  }
}

/* 360px and below (Mobile S / XS) */
@media (max-width: 360px) {
  .carousel-track {
    gap: 40px !important;
  }
}

/* 320px and below (Tiny screens) */
@media (max-width: 320px) {
  .carousel-track {
    gap: 30px !important;
  }
}

/* Fine-tuned spacing for smaller screens */
@media (max-width: 768px) {
  .image-wrapper {
    margin-top: 100px;
    height: 250px;
    margin-bottom: 20px;
  }

  .image-wrapper img {
    height: 300px;
  }

  .why-us {
    padding: 20px 4vw;
    min-height: 40vh;
    margin-bottom: 10px;
  }

  .carousel-wrapper {
    margin-top: 0;
    margin-bottom: 26px;
  }

  .process {
    margin-top: 20px;
    padding-bottom: 40px;
  }
}

@media (max-width: 468px) {
  .image-wrapper {
    margin-top: 80px;
    height: 150px;
    margin-bottom: 15px;
  }

  .image-wrapper img {
    height: 200px;
  }

  .why-us {
    padding: 20px 6vw;
    min-height: 40vh;
    margin-bottom: 20px;
  }

  .carousel-wrapper {
    margin-top: 0;
    margin-bottom: 30px;
  }

  .process {
    margin-top: 15px;
    padding-bottom: 30px;
  }
}

@media (max-width: 360px) {
  .image-wrapper {
    margin-top: 60px;
  }

  .why-us {
    padding: 10px 6vw;
    min-height: 20vh;
    margin-bottom: 10px;
  }

  .carousel-wrapper {
    margin-bottom: 20px;
  }

  .process {
    margin-top: 10px;
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .image-wrapper {
    margin-bottom: 40px;
  }

  .why-us {
    margin-bottom: 10px;
  }

  .carousel-wrapper {
    margin-bottom: 40px;
  }

  .process {
    margin-bottom: 40px;
  }

  footer {
    margin-top: 40px;
  }
}

@media (max-width: 468px) {
  .image-wrapper {
    margin-bottom: 30px;
  }

  .why-us {
    margin-bottom: 10px;
  }

  .carousel-wrapper {
    margin-bottom: 30px;
  }

  .process {
    margin-bottom: 30px;
  }

  footer {
    margin-top: 30px;
  }
}

@media (max-width: 360px) {
  .image-wrapper {
    margin-bottom: 25px;
  }

  .why-us {
    margin-bottom: 15px;
  }

  .carousel-wrapper {
    margin-bottom: 25px;
  }

  .process {
    margin-bottom: 25px;
  }

  footer {
    margin-top: 25px;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .image-wrapper {
    width: 100vw;
    height: auto;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    margin-top: 30px;
  }

  .image-wrapper img {
    content: url('../images/vertical_grid.webp');
    width: 95vw;
    /* wider but not touching screen edges */
    height: auto;
    /* maintain aspect ratio */
    object-fit: contain;
    /* show full image without cropping */
    display: block;
  }
}

@media (max-width: 768px) {
  .carousel-wrapper {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .carousel-container {
    height: 45vh;
    /* or 50vh — shrink height */
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 468px) {
  .carousel-wrapper {
    margin-top: 5px;
    margin-bottom: 15px;
  }

  .carousel-container {
    height: 42vh;
    /* or adjust for tighter screens */
  }
}