/* ============================================================
BFC LTD - MOBILE RESPONSIVENESS FIXES v2
Enhances display on phones (<=480px) and tablets (<=768px)
============================================================ */

html, body { overflow-x: hidden; max-width: 100vw; }

input[type="text"], input[type="email"], input[type="tel"],
textarea, select { font-size: 16px !important; }

/* =========================================================
   OFFERING / RELOCATION SECTION (between #about & #services)
   Uses inline style="grid-template-columns:repeat(4,1fr)"
   Attribute selector with !important overrides inline style
   ========================================================= */
@media (max-width: 480px) {
  #about + section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #about + section [style*="grid-template-columns"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #about + section [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
.container { padding: 0 1.2rem; }
.nav-cta { display: none !important; }
#hero { padding: 6rem 0 3.5rem; }
.hero-content { max-width: 100%; }
.hero-tag { font-size: 0.58rem; letter-spacing: 0.12em; padding: 0.3rem 0.65rem; flex-wrap: wrap; }
.hero-h1 { font-size: clamp(2.8rem, 13vw, 4.5rem) !important; line-height: 0.92 !important; }
.hero-sub { font-size: 0.88rem; max-width: 100%; line-height: 1.65; }
.hero-ctas { flex-direction: column !important; gap: 0.75rem; width: 100%; }
.hero-ctas .btn-gold, .hero-ctas .btn-out, .hero-ctas .btn-whatsapp { width: 100%; text-align: center; justify-content: center; padding: 0.85rem 1.5rem; }
.scroll-indicator { display: none; }
#about { padding: 50px 0 !important; }
#about > div { padding: 0 1.2rem !important; }
#about > div > div { gap: 35px !important; }
#about > div > div > div { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem; }
.about-quote { font-size: 1rem; margin: 1.5rem 0; }
.counters-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem; }
.flagship-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
.flagship-value { grid-template-columns: 1fr 1fr !important; gap: 1rem; }
#services { padding: 4rem 0; }
.services-top { grid-template-columns: 1fr !important; gap: 1rem; margin-bottom: 1.5rem; }
.svc-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tab { white-space: nowrap; padding: 0.7rem 0.9rem; font-size: 0.72rem; }
.svc-grid { grid-template-columns: 1fr !important; gap: 1rem; }
#projects { padding: 4rem 0; }
.proj-header { grid-template-columns: 1fr !important; gap: 1.5rem; }
.kh-projects-outer { flex-direction: column !important; gap: 1rem; margin: 1rem 0; }
.kh-cta-card { display: block !important; flex: none !important; min-width: unset !important; max-width: 100% !important; width: 100% !important; margin-right: 0 !important; }
.kh-cta-card .proj-card { height: auto !important; }
.kh-arrow { display: none !important; }
.kh-slider-viewport { width: 100% !important; overflow: visible !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.kh-slider-track { gap: 1rem !important; padding-bottom: 0.75rem !important; flex-wrap: nowrap !important; }
.kh-slider-track .proj-card { flex: 0 0 85vw !important; max-width: 85vw !important; min-width: 0 !important; }
.proj-slider-track .project-card { flex: 0 0 calc(100% - 1rem) !important; min-width: calc(100% - 1rem) !important; }
.proj-grid { grid-template-columns: 1fr !important; }
#clients { padding: 4rem 0; }
.clients-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem; }
#why { padding: 4rem 0; }
.why-grid { grid-template-columns: 1fr !important; gap: 2rem; }
#team { padding: 4rem 0; }
.team-grid { grid-template-columns: 1fr !important; gap: 2rem; }
.team-skills { flex-wrap: wrap; gap: 0.4rem; }
.team-skill { font-size: 0.65rem; }
.team-avatar { width: 100px !important; height: 100px !important; }
#contact { padding: 4rem 0; }
.contact-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
.form-row { grid-template-columns: 1fr !important; gap: 1rem; }
#live-news-section { padding: 40px 0 !important; }
#live-news-section > div:first-child { padding: 0 1.2rem 25px !important; }
#live-news-section > div:first-child > div { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem; }
.live-news-card { width: 280px !important; }
.img-container { height: 150px !important; }
#process { padding: 50px 0 !important; }
#process > div { padding: 0 1.2rem !important; }
#process h2 { font-size: 1.8rem !important; }
#process > div > div:last-child > div { padding: 25px 20px !important; min-width: 0 !important; width: 100%; }
footer { padding: 2.5rem 0 1.5rem; }
.footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }
.footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.5rem; font-size: 0.75rem; }
.footer-social { justify-content: center; }
}

@media (max-width: 360px) {
.container { padding: 0 1rem; }
.hero-h1 { font-size: clamp(2.4rem, 14vw, 3.5rem) !important; }
.hero-tag { font-size: 0.54rem; letter-spacing: 0.1em; }
.counters-grid { grid-template-columns: 1fr !important; }
.clients-grid { grid-template-columns: 1fr !important; }
.flagship-value { grid-template-columns: 1fr !important; }
.live-news-card { width: 255px !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
.container { padding: 0 1.5rem; }
.hero-ctas { flex-direction: column; gap: 0.75rem; }
.hero-ctas .btn-gold, .hero-ctas .btn-out, .hero-ctas .btn-whatsapp { width: 100%; text-align: center; justify-content: center; }
.about-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
#about > div { padding: 0 1.5rem !important; }
#about > div > div > div { min-width: 0 !important; }
.contact-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
.team-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem; }
.why-grid { grid-template-columns: 1fr !important; gap: 2.5rem; }
.flagship-grid { grid-template-columns: 1fr !important; gap: 2rem; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem; }
.kh-projects-outer { flex-direction: column !important; gap: 1rem; }
.kh-cta-card { display: block !important; flex: none !important; max-width: 100% !important; width: 100% !important; }
.kh-slider-track .proj-card { flex: 0 0 calc(50% - 0.63rem) !important; max-width: calc(50% - 0.63rem) !important; }
.live-news-card { width: 300px !important; }
.services-top { grid-template-columns: 1fr !important; gap: 1.5rem; }
#process > div { padding: 0 1.5rem !important; }
#live-news-section > div:first-child { padding: 0 1.5rem 30px !important; }
#live-news-section > div:first-child > div { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem; }
}