/* ===============================
   BRAND VARIABLES
=============================== */
:root {
  --primary-red: #c40000;
  --navy-blue: #0a1a2f;
  --white: #ffffff;
  --light-gray: #f5f6f8;
  --text-dark: #222;
}

/* ===============================
   GLOBAL BASICS
=============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--white);
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

h2, h3 {
  font-weight: 700;
}

/* ===============================
   HERO SECTION
=============================== */
.hero-pro {
  height: 80vh;
  background: url("../img/guards1.jpg") center/cover no-repeat;
  position: relative;
}

.hero-pro-overlay {
  background: rgba(10, 26, 47, 0.85); /* Navy overlay */
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-pro-content {
  color: var(--white);
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

.hero-pro-content h1 {
  font-size: 56px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.hero-pro-content p {
  font-size: 20px;
  letter-spacing: 1px;
  color: #e0e0e0;
}

/* ===============================
   SERVICE OVERVIEW
=============================== */
.service-overview {
  padding: 80px 0;
  background: var(--white);
}

.service-overview h2 {
  font-size: 36px;
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
  color: var(--navy-blue);
}

.service-overview p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
}

/* ===============================
   CAPABILITIES
=============================== */
.service-capabilities {
  background: var(--navy-blue);
  padding: 80px 0;
}

.service-capabilities h3 {
  color: var(--white);
  font-size: 32px;
  margin-bottom: 30px;
}

.capabilities-list {
  list-style: none;
}

.capabilities-list li {
  background: var(--white);
  color: var(--navy-blue);
  padding: 16px 20px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   INDUSTRIES SERVED
=============================== */
.industries-served {
  padding: 80px 0;
  background: var(--light-gray);
}

.industries-served h3 {
  font-size: 32px;
  margin-bottom: 15px;
  color: var(--navy-blue);
}

.industries-served p {
  font-size: 16px;
  margin-bottom: 25px;
  color: #555;
}

.industry-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  list-style: none;
}

.industry-list li {
  background: var(--white);
  padding: 18px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* ===============================
   TEAM IN ACTION
=============================== */
.team-action-section {
  padding: 90px 0;
  background: var(--white);
}

.team-action-section h3 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 10px;
  color: var(--navy-blue);
}

.section-subtitle {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  font-size: 17px;
  color: #555;
}

/* BIG GROUP IMAGE */
.team-main-image {
  margin-bottom: 60px;
}

.team-main-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* SUPPORTING GALLERY */
.team-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}

.team-gallery-grid img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.team-gallery-grid img:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

/* ===============================
   WHY CHOOSE US
=============================== */
.why-choose-us {
  background: var(--navy-blue);
  padding: 80px 0;
}

.why-choose-us h3 {
  color: var(--white);
  font-size: 32px;
  margin-bottom: 30px;
}

.why-list {
  list-style: none;
}

.why-list li {
  color: var(--white);
  padding: 15px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* ===============================
   COMPLIANCE
=============================== */
.compliance-standards {
  padding: 80px 0;
  background: var(--light-gray);
}

.compliance-standards h3 {
  font-size: 32px;
  margin-bottom: 15px;
  color: var(--navy-blue);
}

.compliance-standards p {
  font-size: 16px;
  margin-bottom: 25px;
  color: #555;
}

.compliance-list {
  list-style: none;
}

.compliance-list li {
  background: var(--white);
  padding: 16px;
  margin-bottom: 12px;
  border-left: 6px solid var(--primary-red);
  font-weight: 600;
}

/* ===============================
   CTA SECTION
=============================== */
.service-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 80px 20px;
}

.service-cta h3 {
  font-size: 36px;
  margin-bottom: 15px;
}

.service-cta p {
  font-size: 18px;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  background: var(--white);
  color: var(--primary-red);
  padding: 16px 40px;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: var(--navy-blue);
  color: var(--white);
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  .hero-pro-content h1 {
    font-size: 38px;
  }

  .team-main-image img {
    height: 300px;
  }

  h2, h3 {
    font-size: 28px;
  }
}
/* ==================================================
   CCTV SURVEILLANCE SYSTEMS (NEW PAGE)
================================================== */

/* CCTV HERO */
.cctv-hero {
  height: 70vh;
  background: url("../img/guards2.jpeg") center/cover no-repeat;
  position: relative;
}

.cctv-hero-overlay {
  background: rgba(10, 26, 47, 0.85);
  height: 100%;
  display: flex;
  align-items: center;
}

.cctv-hero h1 {
  color: var(--white);
  font-size: 52px;
  margin-bottom: 10px;
}

.cctv-hero p {
  color: #e0e0e0;
  font-size: 18px;
}

/* CCTV INTRO */
.cctv-intro {
  padding: 80px 0;
  background: var(--white);
}

.cctv-intro h2 {
  font-size: 36px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
  margin-bottom: 20px;
  color: var(--navy-blue);
}

/* CCTV FEATURES */
.cctv-section {
  padding: 90px 0;
  background: var(--navy-blue);
}

.cctv-section h3 {
  text-align: center;
  color: var(--white);
  font-size: 36px;
}

.cctv-section .section-subtitle {
  text-align: center;
  color: #d0d0d0;
  margin-bottom: 60px;
}

.cctv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.cctv-card {
  background: var(--white);
  padding: 30px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.cctv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* CCTV CTA */
.cctv-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 80px 20px;
}
/* ===============================
   CCTV SOLUTIONS OFFERED
=============================== */
.cctv-solutions {
  padding: 90px 0;
  background: var(--white);
}

.cctv-solutions h3 {
  text-align: center;
  font-size: 36px;
  color: var(--navy-blue);
  margin-bottom: 50px;
}

.cctv-solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.solution-box {
  background: var(--white);
  padding: 30px;
  border-left: 6px solid var(--primary-red);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}

.solution-box:hover {
  transform: translateY(-6px);
}

.solution-box h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

/* ===============================
   CCTV IMPLEMENTATION PROCESS
=============================== */
.cctv-process {
  background: var(--navy-blue);
  padding: 90px 0;
}

.cctv-process h3 {
  color: var(--white);
  text-align: center;
  margin-bottom: 50px;
  font-size: 36px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.process-step {
  background: var(--white);
  padding: 35px 25px;
  text-align: center;
  border-radius: 6px;
}

.process-step span {
  display: block;
  font-size: 34px;
  font-weight: 700;
  color: var(--primary-red);
  margin-bottom: 10px;
}

.process-step h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

/* ===============================
   CCTV BENEFITS
=============================== */
.cctv-benefits {
  background: var(--light-gray);
  padding: 90px 0;
}

.cctv-benefits h3 {
  text-align: center;
  color: var(--navy-blue);
  font-size: 36px;
  margin-bottom: 40px;
}

.benefits-list {
  max-width: 850px;
  margin: auto;
  list-style: none;
}

.benefits-list li {
  background: var(--white);
  padding: 18px;
  margin-bottom: 12px;
  border-left: 6px solid var(--primary-red);
  font-weight: 600;
}
/* ===============================
   CORPORATE SECURITY HERO
=============================== */
.corporate-hero {
  height: 80vh;
  background: 
    linear-gradient(
      rgba(10, 26, 47, 0.85),
      rgba(10, 26, 47, 0.85)
    ),
    url("../img/crprt\ services.JPG") center/cover no-repeat;
  position: relative;
}

.corporate-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.corporate-hero h1 {
  color: var(--white);
  font-size: 58px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.corporate-hero p {
  color: #e0e0e0;
  font-size: 20px;
  letter-spacing: 1px;
  max-width: 700px;
}

/* ===============================
   CORPORATE INTRO
=============================== */
.corporate-intro {
  padding: 90px 0;
  background: var(--white);
}

.corporate-intro h2 {
  font-size: 38px;
  margin-bottom: 20px;
  color: var(--navy-blue);
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.corporate-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 900px;
}

/* ===============================
   CORPORATE CAPABILITIES
=============================== */
.corporate-capabilities {
  background: var(--navy-blue);
  padding: 90px 0;
}

.corporate-capabilities h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 35px;
}

.corporate-capabilities .capabilities-list li {
  background: var(--white);
  color: var(--navy-blue);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   CORPORATE ENVIRONMENTS
=============================== */
.corporate-environments {
  padding: 90px 0;
  background: var(--light-gray);
}

.corporate-environments h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.environment-box {
  background: var(--white);
  padding: 25px;
  text-align: center;
  font-weight: 600;
  border-bottom: 4px solid var(--primary-red);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}

.environment-box:hover {
  transform: translateY(-6px);
}

/* ===============================
   CORPORATE WHY US
=============================== */
.corporate-why-us {
  background: var(--navy-blue);
  padding: 90px 0;
}

.corporate-why-us h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 35px;
}

.corporate-why-us .why-list li {
  color: var(--white);
  padding: 16px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* ===============================
   CORPORATE CTA
=============================== */
.corporate-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}

.corporate-cta h3 {
  font-size: 38px;
  margin-bottom: 15px;
}

.corporate-cta p {
  font-size: 18px;
  margin-bottom: 35px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  .corporate-hero h1 {
    font-size: 40px;
  }

  .corporate-hero p {
    font-size: 18px;
  }

  .corporate-cta h3 {
    font-size: 30px;
  }
}
/* ===============================
   CORPORATE COMPLIANCE & CERTIFICATIONS
=============================== */
.corporate-compliance {
  padding: 90px 0;
  background: var(--light-gray);
}

.corporate-compliance h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  text-align: center;
}

.compliance-intro {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
  font-size: 16px;
  color: #555;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.compliance-card {
  background: var(--white);
  padding: 30px;
  border-top: 4px solid var(--primary-red);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}

.compliance-card h4 {
  color: var(--navy-blue);
  font-size: 18px;
  margin-bottom: 10px;
}

.compliance-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.compliance-card:hover {
  transform: translateY(-6px);
}
/* ==================================================
   CRISIS MANAGEMENT SERVICES
================================================== */

/* ===============================
   CRISIS HERO
=============================== */
.crisis-hero {
  height: 80vh;
  background:
    linear-gradient(
      rgba(10, 26, 47, 0.88),
      rgba(10, 26, 47, 0.88)
    ),
    url("../img/crisis.JPG") center/cover no-repeat;
  position: relative;
}

.crisis-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.crisis-hero h1 {
  color: var(--white);
  font-size: 58px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.crisis-hero p {
  color: #e0e0e0;
  font-size: 20px;
  letter-spacing: 1px;
  max-width: 750px;
}

/* ===============================
   CRISIS INTRO
=============================== */
.crisis-intro {
  padding: 90px 0;
  background: var(--white);
}

.crisis-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.crisis-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* ===============================
   CRISIS SERVICES
=============================== */
.crisis-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.crisis-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.crisis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.crisis-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.crisis-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.crisis-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.crisis-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* ===============================
   CRISIS TYPES
=============================== */
.crisis-types {
  padding: 90px 0;
  background: var(--light-gray);
}

.crisis-types h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 35px;
}

.crisis-list {
  list-style: none;
  max-width: 900px;
}

.crisis-list li {
  background: var(--white);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   CRISIS WHY US
=============================== */
.crisis-why-us {
  background: var(--navy-blue);
  padding: 90px 0;
}

.crisis-why-us h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 35px;
}

.crisis-why-us .why-list li {
  color: var(--white);
  padding: 16px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* ===============================
   CRISIS CTA
=============================== */
.crisis-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}

.crisis-cta h3 {
  font-size: 38px;
  margin-bottom: 15px;
}

.crisis-cta p {
  font-size: 18px;
  margin-bottom: 35px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  .crisis-hero h1 {
    font-size: 40px;
  }

  .crisis-hero p {
    font-size: 18px;
  }

  .crisis-cta h3 {
    font-size: 30px;
  }
}
/* ===============================
   CRISIS RESPONSE PROCESS
=============================== */
.crisis-process {
  padding: 100px 0;
  background: var(--white);
}

.crisis-process h3 {
  text-align: center;
  font-size: 36px;
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.process-subtitle {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 70px;
  font-size: 16px;
  color: #555;
}

/* TIMELINE */
.crisis-timeline {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.timeline-step {
  display: flex;
  align-items: center;
  gap: 50px;
}

.timeline-step.reverse {
  flex-direction: row-reverse;
}

.timeline-image img {
  width: 420px;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.timeline-content span {
  display: inline-block;
  color: var(--primary-red);
  font-weight: 700;
  margin-bottom: 8px;
}

.timeline-content h4 {
  font-size: 24px;
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.timeline-content p {
  font-size: 16px;
  color: #444;
  max-width: 500px;
  line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .timeline-step,
  .timeline-step.reverse {
    flex-direction: column;
    text-align: center;
  }

  .timeline-image img {
    width: 100%;
    height: 240px;
  }

  .timeline-content p {
    max-width: 100%;
  }
}
/* ==================================================
   EVENT SECURITY & BOUNCERS PAGE
================================================== */

/* ===============================
   EVENT HERO
=============================== */
.event-hero {
  height: 80vh;
  background:
    linear-gradient(
      rgba(10, 26, 47, 0.82),
      rgba(10, 26, 47, 0.82)
    ),
    url("../img/hero.jpg") center/cover no-repeat;
}

.event-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.event-hero h1 {
  color: var(--white);
  font-size: 58px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.event-hero p {
  color: #e6e6e6;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ===============================
   EVENT INTRO
=============================== */
.event-intro {
  padding: 90px 0;
  background: var(--white);
}

.event-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.event-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* ===============================
   EVENT SERVICES
=============================== */
.event-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.event-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.event-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.event-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.event-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* ===============================
   EVENT GALLERY
=============================== */
.event-gallery {
  padding: 90px 0;
  background: var(--white);
}

.event-gallery h3 {
  text-align: center;
  font-size: 36px;
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.event-gallery .section-subtitle {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  font-size: 16px;
  color: #555;
}

.event-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

.event-gallery-grid img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.event-gallery-grid img:hover {
  transform: scale(1.06);
  box-shadow: 0 25px 55px rgba(0,0,0,0.35);
}

/* ===============================
   EVENT TYPES
=============================== */
.event-types {
  background: var(--light-gray);
  padding: 90px 0;
}

.event-types h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.event-type-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.event-type-list li {
  background: var(--white);
  padding: 18px 22px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   EVENT CTA
=============================== */
.event-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}

.event-cta h3 {
  font-size: 38px;
  margin-bottom: 15px;
}

.event-cta p {
  font-size: 18px;
  margin-bottom: 35px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  .event-hero h1 {
    font-size: 40px;
  }

  .event-hero p {
    font-size: 18px;
  }

  .event-cta h3 {
    font-size: 30px;
  }

  .event-gallery-grid img {
    height: 240px;
  }
}
/* ==================================================
   FACILITY MANAGEMENT SERVICES
================================================== */

/* ===============================
   FACILITY HERO
=============================== */
.facility-hero {
  height: 80vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/DSC_2897.JPG") center/cover no-repeat;
}

.facility-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.facility-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.facility-hero p {
  color: #e0e0e0;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ===============================
   FACILITY INTRO
=============================== */
.facility-intro {
  padding: 90px 0;
  background: var(--white);
}

.facility-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.facility-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* ===============================
   FACILITY SERVICES
=============================== */
.facility-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.facility-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.facility-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.facility-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.facility-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.facility-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* ===============================
   FACILITY INDUSTRIES
=============================== */
.facility-industries {
  background: var(--light-gray);
  padding: 90px 0;
}

.facility-industries h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.facility-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.facility-list li {
  background: var(--white);
  padding: 18px 22px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   FACILITY CTA
=============================== */
.facility-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}
/* ==================================================
   INDUSTRIAL SECURITY SERVICES
================================================== */

/* ===============================
   INDUSTRIAL HERO
=============================== */
.industrial-hero {
  height: 80vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/industry.JPG") center/cover no-repeat;
}

.industrial-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.industrial-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.industrial-hero p {
  color: #e0e0e0;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ===============================
   INDUSTRIAL INTRO
=============================== */
.industrial-intro {
  padding: 90px 0;
  background: var(--white);
}

.industrial-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.industrial-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* ===============================
   INDUSTRIAL SERVICES
=============================== */
.industrial-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.industrial-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.industrial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.industrial-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.industrial-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.industrial-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.industrial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* ===============================
   INDUSTRIAL RISKS
=============================== */
.industrial-risks {
  background: var(--light-gray);
  padding: 90px 0;
}

.industrial-risks h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.industrial-risk-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.industrial-risk-list li {
  background: var(--white);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   INDUSTRIAL CTA
=============================== */
.industrial-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}
/* ===============================
   INDUSTRIES WE SECURE
=============================== */
.industrial-industries {
  background: var(--white);
  padding: 90px 0;
}

.industrial-industries h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 15px;
  text-align: center;
}

.industries-intro {
  max-width: 850px;
  margin: 0 auto 50px;
  text-align: center;
  font-size: 16px;
  color: #555;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.industry-card {
  background: var(--light-gray);
  padding: 22px;
  font-weight: 600;
  color: var(--navy-blue);
  text-align: center;
  border-left: 6px solid var(--primary-red);
  transition: 0.3s ease;
}

.industry-card:hover {
  background: var(--white);
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .industrial-industries h3 {
    font-size: 28px;
  }
}
/* ==================================================
   MANNED GUARDING SERVICES
================================================== */

/* ===============================
   GUARDING HERO
=============================== */
.guarding-hero {
  height: 80vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/guard.JPG") center/cover no-repeat;
}

.guarding-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.guarding-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.guarding-hero p {
  color: #e0e0e0;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ===============================
   GUARDING INTRO
=============================== */
.guarding-intro {
  padding: 90px 0;
  background: var(--white);
}

.guarding-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.guarding-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* ===============================
   GUARDING SERVICES
=============================== */
.guarding-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.guarding-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.guarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.guarding-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.guarding-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.guarding-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.guarding-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* ===============================
   GUARDING INDUSTRIES
=============================== */
.guarding-industries {
  background: var(--light-gray);
  padding: 90px 0;
}

.guarding-industries h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.guarding-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.guarding-list li {
  background: var(--white);
  padding: 18px 22px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   GUARDING CTA
=============================== */
.guarding-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}

/* ==================================================
   MANNED GUARDING – EXTENDED SECTIONS
================================================== */

/* TRAINING */
.guarding-training {
  padding: 90px 0;
  background: var(--white);
}

.guarding-training h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 15px;
}

.section-intro {
  max-width: 850px;
  margin: 0 auto 50px;
  text-align: center;
  font-size: 16px;
  color: #555;
}

.training-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.training-list li {
  background: var(--light-gray);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* SUPERVISION */
.guarding-supervision {
  padding: 90px 0;
  background: var(--navy-blue);
}

.guarding-supervision h3 {
  color: var(--white);
  font-size: 34px;
  text-align: center;
  margin-bottom: 50px;
}

.supervision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.supervision-card {
  background: var(--white);
  padding: 30px;
  border-left: 6px solid var(--primary-red);
}

.supervision-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

/* COMPLIANCE */
.guarding-compliance {
  padding: 90px 0;
  background: var(--light-gray);
}

.guarding-compliance h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 40px;
}

.compliance-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.compliance-list li {
  background: var(--white);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}
/* ==================================================
   RESIDENTIAL SECURITY SERVICES
================================================== */

/* HERO */
.residential-hero {
  height: 80vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/ak.jpeg") center/cover no-repeat;
}

.residential-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.residential-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.residential-hero p {
  color: #e0e0e0;
  font-size: 20px;
}

/* INTRO */
.residential-intro {
  padding: 90px 0;
  background: var(--white);
}

.residential-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.residential-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* SERVICES */
.residential-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.residential-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.residential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.residential-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.residential-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.residential-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.residential-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* COMMUNITY TYPES */
.residential-types {
  background: var(--light-gray);
  padding: 90px 0;
}

.residential-types h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.residential-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.residential-list li {
  background: var(--white);
  padding: 18px 22px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* COMPLIANCE */
.residential-compliance {
  padding: 90px 0;
  background: var(--white);
}

.residential-compliance h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 40px;
}

/* CTA */
.residential-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}
/* ==================================================
   SECURITY CONSULTANCY SERVICES
================================================== */

/* HERO */
.consultancy-hero {
  height: 80vh;
  background:
    linear-gradient(rgba(10,26,47,0.88), rgba(10,26,47,0.88)),
    url("../img/SC.JPG") center/cover no-repeat;
}

.consultancy-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.consultancy-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.consultancy-hero p {
  color: #e0e0e0;
  font-size: 20px;
}

/* INTRO */
.consultancy-intro {
  padding: 90px 0;
  background: var(--white);
}

.consultancy-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.consultancy-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* SERVICES */
.consultancy-services {
  background: var(--navy-blue);
  padding: 90px 0;
}

.consultancy-services h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.consultancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.consultancy-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.consultancy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.consultancy-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.consultancy-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* PROCESS */
.consultancy-process {
  padding: 90px 0;
  background: var(--white);
}

.consultancy-process h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 50px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.process-step {
  background: var(--light-gray);
  padding: 30px;
  border-left: 6px solid var(--primary-red);
}

.process-step span {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary-red);
}

.process-step h4 {
  margin: 10px 0;
  color: var(--navy-blue);
}

/* INDUSTRIES */
.consultancy-industries {
  background: var(--light-gray);
  padding: 90px 0;
}

.consultancy-industries h3 {
  font-size: 34px;
  color: var(--navy-blue);
  margin-bottom: 40px;
  text-align: center;
}

.consultancy-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.consultancy-list li {
  background: var(--white);
  padding: 18px 22px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* CTA */
.consultancy-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}
/* ===============================
   CONSULTANCY DELIVERABLES
=============================== */
.consultancy-deliverables {
  padding: 90px 0;
  background: var(--light-gray);
}

.consultancy-deliverables h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 20px;
}

.deliverables-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.deliverables-list li {
  background: var(--white);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}
/* ===============================
   CONSULTANCY STANDARDS
=============================== */
.consultancy-standards {
  padding: 90px 0;
  background: var(--navy-blue);
}

.consultancy-standards h3 {
  font-size: 34px;
  color: var(--white);
  text-align: center;
  margin-bottom: 40px;
}

.standards-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.standards-list li {
  background: var(--white);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* ===============================
   CONSULTANCY TRUST
=============================== */
.consultancy-trust {
  padding: 90px 0;
  background: var(--white);
}

.consultancy-trust h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 40px;
}

.trust-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.trust-list li {
  background: var(--light-gray);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}
/* ==================================================
   SECURITY TRAINING SERVICES
================================================== */

/* HERO */
.training-hero {
  height: 80vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/td\ h.JPG") center/cover no-repeat;
}

.training-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.training-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.training-hero p {
  color: #e0e0e0;
  font-size: 20px;
}

/* INTRO */
.training-intro {
  padding: 90px 0;
  background: var(--white);
}

.training-intro h2 {
  font-size: 38px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.training-intro p {
  font-size: 17px;
  color: #444;
  margin-bottom: 15px;
  max-width: 950px;
}

/* PROGRAMS */
.training-programs {
  background: var(--navy-blue);
  padding: 90px 0;
}

.training-programs h3 {
  color: var(--white);
  font-size: 34px;
  margin-bottom: 50px;
  text-align: center;
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.training-card {
  background: var(--white);
  padding: 32px;
  border-left: 6px solid var(--primary-red);
  border-radius: 6px;
  transition: 0.3s ease;
}

.training-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.training-card h4 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

/* PROCESS */
.training-process {
  padding: 90px 0;
  background: var(--white);
}

.training-process h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 50px;
}

/* GALLERY */
.training-gallery {
  padding: 90px 0;
  background: var(--light-gray);
}

.training-gallery h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 10px;
}

.training-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.training-gallery-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

/* STANDARDS */
.training-standards {
  padding: 90px 0;
  background: var(--white);
}

.training-standards h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 40px;
}

.standards-list {
  list-style: none;
  max-width: 900px;
  margin: auto;
}

.standards-list li {
  background: var(--light-gray);
  padding: 18px 22px;
  margin-bottom: 15px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* CTA */
.training-cta {
  background: var(--primary-red);
  color: var(--white);
  text-align: center;
  padding: 90px 20px;
}
/* ==================================================
   CAREERS PAGE
================================================== */

/* HERO */
.careers-hero {
  height: 70vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/hero.jpg") center/cover no-repeat;
}

.careers-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.careers-hero h1 {
  color: var(--white);
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 10px;
}

.careers-hero p {
  color: #e0e0e0;
  font-size: 20px;
}

/* JOBS */
.careers-jobs {
  padding: 90px 0;
  background: var(--white);
}

.careers-jobs h2 {
  font-size: 36px;
  color: var(--navy-blue);
  margin-bottom: 10px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

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

.job-card {
  background: var(--light-gray);
  padding: 28px;
  border-left: 6px solid var(--primary-red);
  transition: 0.35s ease;
  cursor: pointer;
}

.job-card h3 {
  color: var(--navy-blue);
  margin-bottom: 10px;
}

.job-card p {
  font-size: 15px;
  color: #555;
  margin-bottom: 15px;
}

.job-card span {
  font-weight: 600;
  color: var(--primary-red);
}

.job-card:hover {
  background: var(--white);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* FORM */
.careers-form {
  padding: 90px 0;
  background: var(--navy-blue);
  color: var(--white);
}

.careers-form h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.job-application-form {
  margin-top: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.job-application-form input,
.job-application-form select,
.job-application-form textarea {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
}

.job-application-form textarea {
  margin-top: 20px;
  min-height: 120px;
  resize: vertical;
}

.job-application-form button {
  margin-top: 30px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .careers-hero h1 {
    font-size: 40px;
  }
}
/* ==================================================
   CAREERS INTERACTIVITY
================================================== */

/* MODAL */
.job-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10,26,47,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.job-modal-content {
  background: var(--white);
  max-width: 500px;
  padding: 30px;
  border-radius: 6px;
  position: relative;
}

.job-modal-content h3 {
  color: var(--navy-blue);
  margin-bottom: 15px;
}

.job-modal-content p {
  color: #444;
  line-height: 1.6;
}

.close-modal {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: var(--primary-red);
}

/* FILE INPUT */
input[type="file"] {
  background: var(--white);
}
/* ==================================================
   CLIENT REVIEWS
================================================== */

/* HERO */
.reviews-hero {
  height: 60vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/hero.jpg") center/cover no-repeat;
}

.reviews-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.reviews-hero h1 {
  color: var(--white);
  font-size: 56px;
  margin-bottom: 10px;
}

.reviews-hero p {
  color: #e0e0e0;
  font-size: 20px;
}

/* REVIEWS GRID */
.reviews-section {
  padding: 90px 0;
  background: var(--light-gray);
}

.reviews-section h2 {
  font-size: 36px;
  color: var(--navy-blue);
  margin-bottom: 10px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.reviews-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 25px;
}

.review-card {
  background: var(--white);
  padding: 28px;
  border-top: 5px solid var(--primary-red);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  transition: 0.3s ease;
}

.review-card p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

.review-card h4 {
  color: var(--navy-blue);
  font-size: 16px;
}

.review-card span {
  font-size: 13px;
  color: var(--primary-red);
  font-weight: 600;
}

.review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-hero h1 {
    font-size: 38px;
  }
}

@media (max-width: 480px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   OUR CLIENTS PAGE
================================================== */

/* HERO */
.clients-hero {
  height: 60vh;
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.85)),
    url("../img/guards1.JPG") center/cover no-repeat;
}

.clients-hero-overlay {
  height: 100%;
  display: flex;
  align-items: center;
}

.clients-hero h1 {
  color: var(--white);
  font-size: 56px;
  margin-bottom: 10px;
}

.clients-hero p {
  color: #e0e0e0;
  font-size: 20px;
}

/* TRUST SECTION */
.client-trust {
  padding: 90px 0;
  background: var(--white);
}

.trust-flex {
  display: flex;
  gap: 60px;
  align-items: center;
}

.trust-logo img {
  max-width: 260px;
}

.trust-content h2 {
  font-size: 36px;
  color: var(--navy-blue);
  margin-bottom: 20px;
  border-left: 6px solid var(--primary-red);
  padding-left: 15px;
}

.trust-content p {
  font-size: 16px;
  color: #555;
  margin-bottom: 15px;
  line-height: 1.7;
}

/* VALUES */
.client-values {
  background: var(--light-gray);
  padding: 90px 0;
}

.client-values h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 50px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.value-card {
  background: var(--white);
  padding: 22px;
  font-weight: 600;
  border-left: 6px solid var(--primary-red);
}

/* CLIENT LOGOS */
.client-logos-section {
  padding: 90px 0;
  background: var(--white);
}

.client-logos-section h3 {
  font-size: 34px;
  color: var(--navy-blue);
  text-align: center;
  margin-bottom: 10px;
}

.client-logos-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  align-items: center;
}

.client-logos-grid img {
  max-height: 80px;
  margin: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s ease;
}

.client-logos-grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .trust-flex {
    flex-direction: column;
    text-align: center;
  }

  .trust-content h2 {
    border-left: none;
    padding-left: 0;
  }

  .clients-hero h1 {
    font-size: 38px;
  }
}
/* ===============================
   TESTIMONIALS (REFERENCE STYLE)
=============================== */
.testimonials-ref {
  padding: 100px 0;
  background: #f7f7f7;
}

.testimonials-heading {
  text-align: center;
  margin-bottom: 70px;
}

.testimonials-heading h2 {
  font-size: 14px;
  letter-spacing: 2px;
  color: #bfa14a; /* gold tone */
  margin-bottom: 8px;
}

.testimonials-heading p {
  font-size: 28px;
  font-weight: 600;
  color: #222;
}

/* GRID */
.testimonials-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

/* CARD */
.testimonial-ref-card {
  background: #ffffff;
  padding: 45px 35px 40px;
  text-align: center;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  transition: all 0.35s ease;
}

.testimonial-ref-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.15);
}

/* QUOTE */
.quote-mark {
  font-size: 60px;
  color: #d6b25e;
  position: absolute;
  top: 20px;
  left: 25px;
  font-family: serif;
}

/* IMAGE */
.testimonial-ref-card img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;
  margin: 10px auto 20px;
}

/* TEXT */
.testimonial-ref-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 22px;
}

.testimonial-ref-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.testimonial-ref-card .role {
  font-size: 14px;
  color: #888;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .testimonials-heading p {
    font-size: 22px;
  }
}


/* =========================
   GLOBAL HELPERS
========================= */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

section {
  padding: 70px 0;
}

h1, h2, h3, h4 {
  color: #0a1a2f; /* Navy Blue */
  margin-bottom: 15px;
}

p {
  color: #333;
  line-height: 1.7;
  font-size: 16px;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}

/* =========================
   HERO SECTION
========================= */
.om-hero {
  background: url("../images/om-hero.jpg") center/cover no-repeat;
  height: 420px;
  position: relative;
}

.om-hero-overlay {
  background: rgba(10, 26, 47, 0.75);
  height: 100%;
  display: flex;
  align-items: center;
}

.om-hero h1 {
  color: #fff;
  font-size: 42px;
  margin-bottom: 10px;
}

.om-hero p {
  color: #ddd;
  font-size: 18px;
}

/* =========================
   INTRO
========================= */
.om-intro {
  background: #ffffff;
  text-align: center;
}

.om-intro h2 {
  font-size: 32px;
}

.om-intro p {
  max-width: 850px;
  margin: 10px auto;
}

/* =========================
   SERVICES GRID
========================= */
.om-services {
  background: #f5f6f8;
}

.om-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.om-card {
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 6px;
  border-top: 4px solid #c40000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.om-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.om-card h4 {
  margin-bottom: 10px;
  font-size: 18px;
}

/* =========================
   TRAINING / MANPOWER
========================= */
.om-training {
  background: #ffffff;
}

.section-intro {
  max-width: 800px;
  margin-bottom: 25px;
}

.training-list li {
  list-style: disc;
}

/* =========================
   SUPERVISION
========================= */
.om-supervision {
  background: #f5f6f8;
}

.supervision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 35px;
}

.supervision-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 6px;
  border-left: 4px solid #0a1a2f;
}

.supervision-card h4 {
  margin-bottom: 8px;
}

/* =========================
   COMPLIANCE
========================= */
.om-compliance {
  background: #ffffff;
}

.compliance-list li {
  list-style: square;
}

/* =========================
   CTA
========================= */
.om-cta {
  background: #0a1a2f;
  color: #fff;
  text-align: center;
}

.om-cta h3 {
  color: #fff;
  font-size: 30px;
}

.om-cta p {
  color: #ddd;
  max-width: 700px;
  margin: 10px auto 25px;
}

.cta-button {
  display: inline-block;
  background: #c40000;
  color: #fff;
  padding: 14px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #a80000;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .om-hero h1 {
    font-size: 32px;
  }

  section {
    padding: 55px 0;
  }
}
    /* ======================================
   TRUSTED CLIENTS SECTION
====================================== */
.clients-section {
  background: #ffffff;
  padding: 90px 20px;
}

/* HEADER */
.clients-section .section-header {
  max-width: 820px;
  margin: 0 auto 50px;
  text-align: center;
}

.clients-section .sub-heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-red);
  margin-bottom: 10px;
}

.clients-section h2 {
  font-size: 44px;
  color: var(--text-main);
}

.clients-section h2 span {
  color: var(--primary-red);
}

.clients-section p {
  margin-top: 10px;
  font-size: 15px;
  color: #64748b;
}

/* SINGLE IMAGE */
.clients-image-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.clients-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ======================================
   GRID
====================================== */
.clients-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Desktop: 5 */
  gap: 30px;
  align-items: center;
}

/* LOGO CARD */
.client-logo {
  background: #f8fafc;
  border-radius: 14px;
  padding: 26px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 35px rgba(0,0,0,0.08);
  transition: var(--transition);
}

.client-logo:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 65px rgba(0,0,0,0.14);
}

/* LOGO IMAGE */
.client-logo img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: var(--transition);
}

.client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 1024px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .clients-section {
    padding: 80px 16px;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 */
    gap: 20px;
  }

  .clients-section h2 {
    font-size: 34px;
  }

  .client-logo img {
    max-height: 50px;
  }
}

@media (max-width: 480px) {
  .client-logo {
    padding: 22px 16px;
  }
}