/* Hero */
.about-hero-1 {
  position: relative;
  background: url('about.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
 height: 40vh;
  z-index: 0;
   display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center for the block */
  flex-direction: column;  /* h1 & p stacked */
}

/* Overlay */
.about-hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* adjust 0.6 -> lighter/darker overlay */
  z-index: -1; /* keeps text above overlay */
  
}

/* keep text on top */
.about-hero-1 * {
  position: relative;
  z-index: 1;
}

.about-hero-1 h1{
  font-size:3rem;
  margin-bottom:1rem;
  animation:fadeInUp 1s ease;
  color: #ffffff;
  

}
.about-hero-1 p{
  font-size:1.2rem;
  max-width:700px;
  margin:0 auto;
  animation:fadeInUp 1s ease .2s both;
  color: #ffffff;
}
/* 
* Mobile View - Text Size Fix */

//* Default: Laptop/Desktop */
.about-hero-1 h1 {
  font-size: 3rem;
}

/* Tablet view */
@media (max-width: 1023px) {
  .about-hero-1 h1 {
    font-size: 2rem;
  }
}

/* Mobile view */
@media (max-width: 767px) {
  .about-hero-1 h1 {
    font-size: 1.4rem;
  }
}


    /* Story */
    .story-section{max-width:1400px;margin:0 auto}
    .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:4rem}
    .story-content h2{font-size:3rem;color:#667eea;margin-bottom:1.5rem}
    .story-content p{font-size:1.1rem;margin-bottom:1rem;text-align:justify}
    .story-image{background: linear-gradient(135deg, #EAF3FF 0%, #D7E7FF 50%, #CFE3FA 100%);height:400px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:6rem;box-shadow:0 10px 30px rgba(0,0,0,.2)}
/* ========= STORY: mobile/tablet layout fix ========= */
@media (max-width: 1024px){          /* tablet & below */
  .story-grid{
    grid-template-columns: 1fr;      /* single column */
    gap: 2rem;
  }

  /* Order: text first, image second (for BOTH grids) */
  .story-grid > .story-content{ order: 1; }
  .story-grid > .story-image{   order: 2; }

  /* Center the text block */
  .story-content{
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .story-content p{
    text-align: center;             /* override your justify for small screens */
  }

  /* Tighter heading on smaller screens */
  .story-content h2{
    font-size: 2rem;
    margin-bottom: 1rem;
  
  }

  /* Image a bit shorter on small screens */
}

@media (max-width: 640px){           /* phones */
  .story-content h2{ font-size: 1.75rem; }

}



    /* NEW: Story Spotlight (attractive add-on) */
    .story-spotlight{
      position:relative;border-radius:18px;overflow:hidden;margin:10px 0 30px;
      background:
        linear-gradient(180deg, rgba(17,20,24,.55), rgba(17,20,24,.55)),
        var(--spotlight, url('images/furniture-spotlight.jpg')); /* ⬅️ replace with your image */
      background-size:cover;background-position:center
    }
    .spotlight-inner{padding:54px 20px;max-width:1200px;margin:0 auto;color:#fff;text-align:center}
    .spot-badge{display:inline-block;background:rgba(255,255,255,.14);backdrop-filter:saturate(120%) blur(6px);border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:999px;font-weight:700;margin-bottom:10px}
    .spotlight-inner h3{
      /* font-size:2rem; */
      margin:6px 0 8px}
    .spotlight-inner p{max-width:760px;margin:0 auto 14px;opacity:.95}
    .spot-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
    .btn{display:inline-block;padding:.85rem 1.6rem;border-radius:50px;font-weight:700;text-decoration:none;transition:.25s}
    .btn-primary{background:black;color:#fff}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(246,173,85,.35)}
    .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.7)}
    .btn-ghost:hover{background:rgba(255,255,255,.1)}
    .spot-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
    .spot-photo{border-radius:14px;overflow:hidden;height:180px;}
    .spot-photo img{width:100%;height:100%;object-fit:cover;display:block}
    /* Phone: horizontal swipe carousel */
/* Phone: fix – no horizontal scroll, same card size */
@media (max-width: 480px){
  .spot-strip{
    display: grid !important;          /* block/auto को override */
    grid-template-columns: 1fr;        /* एक-एक कार्ड नीचे */
    gap: 14px;
    overflow-x: hidden !important;     /* horizontal scroll off */
    padding-bottom: 0;
  }

  .spot-photo{
    height: 180px;                     /* वही size ताकि layout न टूटे */
    border-radius: 14px;
    overflow: hidden;
  }

  .spot-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* image crop ठीक रहे */
    display: block;
  }
}

  
}

    /* Values */
    .values-section{background:#f8f9fa;padding:2rem 2%}
    .values-container{max-width:1400px;margin:0 auto}
    .values-container h2{text-align:center;font-size:2.5rem;color:#667eea;margin-bottom:3rem}
    .values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
    .value-card{background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:.3s}
    .value-card:hover{transform:translateY(-10px);box-shadow:0 10px 30px rgba(102,126,234,.3)}
    .value-icon{font-size:3.5rem;margin-bottom:1rem}
    .value-card h3{font-size:1.5rem;color:#333;margin-bottom:1rem}
    .value-card p{color:#666;line-height:1.8}

    //* Stats Section */
.stats-section {
  padding: 5rem 5%;
  background: #F7E3CC;
}

.stats-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  text-align: center;
}

.stat-item {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: scale(1.05);
}

.stat-item h3 {
  font-size: 3rem;
  margin-bottom: .5rem;
  color: #222;
  font-weight: 700;
}

.stat-item p {
  font-size: 1.2rem;
  opacity: .9;
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-section {
    /* padding: 3rem 5%; */
  }
  
  .stat-item h3 {
    font-size: 2.5rem;
  }
  
  .stat-item p {
    font-size: 1rem;
  }
  
  .stats-container {
    gap: 2rem;
  }
}

    .team-section {
  text-align: center;
  padding: 48px 16px;
}

.team-section h2 {
  font-size: 2rem;
  margin-bottom: 24px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.team-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Circular image with perfect crop */
.team-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;            /* crops image nicely */
  display: block;
  margin: 0 auto 12px auto;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Text */
.team-card h3 {
  font-size: 1.1rem;
  margin: 8px 0 4px;
}

.team-card p {
  color: #666;
  font-size: 0.95rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-avatar { width: 112px; height: 112px; }
}