/* ===== Large Screens (≥ 1600px) ===== */
@media (min-width: 1600px){
  .image-banner{
    height: 85vh;
    min-height: 700px;
  }
}

/* ===== Desktop (≤ 1400px) ===== */
@media (max-width: 1400px){
  .image-banner{
    height: 75vh;
    min-height: 600px;
  }
}

/* ===== Laptop / Small Desktop (≤ 1200px) ===== */
@media (max-width: 1200px){
  .image-banner{
    height: 65vh;
    min-height: 520px;
  }
}

/* ===== Tablet (≤ 992px) ===== */
@media (max-width: 992px){
  .image-banner{
    height: 55vh;
    min-height: 450px;
  }
}

/* ===== Mobile (≤ 768px) ===== */
@media (max-width: 768px){
  .image-banner{
    height: 45vh;
    min-height: 380px;
  }
}

/* ===== Small Mobile (≤ 480px) ===== */
@media (max-width: 480px){
  .image-banner{
    height: 35vh;
    min-height: 300px;
  }
}



.hardware-section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
 
}

.hardware h1 {
  margin-bottom: 20px;
  font-size: 36px;
  color: #2f335e;
}
.hardware p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 920px;
  color: #2e2e2e;
  letter-spacing: 1px;
  position: relative; 
  display: inline-block;
  padding: 10px 15px;
  z-index: 2; 
  margin: 0 auto;
  background: transparent; 
}

/* Overlay */
.hardware p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: -1;
  border-radius: 5px;
}
/* Responsive for tablets and small screens */
@media (max-width: 992px) {
  .hardware h1 {
    font-size: 30px;
  }

  .hardware p {
    font-size: 19px;
    max-width: 500px;
    padding: 8px 12px;
  }
}

/* Responsive for mobile devices */
@media (max-width: 768px) {
  .hardware-section {
    padding: 40px 15px;
    flex-direction: column;
  }

  .hardware h1 {
    font-size: 26px;
  }

  .hardware p {
    font-size: 18px;
    max-width: 90%; 
    padding: 6px 10px;
  }
}

/* Extra small screens (phones) */
@media (max-width: 480px) {
  .hardware h1 {
    font-size: 22px;
  }

  .hardware p {
    font-size: 16px;
    line-height: 1.5;
    padding: 5px 8px;
  }
}


/* Intro section End*/


/* ================= Hardware Gallery ================= */

.hardware-gallery-section{
  padding: 14px 20px;
  background: #faf4bb;
}

.hardware-gallery{
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ================= LEFT BIG IMAGE ================= */

.left-image{
  position: relative;
  flex: 0 0 400px;
  height: 1370px;
  border-radius: 8px;
  overflow: hidden;
}

.left-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay */
.left-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.45),
    rgba(0,0,0,0)
  );
  display: flex;
  align-items: flex-end;
  padding: 30px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1),
              opacity 0.6s ease;
}

.left-overlay p{
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  max-width: 90%;
}

.left-image:hover .left-overlay{
  transform: translateY(0);
  opacity: 1;
}

/* ================= RIGHT GRID ================= */

.right-grid{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* Grid Item */
.grid-item{
  position: relative;          
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Image */
.grid-item img{
  width: 100%;
  height: 240px;
  object-fit: contain;
 
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

/* Smooth Zoom */
.grid-item:hover img{
  transform: scale(1.08);
}

/* Shine Effect */
.grid-item::after{
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 50%;
  height: 280px;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 179, 15, 0.55) 45%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.55) 55%,
    transparent 80%
  );
  transform: skewX(-20deg);
  opacity: 0;
}

.grid-item:hover::after{
  opacity: 1;
  animation: gridShine 1.2s cubic-bezier(0.22,1,0.36,1);
}

@keyframes gridShine{
  0%{ left: -140%; opacity: 0; }
  35%{ opacity: 1; }
  100%{ left: 140%; opacity: 0; }
}

/* Caption */
.grid-item span{
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 1200px){
  .left-image{ flex: 0 0 320px; height: 1100px; }
  .grid-item img,
  .grid-item::after{ height: 210px; }
}

/* Small Tablet */
@media (max-width: 992px){
  .hardware-gallery{ flex-direction: column; align-items: center; }
  .left-image{ width: 100%; max-width: 600px; height: 720px; }
  .grid-item img,
  .grid-item::after{ height: 200px; }
}

/* Mobile */
@media (max-width: 768px){
  .right-grid{ grid-template-columns: repeat(2, 1fr); }
  .left-image{ height: 650px; }
  .grid-item img,
  .grid-item::after{ height: 180px; }
}



/* Ultra-Wide Screens */
@media (min-width: 1800px){
  .left-image{ flex: 0 0 500px; height: 2000px; }
  .grid-item img,
  .grid-item::after{ height: 360px; }
  .grid-item span{ font-size: 18px; }
}



/* ===== MOBILE ONLY (≤480px) ===== */

@media (max-width: 480px){

  /*  Badi (left) image hide */
  .left-image{
    display: none;
  }

  /* Gallery normal flow me */
  .hardware-gallery{
    display: block;
  }

  /*  Choti images – 2 per row */
  .right-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
    width: 100%;
  }

  .grid-item img,
  .grid-item::after{
    height: 200px;
  }
}