/* ==========================================================================
   responsive.css — ScaleWthUs
   All media queries for tablet and mobile breakpoints
   ========================================================================== */

/* ===== TABLET — max-width: 1024px ===== */
@media (max-width: 1024px) {
  #hero .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* Multi-column → 2-column */
  .services-grid,
  .work-grid,
  .blog-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Client domains: 5 → 3 */
  .client-domains {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Team: 4 → 2 */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 4 → 2 */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Hide hero badge cards / right-hand logo on smaller screens */
  .hero-badge,
  .hero-logo-right {
    display: none;
  }
}

/* ===== MOBILE — max-width: 768px ===== */
@media (max-width: 768px) {
  /* Navigation: hide links, show hamburger */
  .nav-links,
  .nav-cta {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  /* All grids → single column */
  .services-grid,
  .work-grid,
  .blog-grid,
  .testimonials-grid,
  .client-domains {
    grid-template-columns: 1fr;
  }

  /* Two-column layouts → single column */
  .wwd-grid,
  .why-grid,
  .about-grid,
  .contact-grid,
  .quote-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Team: keep 2-column on mobile */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Gallery: 2-column on mobile, reset spans */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    grid-column: span 1;
  }

  /* Footer: full single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Hero stats: wrap on small screens */
  .hero-stats {
    gap: 24px;
    flex-wrap: wrap;
  }

  /* Quote form: single column inputs */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Why visual: keep 2-column */
  .why-visual {
    grid-template-columns: 1fr 1fr;
  }
  .why-stat-card:first-child {
    grid-column: span 2;
  }

  /* Chatbot: narrower on mobile */
  #chatbot-window {
    width: 320px;
    right: 16px;
  }

  /* Reduce section vertical padding */
  .section {
    padding: 64px 0;
  }

  /* Ticker font */
  .ticker-item {
    font-size: 12px;
  }

  /* Blog header spacing */
  .blog-grid {
    gap: 16px;
  }
}

/* ===== SMALL MOBILE — max-width: 480px ===== */
@media (max-width: 480px) {
  /* Team: single column on very small screens */
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery: single column */
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    grid-column: span 1;
  }

  /* Hero CTA buttons: full width */
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Chatbot: full width minus margins */
  #chatbot-window {
    width: calc(100vw - 32px);
    right: 16px;
  }

  /* Footer: hide extra columns */
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   gallery.css — ScaleWthUs
   Bento-style asymmetric grid for the Work Gallery section
   ========================================================================== */

#gallery { position: relative; }

/* ===== BENTO GRID ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(160px, auto));
  grid-template-areas:
    "one  one   two    three"
    "one  one   four   five"
    "six  seven seven  eight"
    "nine seven seven  ten";
  gap: 16px;
}

.gi-1  { grid-area: one; }
.gi-2  { grid-area: two; }
.gi-3  { grid-area: three; }
.gi-4  { grid-area: four; }
.gi-5  { grid-area: five; }
.gi-6  { grid-area: six; }
.gi-7  { grid-area: seven; }
.gi-8  { grid-area: eight; }
.gi-9  { grid-area: nine; }
.gi-10 { grid-area: ten; }

/* ===== GALLERY ITEM ===== */
.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--card);
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(85%) brightness(0.75);
  transform: scale(1.02);
  transition: filter 0.5s ease, transform 0.6s ease;
}

.gallery-item:hover .gallery-img {
  filter: grayscale(0%) brightness(0.95);
  transform: scale(1.08);
}

/* ===== CATEGORY TAG ===== */
.gallery-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s ease;
}
.tag-web   { background: rgba(26, 107, 255, 0.22); color: #a9c8ff; border: 1px solid rgba(26, 107, 255, 0.4); }
.tag-video { background: rgba(255, 111, 97, 0.2);  color: #ffb3ab; border: 1px solid rgba(255, 111, 97, 0.4); }
.tag-ai    { background: rgba(56, 217, 169, 0.2);  color: #9cf0d4; border: 1px solid rgba(56, 217, 169, 0.4); }
.tag-agent { background: rgba(167, 139, 250, 0.22); color: #d6c8ff; border: 1px solid rgba(167, 139, 250, 0.4); }

/* ===== BOTTOM FADE + TEXT OVERLAY ===== */
.gallery-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 8, 12, 0.9) 85%);
  transform: translateY(8px);
  opacity: 0.92;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
  opacity: 1;
}

.gallery-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.gallery-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, minmax(180px, auto));
    grid-template-areas:
      "one   one"
      "two   three"
      "four  five"
      "six   eight"
      "seven seven"
      "nine  ten";
  }
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four"
      "five"
      "six"
      "seven"
      "eight"
      "nine"
      "ten";
  }
  .gallery-item { min-height: 220px; }
}
.contact-socials {
    display: flex;
    gap: 15px;
}

.contact-social {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #1F5EFF;
    text-decoration: none;
    font-size: 22px;
    transition: all 0.3s ease;
}

.contact-social:hover {
    background: #c5c6c8;
    transform: translateY(-3px);
}
.logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-logo-right{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


.hero-logo-right img{
    max-width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    filter:
        brightness(1.1)
        contrast(1.1)
        drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
}