/* Biology Turk — extracted styles for the "home" page (componentized from legacy Custom HTML; original kept in DB as fallback). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  --g-dark:   #0d1f0d;
  --g-dg:     #1a3a1a;
  --g-mid:    #2d6a2d;
  --g-green:  #3d8b3d;
  --g-light:  #5aab3a;
  --g-bright: #8ecf5f;
  --g-white:  #ffffff;
  --g-off:    #f4f8f0;
  --g-gray:   #e8ede4;
  --g-txt:    #4a5a4a;
}

.bt-hp * { box-sizing: border-box; margin: 0; padding: 0; }
.bt-hp { font-family: 'Tajawal', sans-serif; background: var(--g-white); direction: rtl; color: var(--g-dark); }

/* KEYFRAMES — one-shot entrance only; no idle/looping motion */
@keyframes fadeUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── HERO ── */
.bt-hero {
  position: relative; min-height: 100vh;
  background: var(--g-dg); overflow: hidden;
  display: flex; align-items: center;
}
.bt-hero-img {
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2026/04/Pest-Control-Main-Hero-Image-2-2048x1031.jpg') center/cover no-repeat;
  opacity: 0.42;
}
.bt-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(13,31,13,0.72) 0%, rgba(26,58,26,0.55) 55%, rgba(13,31,13,0.70) 100%);
}
.bt-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(90,171,58,0.06) 1px,transparent 1px), linear-gradient(90deg,rgba(90,171,58,0.06) 1px,transparent 1px);
  background-size: 56px 56px;
}

.bt-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 130px 48px 120px; width: 100%; }

.bt-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(90,171,58,0.15); border: 1px solid rgba(90,171,58,0.4);
  color: var(--g-bright); padding: 7px 20px; border-radius: 50px;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 30px;
  animation: fadeUp 0.6s ease both;
}
.bt-badge-dot { width: 6px; height: 6px; background: var(--g-bright); border-radius: 50%; }

.bt-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px,6vw,80px); font-weight: 900; color: var(--g-white);
  line-height: 1.05; margin-bottom: 14px; letter-spacing: -1px;
  animation: fadeUp 0.6s 0.12s ease both;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.bt-hero h1 em { font-style: normal; color: var(--g-bright); }
.bt-hero-sub { font-size: clamp(16px,2.2vw,23px); color: rgba(255,255,255,0.82); font-weight: 400; margin-bottom: 18px; animation: fadeUp 0.6s 0.22s ease both; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.bt-hero-desc { font-size: 16px; color: rgba(255,255,255,0.7); max-width: 520px; line-height: 1.8; margin-bottom: 44px; animation: fadeUp 0.6s 0.32s ease both; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.bt-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp 0.6s 0.42s ease both; }

/* BUTTONS — always readable on hover; static (no idle motion) */
.bt-btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--g-mid); color: var(--g-white);
  padding: 16px 32px; border-radius: var(--bt-radius-sm,8px); font-size: 16px; font-weight: 700;
  text-decoration: none; border: 2px solid var(--g-mid);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bt-btn-main:hover { background: var(--g-bright); border-color: var(--g-bright); color: var(--g-dark); }
.bt-btn-main:active { background: var(--g-dg); border-color: var(--g-dg); color: var(--g-white); }
.bt-btn-main:focus-visible { outline: 3px solid var(--g-bright); outline-offset: 2px; }
.bt-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.12); color: var(--g-white);
  padding: 16px 32px; border-radius: var(--bt-radius-sm,8px); font-size: 16px; font-weight: 600;
  text-decoration: none; border: 2px solid rgba(255,255,255,0.35);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bt-btn-ghost:hover { background: var(--g-bright); border-color: var(--g-bright); color: var(--g-dark); }
.bt-btn-ghost:active { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); color: var(--g-white); }
.bt-btn-ghost:focus-visible { outline: 3px solid var(--g-bright); outline-offset: 2px; }

.bt-stats-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: rgba(13,31,13,0.88); backdrop-filter: blur(10px); border-top: 2px solid rgba(90,171,58,0.3); }
.bt-stats-inner { max-width: 1200px; margin: 0 auto; padding: 20px 48px; display: grid; grid-template-columns: repeat(4,1fr); }
.bt-stat { text-align: center; padding: 8px 14px; border-left: 1px solid rgba(255,255,255,0.07); }
.bt-stat:last-child { border-right: 1px solid rgba(255,255,255,0.07); }
.bt-stat-n { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--g-bright); line-height: 1; }
.bt-stat-l { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 5px; letter-spacing: 1.5px; text-transform: uppercase; }

/* ── TRUST BAR ── */
.bt-trust { background: var(--g-dark); padding: 18px 48px; border-top: 3px solid var(--g-mid); }
.bt-trust-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bt-ti { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.65); }
.bt-ti-ic { width: 34px; height: 34px; background: rgba(90,171,58,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }

/* ── WHO WE ARE ── */
.bt-whoweare { background: var(--g-white); padding: 96px 48px; }
.bt-wow-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.bt-wow-lbl { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--g-mid); margin-bottom: 10px; }
.bt-wow-h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px,3.5vw,46px); font-weight: 700; color: var(--g-dark); line-height: 1.15; margin-bottom: 18px; }
.bt-wow-h2 span { color: var(--g-mid); }
.bt-wow-txt { font-size: 16px; color: var(--g-txt); line-height: 1.85; margin-bottom: 28px; }
.bt-wow-bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.bt-wow-bullets li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--g-txt); }
.bt-wow-bullets li::before { content:'✓'; width: 24px; height: 24px; background: var(--g-mid); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bt-wow-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--g-mid); color: var(--g-white);
  padding: 15px 30px; border-radius: var(--bt-radius-sm,8px); font-size: 15px; font-weight: 700;
  text-decoration: none; border: 2px solid var(--g-mid);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bt-wow-btn:hover { background: var(--g-bright); border-color: var(--g-bright); color: var(--g-dark); }
.bt-wow-btn:active { background: var(--g-dg); border-color: var(--g-dg); color: var(--g-white); }
.bt-wow-btn:focus-visible { outline: 3px solid var(--g-bright); outline-offset: 2px; }
.bt-wow-visual { position: relative; }
.bt-wow-imgbox { border-radius: 6px; overflow: hidden; aspect-ratio: 1/1; position: relative; }
.bt-wow-imgbox img { width: 100%; height: 100%; object-fit: cover; }
.bt-wow-imgbox::after { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(26,58,26,0.3), transparent); }
.bt-wow-card {
  position: absolute; bottom: -24px; left: -24px;
  background: var(--g-dark); color: var(--g-white);
  padding: 22px 26px; border-radius: var(--bt-radius-sm,8px); min-width: 180px;
  border-left: 4px solid var(--g-bright);
  box-shadow: var(--bt-shadow,0 6px 24px rgba(13,31,13,.08));
}
.bt-wow-card-n { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; color: var(--g-bright); line-height: 1; }
.bt-wow-card-t { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }

/* ── SHARED ── */
.bt-section { padding: 96px 48px; }
.bt-wrap { max-width: 1200px; margin: 0 auto; }
.bt-lbl { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--g-mid); margin-bottom: 10px; }
.bt-h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px,3.5vw,46px); font-weight: 700; color: var(--g-dark); line-height: 1.15; margin-bottom: 16px; }
.bt-h2 span { color: var(--g-mid); }
.bt-lead { font-size: 16px; color: var(--g-txt); line-height: 1.8; max-width: 560px; }

/* ── SERVICES ── */
.bt-services { background: var(--g-off); }
.bt-svc-hd { text-align: center; margin-bottom: 56px; }
.bt-svc-hd .bt-lead { margin: 0 auto; }
.bt-svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--g-gray); }
/* 7 cards in a 3-column grid leaves an asymmetric 2-cell gap in the last row; center the orphaned 7th card instead. */
.bt-svc-grid > .bt-svc-card:last-child:nth-child(3n+1) { grid-column: 2; }
.bt-svc-card { background: var(--g-white); padding: 40px 32px; transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden; }
.bt-svc-card::after { content:''; position:absolute; bottom:0; right:0; left:0; height:3px; background: linear-gradient(90deg, var(--g-mid), var(--g-light)); transform:scaleX(0); transform-origin:right; transition:transform .2s ease; }
.bt-svc-card:hover::after { transform:scaleX(1); }
.bt-svc-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(13,31,13,0.1); z-index:1; }
.bt-svc-ico { width:58px; height:58px; background:var(--g-off); border:1px solid var(--g-gray); border-radius:var(--bt-radius-sm,8px); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; }
.bt-svc-card h3 { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; color:var(--g-dark); margin-bottom:10px; }
.bt-svc-card p { font-size:14px; color:var(--g-txt); line-height:1.75; margin-bottom:20px; }
.bt-svc-link { color:var(--g-mid); font-weight:700; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:gap 0.2s; }
.bt-svc-link:hover { gap:11px; }
.bt-svc-title-link { color:inherit; text-decoration:none; }
.bt-svc-title-link:hover { text-decoration:underline; text-underline-offset:3px; }
.bt-svc-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.bt-svc-details { color:var(--g-txt); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.bt-svc-details:hover { color:var(--g-mid); }
/* ── WHY US ── */
.bt-why { background: var(--g-dark); }
.bt-why-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.bt-why .bt-lbl { color:var(--g-bright); }
.bt-why .bt-h2 { color:var(--g-white); }
.bt-why .bt-h2 span { color:var(--g-bright); }
.bt-why .bt-lead { color:rgba(255,255,255,0.55); }
.bt-why-feats { margin-top:40px; display:flex; flex-direction:column; gap:24px; }
.bt-feat { display:flex; gap:16px; align-items:flex-start; }
.bt-feat-ic { width:44px; height:44px; flex-shrink:0; background:rgba(90,171,58,0.1); border:1px solid rgba(90,171,58,0.22); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--g-bright); }
.bt-feat h4 { color:var(--g-white); font-size:16px; font-weight:600; margin-bottom:5px; }
.bt-feat p { color:rgba(255,255,255,0.5); font-size:13px; line-height:1.65; }
.bt-why-imgwrap { position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5; }
.bt-why-imgwrap img { width:100%; height:100%; object-fit:cover; filter:brightness(0.6) saturate(0.65); }
.bt-why-badge { position:absolute; bottom:28px; right:-20px; background:var(--g-mid); padding:18px 22px; border-radius:var(--bt-radius-sm,8px); text-align:center; min-width:130px; border:3px solid var(--g-white); box-shadow:var(--bt-shadow-lg,0 14px 40px rgba(13,31,13,.12)); }
.bt-why-badge-n { font-family:'Playfair Display',serif; font-size:28px; font-weight:900; color:var(--g-white); line-height:1; }
.bt-why-badge-t { font-size:10px; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* ── PROCESS ── */
.bt-process { background:var(--g-gray); }
.bt-proc-hd { text-align:center; margin-bottom:56px; }
.bt-proc-hd .bt-lead { margin:0 auto; }
.bt-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.bt-steps::before { content:''; position:absolute; top:33px; right:12.5%; left:12.5%; height:2px; background:linear-gradient(90deg,var(--g-mid),var(--g-light),var(--g-mid)); }
.bt-step { text-align:center; padding:0 16px; }
.bt-step-n { width:66px; height:66px; margin:0 auto 22px; background:var(--g-gray); border:2px solid var(--g-mid); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--g-mid); position:relative; z-index:1; }
.bt-step h4 { font-size:16px; font-weight:700; color:var(--g-dark); margin-bottom:8px; }
.bt-step p { font-size:13px; color:var(--g-txt); line-height:1.65; }

/* ── TESTIMONIALS ── */
.bt-tests { background:var(--g-white); }
.bt-test-hd { text-align:center; margin-bottom:56px; }
.bt-test-hd .bt-lead { margin:0 auto; }
.bt-test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.bt-test-card { background:var(--g-off); padding:36px 28px; border-radius:var(--bt-radius-sm,8px); border:1px solid var(--g-gray); position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.bt-test-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(13,31,13,0.1); }
.bt-test-card::before { content:'"'; font-family:'Playfair Display',serif; font-size:68px; color:rgba(61,139,61,0.1); position:absolute; top:14px; left:22px; line-height:1; }
.bt-test-stars { color:var(--g-mid); margin-bottom:12px; font-size:15px; letter-spacing:2px; }
.bt-test-txt { font-size:14px; color:#3a4a3a; line-height:1.8; margin-bottom:24px; font-style:italic; position:relative; z-index:1; }
.bt-test-auth { display:flex; align-items:center; gap:12px; }
.bt-test-av { width:42px; height:42px; background:var(--g-mid); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--g-white); font-weight:700; font-size:16px; }
.bt-test-name { font-weight:700; color:var(--g-dark); font-size:14px; }
.bt-test-loc { font-size:11px; color:#7a8a7a; margin-top:2px; }

/* ── CTA ── */
.bt-cta { background:var(--g-dg); padding:92px 48px; text-align:center; position:relative; overflow:hidden; }
.bt-cta::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(90,171,58,0.09) 1.5px,transparent 1.5px); background-size:26px 26px; }
.bt-cta-in { position:relative; z-index:1; max-width:660px; margin:0 auto; }
.bt-cta h2 { font-family:'Playfair Display',serif; font-size:clamp(26px,4.5vw,48px); color:var(--g-white); font-weight:900; margin-bottom:16px; }
.bt-cta h2 em { font-style:normal; color:var(--g-bright); }
.bt-cta p { font-size:17px; color:rgba(255,255,255,0.6); margin-bottom:40px; line-height:1.75; }
.bt-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.bt-cta-phone { display:inline-flex; align-items:center; gap:12px; background:var(--g-mid); color:var(--g-white); padding:16px 32px; border-radius:var(--bt-radius-sm,8px); font-size:17px; font-weight:700; text-decoration:none; border:2px solid var(--g-mid); transition:background .18s ease, border-color .18s ease, color .18s ease; }
.bt-cta-phone:hover { background:var(--g-bright); border-color:var(--g-bright); color:var(--g-dark); }
.bt-cta-phone:active { background:var(--g-dg); border-color:var(--g-dg); color:var(--g-white); }
.bt-cta-phone:focus-visible { outline:3px solid var(--g-bright); outline-offset:2px; }
.bt-cta-wa { display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,0.08); color:var(--g-white); padding:16px 32px; border-radius:var(--bt-radius-sm,8px); font-size:17px; font-weight:600; text-decoration:none; border:2px solid rgba(255,255,255,0.28); transition:background .18s ease, border-color .18s ease, color .18s ease; }
.bt-cta-wa:hover { background:var(--g-bright); border-color:var(--g-bright); color:var(--g-dark); }
.bt-cta-wa:active { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.45); color:var(--g-white); }
.bt-cta-wa:focus-visible { outline:3px solid var(--g-bright); outline-offset:2px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .bt-svc-grid { grid-template-columns:repeat(2,1fr); }
  .bt-svc-grid > .bt-svc-card:last-child:nth-child(3n+1) { grid-column:auto; }
  .bt-svc-grid > .bt-svc-card:last-child:nth-child(2n+1) { grid-column:1/-1; max-inline-size:calc(50% - 1px); margin-inline:auto; }
  .bt-why-grid, .bt-wow-grid { grid-template-columns:1fr; gap:48px; }
  .bt-why-badge { right:0; }
  .bt-wow-card { left:0; bottom:-16px; }
}
@media (max-width:768px) {
  .bt-hero-inner { padding:100px 20px 110px; }
  .bt-section, .bt-whoweare, .bt-cta { padding:64px 20px; }
  .bt-trust { padding:14px 20px; }
  .bt-trust-in { gap:14px; }
  .bt-ti { font-size:12px; }
  .bt-stats-inner { grid-template-columns:repeat(2,1fr); padding:16px 20px; }
  .bt-svc-grid { grid-template-columns:1fr; }
  .bt-steps { grid-template-columns:repeat(2,1fr); gap:32px; }
  .bt-steps::before { display:none; }
  .bt-test-grid { grid-template-columns:1fr; }
  .bt-hero-btns { flex-direction:column; align-items:flex-end; }
  .bt-btn-main, .bt-btn-ghost { width:100%; justify-content:center; }
  .bt-cta-btns { flex-direction:column; align-items:center; }
  .bt-cta-phone, .bt-cta-wa { width:100%; max-width:320px; justify-content:center; }
  .bt-wow-imgbox { aspect-ratio:3/2; }
  .bt-wow-card { position:relative; bottom:auto; left:auto; margin-top:16px; display:inline-flex; gap:12px; align-items:center; }
  .bt-why-badge { right:0; }
  .bt-stat-n { font-size:22px; }
}
@media (max-width:480px) {
  .bt-hero h1 { font-size:clamp(34px,10vw,52px); }
  .bt-steps { grid-template-columns:1fr; }
  .bt-badge { font-size:10px; padding:6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-hp * { animation:none !important; transition:none !important; }
}
