/* ==========================================================================
   FIXILA - HERO STYLESHEET (COMPLETE & CORRECT)
   Save as: /css/hero.css
   
   IMPORTANT: Each hero variant is SELF-CONTAINED with all necessary styles.
   This prevents CSS specificity/inheritance issues when using double classes.
   ========================================================================== */

/* ==========================================================================
   SHARED STYLES - Apply to all hero elements
   ========================================================================== */
.hero-content,
.hero-text {
  max-width: 1000px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

/* Typography styles - apply to ALL hero variants */
.hero h1,
.hero-home h1,
.hero-business h1,
.hero-about h1,
.hero-ai h1,
.hero-voip h1,
.hero-arcgis h1,
.hero-design h1,
.hero-marketing h1,
.hero-training h1,
.hero-compliance h1,
.hero-consulting h1,
.hero-connectivity h1,
.hero-personal h1,
.hero-smarthome h1,
.hero-security h1,
.hero-networking h1,
.hero-builds h1,
.hero-partners h1,
.hero-careers h1,
.hero-contact h1,
.hero-faq h1,
.hero-portfolio h1,
.hero-legal h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero p,
.hero .subheadline,
.hero-home p,
.hero-business p,
.hero-about p,
.hero-ai p,
.hero-voip p,
.hero-arcgis p,
.hero-design p,
.hero-marketing p,
.hero-training p,
.hero-compliance p,
.hero-consulting p,
.hero-connectivity p,
.hero-personal p,
.hero-smarthome p,
.hero-security p,
.hero-networking p,
.hero-builds p,
.hero-partners p,
.hero-careers p,
.hero-contact p,
.hero-faq p,
.hero-portfolio p,
.hero-legal p {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   BASE HERO - Default (no variant class)
   ========================================================================== */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #001833 0%, #1e3a8a 50%, #2563eb 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   HOMEPAGE HERO - Blue with Grid
   ========================================================================== */
.hero-home {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #001833 0%, #1e3a8a 50%, #2563eb 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   BUSINESS HERO - Blue with Grid
   ========================================================================== */
.hero-business {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #001833 0%, #1e3a8a 50%, #2563eb 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-business::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   ABOUT PAGE - Sky Blue with Grid
   ========================================================================== */
.hero-about {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   AI PAGE - Purple/Violet with Grid
   ========================================================================== */
.hero-ai {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-ai::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   VOIP PAGE - Green with Grid
   ========================================================================== */
.hero-voip {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-voip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   ARCGIS PAGE - Teal/Cyan with Grid
   ========================================================================== */
.hero-arcgis {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #155e75 0%, #0891b2 50%, #06b6d4 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-arcgis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   DESIGN PAGE - Pink/Rose with Grid
   ========================================================================== */
.hero-design {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #9f1239 0%, #e11d48 50%, #fb7185 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-design::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   MARKETING PAGE - Orange/Amber with Grid
   ========================================================================== */
.hero-marketing {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 50%, #fb923c 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-marketing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   TRAINING PAGE - Indigo with Grid
   ========================================================================== */
.hero-training {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #818cf8 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-training::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   COMPLIANCE PAGE - Red/Crimson with Grid
   ========================================================================== */
.hero-compliance {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #f87171 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-compliance::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   CONSULTING PAGE - Deep Blue with Grid
   ========================================================================== */
.hero-consulting {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-consulting::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   BUSINESS CONNECTIVITY PAGE - Blue with Grid
   ========================================================================== */
.hero-connectivity {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #001833 0%, #1e3a8a 50%, #2563eb 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-connectivity::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   PERSONAL IT PAGE - Light Blue with Grid
   ========================================================================== */
.hero-personal {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #38bdf8 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-personal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   SMART HOME PAGE - Emerald/Lime with Grid
   ========================================================================== */
.hero-smarthome {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-smarthome::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   HOME SECURITY PAGE - Slate/Gray with Grid
   ========================================================================== */
.hero-security {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #334155 0%, #475569 50%, #64748b 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-security::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   HOME NETWORKING PAGE - Navy Blue with Grid
   ========================================================================== */
.hero-networking {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-networking::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   CUSTOM BUILDS PAGE - Violet/Purple with Grid
   ========================================================================== */
.hero-builds {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #581c87 0%, #7e22ce 50%, #a855f7 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-builds::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   PARTNERS PAGE - Purple with Grid
   ========================================================================== */
.hero-partners {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #581c87 0%, #7e22ce 50%, #a855f7 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-partners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   CAREERS PAGE - Purple/Violet with Grid
   ========================================================================== */
.hero-careers {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #a78bfa 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-careers::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   CONTACT PAGE - Teal with Grid
   ========================================================================== */
.hero-contact {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #115e59 0%, #0d9488 50%, #14b8a6 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   FAQ PAGE - Indigo with Grid
   ========================================================================== */
.hero-faq {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #6366f1 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   PORTFOLIO PAGE - Amber/Orange with Grid
   ========================================================================== */
.hero-portfolio {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-portfolio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   LEGAL PAGES (Privacy, Terms) - Dark Gray with Grid
   ========================================================================== */
.hero-legal {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-legal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h60v60H0z" fill="none"/><path d="M30 0v60M0 30h60" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

/* ==========================================================================
   RESPONSIVE - HERO
   ========================================================================== */
@media (max-width: 768px) {
  .hero,
  .hero-home,
  .hero-business,
  .hero-about,
  .hero-ai,
  .hero-voip,
  .hero-arcgis,
  .hero-design,
  .hero-marketing,
  .hero-training,
  .hero-compliance,
  .hero-consulting,
  .hero-connectivity,
  .hero-personal,
  .hero-smarthome,
  .hero-security,
  .hero-networking,
  .hero-builds,
  .hero-partners,
  .hero-careers,
  .hero-contact,
  .hero-faq,
  .hero-portfolio,
  .hero-legal {
    padding: 6rem 1.5rem 3rem;
  }

  .hero h1,
  .hero-home h1,
  .hero-business h1,
  .hero-about h1,
  .hero-ai h1,
  .hero-voip h1,
  .hero-arcgis h1,
  .hero-design h1,
  .hero-marketing h1,
  .hero-training h1,
  .hero-compliance h1,
  .hero-consulting h1,
  .hero-connectivity h1,
  .hero-personal h1,
  .hero-smarthome h1,
  .hero-security h1,
  .hero-networking h1,
  .hero-builds h1,
  .hero-partners h1,
  .hero-careers h1,
  .hero-contact h1,
  .hero-faq h1,
  .hero-portfolio h1,
  .hero-legal h1 {
    font-size: 2.5rem;
  }

  .hero p,
  .hero-home p,
  .hero-business p,
  .hero-about p,
  .hero-ai p,
  .hero-voip p,
  .hero-arcgis p,
  .hero-design p,
  .hero-marketing p,
  .hero-training p,
  .hero-compliance p,
  .hero-consulting p,
  .hero-connectivity p,
  .hero-personal p,
  .hero-smarthome p,
  .hero-security p,
  .hero-networking p,
  .hero-builds p,
  .hero-partners p,
  .hero-careers p,
  .hero-contact p,
  .hero-faq p,
  .hero-portfolio p,
  .hero-legal p {
    font-size: 1.1rem;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .hero h1,
  .hero-home h1,
  .hero-business h1,
  .hero-about h1,
  .hero-ai h1,
  .hero-voip h1,
  .hero-arcgis h1,
  .hero-design h1,
  .hero-marketing h1,
  .hero-training h1,
  .hero-compliance h1,
  .hero-consulting h1,
  .hero-connectivity h1,
  .hero-personal h1,
  .hero-smarthome h1,
  .hero-security h1,
  .hero-networking h1,
  .hero-builds h1,
  .hero-partners h1,
  .hero-careers h1,
  .hero-contact h1,
  .hero-faq h1,
  .hero-portfolio h1,
  .hero-legal h1 {
    font-size: 2rem;
  }
}