/*
Theme Name: WebsiteBy – One Page
Author: Adspurna
Version: 1.0
*/

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

/* GLOBAL */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:linear-gradient(180deg,#f6f8fb 0%,#eef2f7 100%);
  color:#0f172a;
  line-height:1.6
}

/* PAGE WRAPPER */
.page-wrap{max-width:1200px;margin:0 auto;padding:80px 20px}

/* CARD */
.card {
  background-image: url("http://websiteby.adspurna.com/wp-content/uploads/2026/01/bgfinal.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 20px;
  padding: 70px 60px;
  margin-bottom: 60px;

  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);

  box-shadow: 
    0 30px 60px rgba(15, 23, 42, 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* HERO */
.hero{text-align:center}
.hero h1{font-size:52px;font-weight:700;margin-bottom:20px}
.hero p{font-size:18px;color:#475569;max-width:720px;margin:0 auto 40px}

/* BUTTON */
.btn{
  display:inline-block;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#fff;
  padding:16px 34px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  transition:.3s
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(37,99,235,.45)}

/* TITLES */
.section-title{font-size:36px;font-weight:700;text-align:center;margin-bottom:20px}
.section-desc{text-align:center;max-width:720px;margin:0 auto;font-size:17px;color:#475569}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:50px
}

/* MINI CARD */
.mini-card{
  background:#fff;
  border-radius:16px;
  padding:30px;
  box-shadow:0 20px 40px rgba(15,23,42,.06)
}
.mini-card h3{font-size:20px;margin-bottom:10px}
.mini-card p{font-size:15px;color:#475569}

/* LOGO MARQUEE */
.logo-marquee{overflow:hidden;margin-top:50px}
.logo-track{
  display:flex;
  align-items:center;
  gap:120px;
  width:max-content;
  animation:marquee 35s linear infinite
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-track img{
  height:120px;
  opacity:1;
  filter:none;
  transition:.3s
}
.logo-track img:hover{transform:scale(1.05)}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* TEAM */
.team-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:40px;
  margin-top:60px;
  text-align:center
}
.team-member img{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 20px 40px rgba(15,23,42,.15);
  margin-bottom:14px
}
.team-member span{
  font-size:16px;
  font-weight:600
}

/* MOBILE */
@media(max-width:768px){
  .hero h1{font-size:38px}
  .card{padding:50px 30px}
  .logo-track img{height:90px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
/* =========================
   GLASS HEADER FIXED
========================= */

/* Page content ko header ke neeche lane ke liye */
body {
  padding-top: 80px;
}

/* Header container */
.glass-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  height: 72px;

  display: flex;
  align-items: center;

  padding: 0 28px;

  /* iOS 26 Glass */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55),
    rgba(235, 235, 255, 0.38),
    rgba(255, 255, 255, 0.5)
  );

  backdrop-filter: blur(38px) saturate(180%);
  -webkit-backdrop-filter: blur(38px) saturate(180%);

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  box-shadow:
    0 20px 60px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  z-index: 9999;
}

/* Header inner alignment */
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 30px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Logo image */
.brand img {
  height: 60px;
  width: auto;
  display: block;
}

/* Brand text */
.brand span {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.3px;
}

/* Mobile zoom & stretch fix */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
}

/* Mobile header logo control */
@media (max-width: 768px) {

  .glass-header img {
    height: 36px;   /* mobile perfect size */
    width: auto;
  }

}

/* Mobile card layout fix */
@media (max-width: 768px) {

  .page-wrap {
    padding: 40px 16px;
  }

  .card {
    padding: 28px 20px;
    margin-bottom: 28px;
  }

}

/* Header offset fix */
.page-wrap {
  padding-top: 120px;
}

@media (max-width: 768px) {
  .page-wrap {
    padding-top: 90px;
  }
}

/* ===============================
   MOBILE ONLY FIXES
   =============================== */
@media (max-width: 768px) {

  /* 1️⃣ Header logo size fix (mobile only) */
  .site-header img,
  .header-logo img {
    width: 60px;
    height: auto;
  }

  .site-header .brand-text {
    font-size: 16px;   /* Adspurna text thoda compact */
  }

  /* Header aur hero ke beech gap kam */
  .page-wrap {
    padding-top: 40px;
  }

  /* 2️⃣ Hero headline size reduce (mobile only) */
  .hero h1 {
    font-size: 30px;     /* desktop untouched */
    line-height: 1.25;
  }

  .hero p {
    font-size: 15px;
  }

  /* 3️⃣ Work & Portfolio logos bigger on mobile */
  .logo-track img,
  .portfolio-logos img {
    height: 60px;      /* pehle chhota tha */
    width: auto;
  }

  @media (max-width: 768px) {

  /* TEAM ALIGNMENT – MOBILE */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    justify-items: center;
    text-align: center;
  }

  .team-member {
    align-items: center;
  }

  .team-member img {
    width: 110px;
    height: 110px;
    object-fit: cover;
  }

}

/* =========================
   MOBILE – HEADER LOGO FORCE SIZE
========================= */
@media (max-width: 768px) {
  .header-logo img {
    width: 90px !important;   /* pehle 60 tha, ab bada */
    height: auto !important;
    max-width: none !important;
  }
}

/* =========================
   MOBILE – PORTFOLIO LOGOS BIGGER
========================= */
@media (max-width: 768px) {
  .logo-track img {
    height: 130px !important;   /* DOUBLE */
    width: auto !important;
    max-height: none !important;
  }
}

/* MOBILE – HEADER LOGO FORCE SIZE */
@media (max-width: 768px) {
  .header-logo {
    transform: scale(1.6);
    transform-origin: left center;
  }
}
/* ===== MOBILE HEADER LOGO REAL FIX ===== */
@media (max-width: 768px) {

  /* SVG logo size increase */
  .site-header svg {
    width: 48px !important;
    height: auto !important;
  }

  /* agar SVG ke parent ko bhi thoda push chahiye */
  .site-header a {
    gap: 10px;
  }

  /* text ko thoda compact */
  .site-header .brand-text {
    font-size: 15px;
  }

}
/* ===============================
   MOBILE HEADER – FORCE SCALE (FINAL)
   =============================== */
@media (max-width: 768px) {

  header,
  .site-header,
  .glass-header {
    padding: 10px 14px;
  }

  header a,
  .site-header a,
  .glass-header a {
    transform: scale(1.8);
    transform-origin: left center;
    display: inline-flex;
  }

}
@media (max-width: 768px) {

  /* Work & Portfolio logos gap fix – MOBILE ONLY */
  .logo-track {
    gap: 10px;              /* pehle ~20px tha, ab half */
  }

  .logo-track a {
    margin-right: 10px;     /* agar margin se gap aa raha ho */
  }

}