@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

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

/* ==========================================
   PRIMARY FONT (Bebas Neue)
   ========================================== */
@font-face {
  font-family: BebasNeue;
  src: url("../fonts/Bebas_Neue/BebasNeue-Regular.woff2");
  display:swap;
}

/* ==========================================
   JOST FONT FAMILY (REGULAR & ITALIC)
   ========================================== */
/* 100 - Thin */
@font-face {
  font-family: JostThin;
  src: url("../fonts/Jost/Jost-Thin.woff2");
  display:swap;
}

@font-face {
  font-family: JostThinItalic;
  src: url("../fonts/Jost/Jost-ThinItalic.woff2");
  display:swap;
}

/* 200 - ExtraLight */
@font-face {
  font-family: JostExtraLight;
  src: url("../fonts/Jost/Jost-ExtraLight.woff2");
  display:swap;
}

@font-face {
  font-family: JostExtraLightItalic;
  src: url("../fonts/Jost/Jost-ExtraLightItalic.woff2");
  display:swap;
}

/* 300 - Light */
@font-face {
  font-family: JostLight;
  src: url("../fonts/Jost/Jost-Light.woff2");
  display:swap;
}

@font-face {
  font-family: JostLightItalic;
  src: url("../fonts/Jost/Jost-LightItalic.woff2");
  display:swap;
}

/* 400 - Regular / Italic */
@font-face {
  font-family: JostRegular;
  src: url("../fonts/Jost/Jost-Regular.woff2");
  display:swap;
}

@font-face {
  font-family: JostItalic;
  src: url("../fonts/Jost/Jost-Italic.woff2");
  display:swap;
}

/* 500 - Medium */
@font-face {
  font-family: JostMedium;
  src: url("../fonts/Jost/Jost-Medium.woff2");
  display:swap;
}

@font-face {
  font-family: JostMediumItalic;
  src: url("../fonts/Jost/Jost-MediumItalic.woff2");
  display:swap;
}

/* 600 - SemiBold */
@font-face {
  font-family: JostSemiBold;
  src: url("../fonts/Jost/Jost-SemiBold.woff2");
  display:swap;
}

@font-face {
  font-family: JostSemiBoldItalic;
  src: url("../fonts/Jost/Jost-SemiBoldItalic.woff2");
  display:swap;
}

/* 700 - Bold */
@font-face {
  font-family: JostBold;
  src: url("../fonts/Jost/Jost-Bold.woff2");
  display:swap;
}

@font-face {
  font-family: JostBoldItalic;
  src: url("../fonts/Jost/Jost-BoldItalic.woff2");
  display:swap;
}

/* 800 - ExtraBold */
@font-face {
  font-family: JostExtraBold;
  src: url("../fonts/Jost/Jost-ExtraBold.woff2");
  display:swap;
}

@font-face {
  font-family: JostExtraBoldItalic;
  src: url("../fonts/Jost/Jost-ExtraBoldItalic.woff2");
  display:swap;
}

/* 900 - Black */
@font-face {
  font-family: JostBlack;
  src: url("../fonts/Jost/Jost-Black.woff2");
  display:swap;
}

@font-face {
  font-family: JostBlackItalic;
  src: url("../fonts/Jost/Jost-BlackItalic.woff2");
  display:swap;
}

/* ==========================================
   ROOT VARIABLES
   ========================================== */
:root {
  --Primary-font: BebasNeue;

  /* Regular Styles */
  --font-100: JostThin;
  --font-200: JostExtraLight;
  --font-300: JostLight;
  --font-400: JostRegular;
  --font-500: JostMedium;
  --font-600: JostSemiBold;
  --font-700: JostBold;
  --font-800: JostExtraBold;
  --font-900: JostBlack;

  /* Italic Styles */
  --font-100i: JostThinItalic;
  --font-200i: JostExtraLightItalic;
  --font-300i: JostLightItalic;
  --font-400i: JostItalic;
  --font-500i: JostMediumItalic;
  --font-600i: JostSemiBoldItalic;
  --font-700i: JostBoldItalic;
  --font-800i: JostExtraBoldItalic;
  --font-900i: JostBlackItalic;

  --primary: #0D235C;
  --secondary: #D01C24;
  --secondary-light: #ff373f;
  --primary-gradient: linear-gradient(82.98deg, #0D235C 0%, #000a24 123.52%);
}

.gradient-text {
  background: linear-gradient(82.98deg, #D01C24 0%, #b20009 123.52%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  /* display: inline-block; */
}












body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  background: #fff;
  font-family: var(--font-400);
  line-height: 1.5;
  color: #6a7382;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 15px;
  color: #1B2A4E;
  margin-top: 0;
  line-height: 1.5;
  font-family: var(--Primary-font);
}

p {
  margin-bottom: 15px;
  color: #6a7382;
}

/* Navbar */

.navbar-nav li {}

.navbar-nav li a {
  font-family: var(--font-400);
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff !important;
  display: inline-block;
  position: relative;
}

.navbar-nav li a:hover {
  color: #ffffff !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #ffffff !important;
}

.header.sticky li a {
  color: white !important;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-nav .nav-link::after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: var(--secondary);
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
  left: 0;
}

ul.dropdown-menu {
  padding: 0;
}

.dropdown-menu li:hover,
.dropdown-menu li:hover a {
  background: white;
  color: #000001 !important;
}

.navbar-brand img {
  /* width: 245px;
  height: 115px; */
  width: auto;
  transition: 0.6s;
  width: 70px !important;
}

.navbar-nav li a {
  font-size: 1rem;
  font-weight: 400;
  color: #000001;
}

.header-wrapper {
  padding: 18px 22px;
  background: linear-gradient(0deg, #111520, #111520), #151927;
  border: 2px solid #FFFFFF;
  transition: .3s;
}

.offcanvas {
  background-color: #000001;
}

.offcanvas .navbar-nav .dropdown-menu {
  margin-top: 10px;
  border-radius: 8px;
}

.offcanvas .navbar-nav .dropdown-menu li {
  padding: 10px 0;
}

.offcanvas .navbar-nav .dropdown-menu li:hover,
.offcanvas .navbar-nav .dropdown-menu li:hover a {
  border-radius: 8px;
}

.offcanvas .btn-close svg {
  fill: white;
}

.offcanvas-header>img {
  width: 15rem;
}

.dropdown-menu {
  background-color: var(--primary);
  border-radius: 0px;
}

.dropdown-item {
  background: none !important;
}

.dropdown-menu li {
  padding: 6px 10px;
}

/* section */

section {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* top bar */
.top-bar {
  padding: 16px 0;
  background: #0D1F2D;
}

.top-bar-social>a {
  font-size: 16px;
}

.top-bar-contact>a {
  font-size: 15px;
}

.top-bar-contact {
  text-align: end;
}

.top-bar-contact>a {
  color: #fff;
  padding-right: 20px;
  font-weight: 600;
  text-decoration: none;
}

/* end */
/* header */
.header {
  padding: 15px 0 15px 0;
  z-index: 999;
  transition: 0.6s;
  position: fixed;
  width: 100%;
  top: -10px;
}

header.sticky .header-wrapper {
  top: -10px;
  padding: 14px !important;
}

header.sticky #navbarNav {
  border-bottom: 0px !important;
}

header.sticky img {
  width: auto;
  transition: all 0.5s ease-in-out;
}

ul.navbar-nav {
  gap: 26px;
}

.navbar-dark .navbar-nav .nav-link {
  padding-bottom: 3px;
}

/* top banner */
.top-banner {
  background: url("../images/top-banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.top-banner .right-col h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 10px;
  color: white;
}

.top-banner .right-col p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 0;
}


/* End */

/* partner */
.client {
  padding-top: 25px;
  padding-bottom: 24px;
  margin-top: -98px;
  background: white;
  backdrop-filter: blur(50px);
}

.client img {
  margin: auto;
}

/* end */

/* contact us */

.contact-us {
  padding-top: 60px;
  padding-bottom: 70px;
  background: url("../images/contact-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

/* end */

/* form */
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-control {
  resize: none;
  display: block;
  width: 100%;
  padding: 16px 15px;
  font-size: 1rem;
  border-radius: 8px;
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid #1e1e1e42;
  color: #ffffff !important;
  background-color: transparent;
}

.form-control:focus {
  background-color: transparent;
  border-color: var(--secondary);
  box-shadow: none !important;
  outline: none !important;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #1e1e1e !important;
  font-weight: 400;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #1e1e1e !important;
  font-weight: 400;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #1e1e1e !important;
  font-weight: 400;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: white !important;
  font-weight: 400;
}

/* end */

/* Button */

.btn-theme {
  border: 2px solid var(--secondary);
  padding: 10px 35px;
  display: inline-block;
  font-weight: 500;
  transition: all ease-in-out 0.3s;
  font-size: 1rem;
  border-radius: 50px;
  font-family: var(--Primary-font);
  background: var(--primary);
  color: var(--secondary);
  font-size: 20px;
  color: white;
  border-radius: 0;
  background: var(--secondary);
}

.btn-theme:hover {
  border: 2px solid var(--secondary-light);
  background: var(--secondary-light);
  color: white;
}

.btn-check:focus+.btn,
.btn:focus {
  outline: 0;
  box-shadow: none;
}

/* end */

/* footer */
.footer {
  padding-top: 70px;
  padding-bottom: 20px;
  background: #0D1F2D;
}

.footer-logo img {
  width: 70px;
}

.footer-logo p {
  color: white;
  margin-top: 20px;
  font-size: 1rem;
  display: inline-block;
  font-weight: 400;
}

.footer-links>h6 {
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 0;
  font-weight: 600;
}

.footer-links>p {
  color: white;
  font-size: 1rem;
  margin-top: 16px;
  margin-bottom: 0px;
  font-weight: 400;
}

.footer-links>ul>li {
  padding: 20px 0px 0 0px;
  color: white;
  transition: all ease-in-out 0.3s;
}

.footer-links>ul>li:hover {
  color: #546DD4;
}

.footer-links>ul>li>a {
  text-decoration: none;
  font-size: 1rem;
  color: white;
  font-weight: 400;
  transition: all ease-in-out 0.3s;
}

.footer-links>ul>li>a:hover {
  color: #FFE100;
  padding-left: 10px;
}

.social>p>span {
  margin: 0;
  margin-right: 15px;
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
}

.social>p>a {
  color: #FFE100;
  margin: 0 5px;
  font-size: 1.2rem;
  transition: all ease-in-out 0.3s;
  padding: 0px 16px 0 0;
  border-radius: 30px;
}

.social>p>a:hover {
  color: #ffffff;
}

.footer-bootom-links>p {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
}

.footer input,
.footer input:focus {
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-right: none;
  border-radius: 0;
}

.footer button,
.footer input,
.footer input:focus {
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}

.footer input {
  color: #ffffff !important;
  background: transparent;
}

.footer input::placeholder {
  color: white !important;
}

.footer button {
  border-radius: 0;
  background: 0 0;
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-left: none;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 1rem;
  background: transparent;
}

.footer-links>ul>li img {
  margin-right: 8px;
}

.footer-links>ul>li p {
  font-size: 1rem;
  color: #9f9f9f;
  font-weight: 600;
  margin-bottom: 5px;
}

.footer-links>ul>li a {
  text-decoration: none;
  font-size: 1rem;
  color: #ffffff;
  font-weight: 400;
  transition: all ease-in-out 0.3s;
}

.social-link>p>a:nth-child(1) {
  border-right: 2px solid white;
}

hr {
  background-color: white;
  opacity: 1;
}

.social-link>p>a {
  color: #ffffff;
  margin: 0 5px;
  transition: all ease-in-out 0.3s;
  padding: 0px 10px 0 0;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
}

.social-link>p>a:hover {
  color: #FFE100;
}

.footer-bootom-links>span {
  margin: 0;
  color: white;
  font-size: 1rem;
  font-weight: 400;
}

/* end */

.animate-up {
  animation: up 3s ease-in-out infinite;
}

@keyframes up {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }

  100% {
    transform: translateY(0);
  }
}

/*scroll*/
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-color: var(--secondary);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #000001;
}

/* model popup */
.model-discount .animate-div >span {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--primary);
  font-family: var(--Primary-font);
}

.contact-form-card .iti,
.model-discount .iti{
    width: 100%;
}


.animate-div {
  animation: zoom-in-zoom-out 2s ease-out infinite;
}

.model-discount span label {
  color: #546DD4;
  animation: zoom-in-zoom-out 2s ease-out infinite;
  font-size: 20px;
  font-weight: 700;
}

.model-discount label {
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  display: block;
}

.model-sec .modal-body {
  padding: 0;
  position: relative;
}

.model-sec .modal-content {
  border-radius: 30px;
  border: none;
}

.model-discount {
  padding: 30px 40px 30px 40px;
  background: #ffffff;
  border-radius: 30px;
}

.model-input {
  border-color: #0D1F2D;
  padding: 10px 15px;
  color: #0D1F2D !important;
  border: 2px solid;
}

.model-input:focus {
  border-color: #546DD4 !important;
}

.model-input::placeholder {
  color: #0D1F2D !important;
  font-weight: 500;
}

.model-discount .btn-close {
  position: absolute;
  top: 15px;
  right: 15px;
  box-shadow: none;
}

.model-discount hr {
  background-color: #0D1F2D;
  opacity: 1;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0.9);
    transition: all 0.5s ease-in-out;
  }

  30% {
    transform: scale(1);
    transition: all 0.7s ease-in-out;
  }

  50% {
    transform: scale(1.2);
    transition: all 0.7s ease-in-out;
  }

  50% {
    transform: scale(1);
    transition: all 0.7s ease-in-out;
  }

  100% {
    transform: scale(0.9);
    transition: all 0.7s ease-in-out;
  }
}

/* end */














/* ===================================
   Hero Section Styling
   =================================== */
.hero-section {
  background: #091122 url('../images/hero-bg.png') no-repeat center center / cover;
  padding: 211px 0 0 0;
  /* Extra top padding; bottom is 0 so the image touches the edge */
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

/* Typography */
.hero-content h1 {
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.hero-content h1 span {
  color: #d3122a;
  /* Red accent color */
}

.hero-content p {
  color: #a3b1c6;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 35px;
}

/* Button Container */
.hero-btn-group {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Outline/White Secondary Button Styling */
.btn-theme.white-btn {
  background-color: transparent;
  color: #ffffff;
  border-color: white;
}

.btn-theme.white-btn:hover {
  background-color: #ffffff;
  color: #091122;
  border-color: #ffffff;
}



.img-box-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive Styles */


.stat-counter-section {
  background-color: var(--secondary);
  padding: clamp(1.3rem, 6vw, 2.1rem) 0;
}

.counter-item-wrapper {
  text-align: center;
  margin-bottom: 0;
}


.counter-number {
  color: #ffffff;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 1;
  margin-bottom: 0;
}

.counter-title {
  color: #ffffff;
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  text-transform: uppercase;
  font-family: var(--font-400);
  letter-spacing: 1px;
  margin-bottom: 0;
  padding-top: 5px;
}









/* --- Base Desktop Layout --- */
.who-we-are {
  position: relative;
  background-color: #ffffff;
}

.who-we-are .row {
  display: flex;
  align-items: center;
}

/* --- Content Wrapper --- */
.who-we-are-content {
  padding-right: 30px;
}

.who-we-are-content .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.who-we-are-content .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 10px;
}

.main-heading>h2 {
  font-family: var(--Primary-font);
  font-size: 65px;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.main-heading>h2 span {
  color: var(--secondary);
}

.who-we-are-content .description {
  font-family: var(--font-400);
  font-size: 15px;
  color: #6a7382;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* --- Feature Checklist --- */
.who-we-are-content .feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.who-we-are-content .feature-list li {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  font-family: var(--font-500);
  font-size: 14px;
  color: #1B2A4E;
}

.who-we-are-content .feature-list li i {
  color: var(--secondary);
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}


/* --- Image & Badges Wrapper --- */
.who-we-are-image-wrapper {
  position: relative;
  padding: 20px;
}

.who-we-are-image-wrapper .main-image img {
  width: 100%;
  height: auto;
  display: block;
}

.experience-badge {
  position: absolute;
  bottom: -10px;
  left: -10px;
  background-color: var(--primary);
  color: #ffffff;
  padding: 22px 28px;
  text-align: center;
  z-index: 2;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.experience-badge .badge-number {
  display: block;
  font-family: var(--Primary-font);
  font-size: 46px;
  line-height: 1;
  margin-bottom: 4px;
}

.experience-badge .badge-text {
  display: block;
  font-family: var(--font-600);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cctv-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: var(--primary);
  border: 2px solid #1B2A4E;
  color: #ffffff;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.cctv-badge i {
  font-size: 32px;
}







/* --- Services Section Base --- */
.services-section {
  background-color: #0b101d;
}

/* --- Header Specific Styles --- */
.main-heading.white-heading h2 {
  color: #ffffff;
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 0px;
  letter-spacing: 1px;
}

.services-header-description p {
  color: #9aa4b2;
  font-family: var(--font-400);
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0px;
}

/* --- Service Item Boxes & Hover Effects --- */
.services-grid-row {
  margin-top: 50px;
}

.services-item-box {
  background-color: #121826;
  border: 2px solid #1d2538;
  padding: 40px 30px;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
  border-bottom-color: var(--secondary);
}

.services-item-box:hover {
  border-color: var(--secondary);
  background-color: #161e30;
  transform: translateY(-5px);
}

.services-item-number {
  display: block;
  color: var(--secondary);
  font-family: var(--font-600);
  font-size: 13px;
  margin-bottom: 20px;
}

.services-item-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.services-item-icon i {
  color: var(--secondary);
  font-size: 22px;
}

.services-item-title {
  font-family: var(--Primary-font);
  font-size: 22px;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.services-item-text {
  font-family: var(--font-400);
  font-size: 13px;
  color: #8c97a8;
  line-height: 20px;
  margin-bottom: 0px;
}



/* --- Base Desktop Layout --- */
.security-build-section {
  background-color: #ffffff;
}

/* --- Left Side: Command Center Box --- */
.command-center-wrapper {
  background-color: #2b303a;
  border-radius: 0px;
  overflow: hidden;
}

.command-center-info {
  padding: 45px 40px;
  border-bottom: 1px solid #3c424e;
}

.command-center-title {
  font-family: var(--Primary-font);
  font-size: 32px;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.command-center-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #a3acb9;
  line-height: 20px;
  margin-bottom: 0px;
}

/* --- Stats Grid 2x2 --- */
.command-stats-grid {
  display: flex;
  flex-wrap: wrap;
}

.command-stats-grid .stat-box {
  width: 50%;
  padding: 30px 20px;
  text-align: center;
  border-right: 1px solid #3c424e;
  border-bottom: 1px solid #3c424e;
  background-color: #2b303a;
}

.command-stats-grid .stat-box:nth-child(2n) {
  border-right: none;
}

.command-stats-grid .stat-box:nth-child(3),
.command-stats-grid .stat-box:nth-child(4) {
  border-bottom: none;
}

.command-stats-grid .stat-value {
  font-family: var(--Primary-font);
  font-size: 38px;
  color: var(--secondary);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.command-stats-grid .stat-label {
  display: block;
  font-family: var(--font-600);
  font-size: 11px;
  color: #a3acb9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --- Right Side Content --- */
.security-build-content {
  padding-left: 30px;
}

.security-build-desc {
  font-family: var(--font-400);
  font-size: 14px;
  color: #6a7382;
  line-height: 22px;
  margin-bottom: 30px;
}

/* --- Features List --- */
.security-feature-list {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.security-feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}

.security-feature-item:last-child {
  margin-bottom: 0px;
}

.security-feature-item .feature-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--secondary);
  background-color: #fff0f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  border-radius: 3px;
}

.security-feature-item .feature-icon i {
  color: var(--secondary);
  font-size: 16px;
}

.security-feature-item .feature-text h5 {
  font-family: var(--Primary-font);
  font-size: 18px;
  color: #1B2A4E;
  margin-bottom: 4px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.security-feature-item .feature-text p {
  font-family: var(--font-400);
  font-size: 13px;
  color: #6a7382;
  line-height: 19px;
  margin-bottom: 0px;
}


/* --- Base Desktop Layout --- */
.ser-01 {
  background-image: url('../images/ser-01-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 70px 0;
}

/* Header Adjustments */
.ser-01-header {
  margin-bottom: 50px;
}

.ser-01-header .sub-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ser-01-header .sub-title::before,
.ser-01-header .sub-title::after {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
}

.ser-01-header .sub-title::before {
  margin-right: 12px;
}

.ser-01-header .sub-title::after {
  margin-left: 12px;
}

.ser-01-header .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.ser-01-header .description {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  margin-top: 15px;
  margin-bottom: 0px;
}

/* Counter Box Item */
.ser-01-counter-box {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 35px 20px;
  text-align: center;
  position: relative;
  background: rgba(18, 24, 38, 0.4);
  backdrop-filter: blur(5px);
  transition: all 0.4s ease;
  /* cursor: pointer; */
}

.ser-01-counter-box .top-line {
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--secondary);
  margin: 0 auto 20px auto;
  transition: width 0.4s ease;
}

.ser-01-counter-box .counter-number {
  font-family: var(--Primary-font);
  font-size: 44px;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.ser-01-counter-box .counter-label {
  font-family: var(--font-600);
  font-size: 11px;
  color: #8c97a8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0px;
  transition: color 0.3s ease;
}

/* Hover Animation */
.ser-01-counter-box:hover {
  border-color: var(--secondary);
  background: rgba(18, 24, 38, 0.8);
  /* transform: translateY(-8px); */
  box-shadow: 0px 10px 25px rgba(208, 28, 36, 0.2);
}

.ser-01-counter-box:hover .top-line {
  width: 60px;
}

.ser-01-counter-box:hover .counter-label {
  color: #ffffff;
}



/* --- Base Desktop Layout --- */
.process-section {
  background-color: #ffffff;
  position: relative;
}

.process-header-content {
  margin-bottom: 50px;
}

.process-steps-row {
  position: relative;
}

/* Red Connecting Line behind boxes (Desktop Only) */
@media (min-width: 992px) {
  .process-steps-row::before {
    content: "";
    position: absolute;
    top: 35px;
    /* Center aligned with 70px high boxes */
    left: 12%;
    right: 12%;
    height: 2px;
    background-color: var(--secondary);
    z-index: 1;
  }
}

.process-step-item {
  text-align: center;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.step-number-box {
  width: 70px;
  height: 70px;
  background-color: #0b101d;
  border: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px auto;
  transition: all 0.3s ease;
}

.step-number-box span {
  font-family: var(--Primary-font);
  font-size: 24px;
  color: var(--secondary);
  line-height: 1;
  transition: color 0.3s ease;
}

.step-title {
  font-family: var(--font-600);
  font-size: 18px;
  color: #1B2A4E;
  margin-bottom: 12px;
  line-height: 1.3;
}

.step-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #6a7382;
  line-height: 20px;
  margin-bottom: 0px;
}

/* --- Desktop-Only Hover Animation --- */
@media (min-width: 992px) and (hover: hover) {
  .process-step-item:hover {
    /* transform: translateY(-8px); */
  }

  .process-step-item:hover .step-number-box {
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0px 10px 20px rgba(208, 28, 36, 0.3);
  }

  .process-step-item:hover .step-number-box span {
    color: #ffffff;
  }
}


/* --- Base Desktop Layout --- */
.industries-serve-section {
  background-color: #0b101d;
  position: relative;
}

.industries-header-wrapper {
  margin-bottom: 50px;
}

.industries-grid-row {
  margin-bottom: 45px;
}

/* --- Card Box Styling --- */
.industry-item-box {
  background-color: #121826;
  border-bottom: 2px solid var(--secondary);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industry-image-thumb {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.industry-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.industry-content-body {
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.industry-title {
  font-family: var(--Primary-font);
  font-size: 22px;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.industry-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #8c97a8;
  line-height: 20px;
  margin-bottom: 25px;
  flex-grow: 1;
}

.industry-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-600);
  font-size: 12px;
  color: var(--secondary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.industry-link i {
  font-size: 16px;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

/* --- Desktop Only Hover Effects --- */
@media (min-width: 992px) and (hover: hover) {
  .industry-item-box:hover {
    transform: translateY(-8px);
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.4);
  }

  .industry-item-box:hover .industry-image-thumb img {
    transform: scale(1.08);
  }

  .industry-item-box:hover .industry-link {
    color: var(--secondary-light);
  }

  .industry-item-box:hover .industry-link i {
    transform: translateX(5px);
  }
}

.industries-bottom-action {
  margin-top: 10px;
}



/* --- Section & Grid Layout --- */
.testimonial-video-section {
  /* background-color: #0b101d; */
  padding: 80px 0;
}

.testimonial-video-section .main-heading {
  margin-bottom: 45px;
}

/* --- Text Testimonial Card --- */
.testimonial-text-card {
  background-color: #121826;
  padding: 30px 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.star-rating {
  color: #f5a623;
  font-size: 14px;
  margin-bottom: 15px;
}

.quote-text {
  font-family: var(--font-400);
  font-size: 13px;
  color: #a0aab8;
  line-height: 20px;
  margin-bottom: 25px;
}

.author-meta {
  display: flex;
  align-items: center;
}

.avatar-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--secondary);
  color: #ffffff;
  font-family: var(--font-600);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.author-details .author-name {
  font-family: var(--Primary-font);
  font-size: 15px;
  color: #ffffff;
  margin-bottom: 2px;
  line-height: 1.1;
}

.author-details .author-title {
  font-family: var(--font-400);
  font-size: 11px;
  color: #6a7382;
  display: block;
}

/* --- Video Card Layout --- */
.video-testimonial-card {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #121826;
  cursor: pointer;
}

.video-testimonial-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-testimonial-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Play Button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(184, 24, 32, 0.85);
  border: none;
  color: #ffffff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all 0.3s ease;
}

.video-author-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-author-info .author-name {
  font-family: var(--Primary-font);
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 2px;
  line-height: 1.1;
}

.video-author-info .author-title {
  font-family: var(--font-400);
  font-size: 11px;
  color: #a0aab8;
  display: block;
}

/* Video Playing State Controls */
.video-testimonial-card.is-playing .play-btn {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.8);
}

.video-testimonial-card.is-playing .video-author-info,
.video-testimonial-card.is-playing::after {
  opacity: 0;
}

/* --- Desktop Only Hover Effects --- */
@media (min-width: 992px) and (hover: hover) {
  .testimonial-text-card:hover {
    border-color: var(--secondary);
    transform: translateY(-4px);
  }

  .video-testimonial-card:hover .play-btn {
    background-color: var(--secondary);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(208, 28, 36, 0.4);
  }
}

.testimonial-video-section .main-heading h2 {
  color: black;
  text-align: left;
}

/* --- Base Layout --- */
.faq-section {
  background-color: #0b101d;
  padding: 80px 0;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Header Styling */
.faq-header {
  text-align: center;
  margin-bottom: 45px;
}

.faq-header .sub-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.faq-header .sub-title::before,
.faq-header .sub-title::after {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
}

.faq-header .sub-title::before {
  margin-right: 12px;
}

.faq-header .sub-title::after {
  margin-left: 12px;
}

.faq-header .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.faq-header .description {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  margin-top: 15px;
  margin-bottom: 0px;
}

/* Accordion Outer Container */
.faq-accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background-color: #121826;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease;
}

.faq-item.active {
  border-color: rgba(208, 28, 36, 0.3);
}

/* Accordion Button */
.faq-header-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
}

.faq-question {
  font-family: var(--font-600);
  font-size: 15px;
  color: #ffffff;
  padding-right: 20px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* Red Icon Box */
.faq-icon-box {
  width: 32px;
  height: 32px;
  background-color: rgba(208, 28, 36, 0.15);
  border: 1px solid rgba(208, 28, 36, 0.3);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-item.active .faq-icon-box {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: #ffffff;
}

/* Icon Switching */
.faq-icon-box .icon-active {
  display: none;
}

.faq-icon-box .icon-inactive {
  display: block;
}

.faq-item.active .faq-icon-box .icon-active {
  display: block;
}

.faq-item.active .faq-icon-box .icon-inactive {
  display: none;
}

/* Smooth Height Slide Collapse */
.faq-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-body {
  padding: 0 25px 22px 25px;
}

.faq-body p {
  font-family: var(--font-400);
  font-size: 13px;
  color: #8c97a8;
  line-height: 22px;
  margin: 0;
}






/* --- Base Section Layout --- */
.contact-cta-section {
  background-image: url('../images/contact-cta-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 80px 0;
}

/* --- Left Column Content --- */
.contact-cta-content {
  padding-right: 20px;
}

.contact-cta-content .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-cta-content .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 12px;
}

.contact-cta-content .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.contact-cta-content .cta-desc {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  margin-top: 15px;
  margin-bottom: 35px;
}

/* Info Items List */
.cta-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cta-info-list .info-item {
  display: flex;
  align-items: center;
}

.cta-info-list .icon-box {
  width: 40px;
  height: 40px;
  background-color: rgba(208, 28, 36, 0.15);
  border: 1px solid rgba(208, 28, 36, 0.3);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 15px;
  flex-shrink: 0;
}

.cta-info-list .info-text {
  display: flex;
  flex-direction: column;
}

.cta-info-list .info-text .label {
  font-family: var(--font-700);
  font-size: 10px;
  color: var(--secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}

.cta-info-list .info-text .value {
  font-family: var(--font-500);
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  line-height: 1.3;
}

.cta-info-list .info-text a.value:hover {
  color: var(--secondary);
}

/* --- Right Column Form Card --- */
.contact-form-card {
  background-color: #121826;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-form-card .form-title {
  font-family: var(--Primary-font);
  font-size: 22px;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

.contact-form-card .form-label {
  font-family: var(--font-600);
  font-size: 11px;
  color: #8c97a8;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Inputs, Selects & Textarea */
.contact-form-card .form-control,
.contact-form-card .form-select {
  background-color: #182033;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--font-400);
  font-size: 13px;
  padding: 12px 15px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Light White Placeholders */
.contact-form-card .form-control::placeholder {
  color: #a0aab8;
  opacity: 1;
}

.contact-form-card .form-control::-webkit-input-placeholder {
  color: #a0aab8;
}

.contact-form-card .form-control::-moz-placeholder {
  color: #a0aab8;
  opacity: 1;
}

.contact-form-card .form-control:-ms-input-placeholder {
  color: #a0aab8;
}

/* Dropdown Menu Options Styling */
.contact-form-card .form-select option {
  background-color: #121826;
  color: #ffffff;
  padding: 10px;
}

.contact-form-card .form-select option:disabled {
  color: #718096;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  background-color: #182033;
  border-color: var(--secondary);
  color: #ffffff;
  box-shadow: none;
}

.contact-form-card .privacy-note {
  font-family: var(--font-400);
  font-size: 11px;
  color: #5d6778;
  margin-top: 10px;
  margin-bottom: 0;
}

/* --- Validation & Red Error Spans --- */

/* Input Red Border on Error */
.contact-form-card .was-validated .form-control:invalid,
.contact-form-card .was-validated .form-select:invalid,
.contact-form-card .form-control.is-invalid,
.contact-form-card .form-select.is-invalid {
  border-color: #dc3545 !important;
  background-image: none !important;
  padding-right: 15px !important;
}

/* Reset Valid State */
.contact-form-card .was-validated .form-control:valid,
.contact-form-card .was-validated .form-select:valid,
.contact-form-card .form-control.is-valid,
.contact-form-card .form-select.is-valid {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background-image: none !important;
  padding-right: 15px !important;
}

/* Red Error Message Span */
.contact-form-card span.invalid-feedback {
  display: none;
  color: #dc3545;
  font-family: var(--font-400);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.2;
}

/* Display Red Error Span when Invalid */
.contact-form-card .was-validated .form-control:invalid~span.invalid-feedback,
.contact-form-card .was-validated .form-select:invalid~span.invalid-feedback,
.contact-form-card .form-control.is-invalid~span.invalid-feedback,
.contact-form-card .form-select.is-invalid~span.invalid-feedback {
  display: block;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder,
.contact-form-card select {
  color: #8c97a8 !important;
}













/* ==========================================
   Pre-Footer Ready CTA
========================================== */
.pre-footer-cta {
  background-color: var(--secondary);
  /* Base Red */
  overflow: hidden;
}

.pre-footer-cta .left-col {
  padding: 60px 40px 60px 80px;
}

.pre-footer-cta .right-col {
  background-color: rgba(0, 0, 0, 0.12);
  /* Slightly darker shade on right side */
  padding: 60px 80px 60px 40px;
  height: 100%;
  display: flex;
  align-items: center;
}

.pre-footer-cta .cta-title {
  font-family: var(--Primary-font);
  font-size: 38px;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.pre-footer-cta .cta-subtitle {
  font-family: var(--font-400);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

.pre-footer-cta .cta-btn-group {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.pre-footer-cta .btn-white-solid {
  background-color: #ffffff;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 14px 28px;
  border-radius: 0;
  text-transform: uppercase;
  border: 1px solid #ffffff;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.pre-footer-cta .btn-white-solid:hover {
  background-color: transparent;
  color: #ffffff;
}

.pre-footer-cta .btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  font-family: var(--font-700);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 14px 28px;
  border-radius: 0;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pre-footer-cta .btn-outline-white:hover {
  border-color: #ffffff;
  background-color: #ffffff;
  color: var(--secondary);
}


/* ==========================================
   Site Footer Styling
========================================== */
.site-footer {
  background-color: #0b0e14;
  padding-top: 70px;
  padding-bottom: 30px;
  color: #ffffff;
}

.site-footer .footer-logo img {
  max-width: 70px;
  height: auto;
  margin-bottom: 20px;
}

.site-footer .brand-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #7d8898;
  line-height: 1.6;
  margin-bottom: 25px;
  max-width: 320px;
}

.site-footer .contact-links li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.site-footer .contact-links i {
  color: var(--secondary);
  font-size: 15px;
}

.site-footer .contact-links a {
  font-family: var(--font-500);
  font-size: 13px;
  color: #a0aab8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer .contact-links a:hover {
  color: #ffffff;
}

/* Footer Navigation Widgets */
.site-footer .widget-title {
  font-family: var(--Primary-font);
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.site-footer .footer-menu li {
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 16, 46, 0.4);
}

.site-footer .footer-menu li:last-child {
  border-bottom: none;
}

.site-footer .footer-menu a {
  font-family: var(--font-400);
  font-size: 13px;
  color: #A8B2C1;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.site-footer .footer-menu a:hover {
  color: #ffffff;
  padding-left: 4px;
}

/* Footer Bottom Bar */
.site-footer .footer-bottom {
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .copyright-text {
  font-family: var(--font-400);
  font-size: 12px;
  color: #5c6675;
  margin-bottom: 0;
}

/* Social Buttons */
.site-footer .social-links {
  display: inline-flex;
  gap: 8px;
}

.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #121722;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #7d8898;
  font-family: var(--font-500);
  font-size: 11px;
  text-decoration: none;
  text-transform: lowercase;
  transition: all 0.2s ease;
}

.site-footer .social-links a:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: #ffffff;
}

/* ==========================================
   Custom Non-Bootstrap Services Dropdown Menu
   ========================================== */

.custom-dropdown-wrapper {
  position: relative;
}

.custom-dropdown-wrapper .dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.custom-dropdown-wrapper:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* Hidden container by default */
.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 780px;
  background-color: #0b1727;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
}

/* Smooth Hover Display */
.custom-dropdown-wrapper:hover .custom-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Grid Layout matching the image */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

/* Service Item Links */
.service-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.service-item:hover,
.service-item.active {
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

/* Icon Container Styling */
.service-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background-color: #122338;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.service-icon i {
  font-size: 20px;
  color: #0088ff;
}

.service-item:hover .service-icon {
  background-color: #0088ff;
}

.service-item:hover .service-icon i {
  color: #ffffff;
}

/* Title Styling */
.service-title {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.services-grid a {
  display: flex !important;
}

/* ==========================================
   COMPARISON TABLE SECTION STYLES
   ========================================== */
.sec-table {
  /* background-color: #0b0f19; */
  padding: 80px 0;
}

.comparison-table-wrapper {
  max-width: 980px;
  margin: 40px auto 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  background-color: #121826;
  color: #ffffff;
}

/* Header Styling */
.comparison-table thead tr {
  background-color: #0e131f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.comparison-table th {
  padding: 20px 24px;
  font-family: var(--Primary-font);
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: normal;
  vertical-align: middle;
}

.comparison-table .th-feature {
  color: #a0aab8;
  width: 50%;
}

.comparison-table .th-brand {
  color: var(--secondary);
  /* Primary Red */
  width: 25%;
  background-color: rgba(208, 28, 36, 0.03);
}

.comparison-table .th-typical {
  color: #a0aab8;
  width: 25%;
}

/* Table Body Rows & Alternating Backgrounds */
.comparison-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background-color 0.2s ease;
}

.comparison-table tbody tr:nth-child(odd) {
  background-color: #121826;
}

.comparison-table tbody tr:nth-child(even) {
  background-color: #0e131f;
}

.comparison-table tbody tr:hover {
  background-color: #171f30;
}

.comparison-table td {
  padding: 18px 24px;
  vertical-align: middle;
}

/* Cell Contents */
.comparison-table .feature-name {
  font-family: var(--font-400);
  font-size: 14px;
  color: #d1d5db;
}

/* Highlighted Column Background */
.comparison-table td:nth-child(2) {
  background-color: rgba(208, 28, 36, 0.03);
}

/* Status Icons & Text */
.comparison-table .icon-check {
  color: var(--secondary);
  font-size: 20px;
  display: inline-block;
}

.comparison-table .icon-cross {
  color: #3a4454;
  font-size: 20px;
  display: inline-block;
}

.comparison-table .text-varies {
  font-family: var(--font-400);
  font-size: 13px;
  color: #6b7280;
}

/* ==========================================
   SECURITY IN ACTION SECTION STYLES
   ========================================== */
.security-action-section {
  /* background-color: #0b0f19; */
  padding: 90px 0;
}

.security-action-section .section-top-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #8c97a8;
  line-height: 20px;
  margin: 0;
}

/* Base Action Card Styling */
.action-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border-left: 3px solid var(--secondary);
  /* Red Left Accent Border */
  width: 100%;
  cursor: pointer;
}

/* Card Image & Hover Zoom Effect */
.action-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

.action-card:hover .action-card-img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Dark Gradient Overlay for Typography Readability */
.action-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(to top, rgba(12, 17, 27, 0.95) 0%, rgba(12, 17, 27, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  transition: background 0.3s ease;
}

.action-card:hover .action-card-overlay {
  background: linear-gradient(to top, rgba(12, 17, 27, 0.98) 0%, rgba(208, 28, 36, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
}

/* Overlay Typography */
.action-card-title {
  font-family: var(--Primary-font);
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.action-card-desc {
  font-family: var(--font-400);
  font-size: 12px;
  color: #a0aab8;
  margin: 0;
  line-height: 1.3;
}

/* Aspect Height Classes */
.action-card-tall {
  height: 480px;
}

.action-card-sm {
  height: 228px;
}

.action-card-wide {
  height: 236px;
}


/* ==========================================
   RESULTS / CASE STUDIES SECTION STYLES
   ========================================== */
.sec-results {
  background-color: #080c14;
  padding: 100px 0;
}

.case-studies-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Base Card Layout */
.case-study-card {
  background-color: #111622;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
  border-color: rgba(208, 28, 36, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Image & Badge Container */
.card-img-box {
  position: relative;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
}

.card-img-box .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.case-study-card:hover .card-img-box .card-img {
  transform: scale(1.05);
}

/* Category Badge Overlays */
.category-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--secondary);
  /* Primary Red */
  color: #ffffff;
  font-family: var(--Primary-font);
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  text-transform: uppercase;
  z-index: 2;
}

.category-badge.badge-right {
  left: auto;
  right: 20px;
}

/* Card Content Area */
.card-body-content {
  padding: 35px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-family: var(--Primary-font);
  font-size: 22px;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

/* Challenge, Solution, Result Grid */
.challenge-solution-row {
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-label {
  display: block;
  font-family: var(--font-700);
  font-size: 11px;
  color: var(--secondary);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.info-block p {
  font-family: var(--font-400);
  font-size: 12px;
  color: #8c97a8;
  line-height: 18px;
  margin: 0;
}

/* Metrics Footer */
.card-footer-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
  flex-wrap: wrap;
  gap: 20px;
}

.metrics-group {
  display: flex;
  align-items: center;
  gap: 35px;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-num {
  font-family: var(--Primary-font);
  font-size: 26px;
  color: var(--secondary);
  line-height: 1;
  margin-bottom: 4px;
}

.metric-lbl {
  font-family: var(--font-600);
  font-size: 10px;
  color: #6b7280;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.case-study-link {
  font-family: var(--Primary-font);
  font-size: 14px;
  color: var(--secondary);
  letter-spacing: 1.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.case-study-link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* ==========================================
   ONBOARDING BANNER BOX COMPONENT
   ========================================== */
.onboarding-banner-box {
  background-color: #0d121d;
  border: 1px solid #7a6130;
  /* Gold/Bronze accent border matching design */
  padding: 22px 35px;
  position: relative;
  width: 100%;
}

.onboarding-banner-box .banner-sub-title {
  display: block;
  font-family: var(--font-700);
  font-size: 11px;
  color: var(--secondary);
  /* Primary Red Accent */
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.onboarding-banner-box .banner-title {
  font-family: var(--Primary-font);
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.onboarding-banner-box .banner-title span {
  color: var(--secondary);
  /* Red 48-72 Hours highlight */
}

/* ==========================================
   WHY CHOOSE US SECTION STYLES
   ========================================== */
.why-choose-section {
  background-image:  url('../images/why-choose-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 100px 0;
  position: relative;
}

/* Left Content Column */
.why-choose-content {
  padding-right: 20px;
}

.why-choose-content .main-heading.white-heading h2 {
  font-family: var(--Primary-font);
  font-size: 46px;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.why-choose-desc {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  margin-bottom: 35px;
}

/* Right Column Feature Cards */
.feature-card {
  background-color: #121826;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 35px 30px;
  height: 100%;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(208, 28, 36, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.feature-icon-box {
  width: 44px;
  height: 44px;
  background-color: var(--secondary);
  /* Primary Red Accent */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 22px;
}

.feature-title {
  font-family: var(--Primary-font);
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.feature-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #8c97a8;
  line-height: 20px;
  margin: 0;
}

/* ==========================================
   ABOUT PAGE — CUSTOM STYLES (about.php)
   Built on top of style.css / responsive.css.
   Reuses existing CSS variables, fonts and
   color tokens — no new colors introduced.
   ========================================== */

/* ==========================================
   PAGE BANNER (Breadcrumb Hero)
   ========================================== */
.page-banner-section {
  background: #091122 url('../images/about-bg.jpg') no-repeat center center / cover;
  padding: 190px 0 80px 0;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-banner-section::after {
  content: "";
  background: linear-gradient(134.87deg, #000912 -30.56%, rgba(0, 9, 18, 0.92) 41.25%, rgba(13, 35, 92, 0.55) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 0;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-500);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}

.breadcrumb-nav a {
  color: #a3b1c6;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
  color: var(--secondary);
}

.breadcrumb-nav .separator {
  color: var(--secondary);
  font-size: 10px;
}

.breadcrumb-nav .current {
  color: var(--secondary);
}

.page-banner-content {
  position: relative;
  z-index: 1;
}

.page-banner-content h1 {
  font-size: 70px;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: 0.5px;

}

.page-banner-content h1 span {
  color: var(--secondary);
}

.page-banner-content p {
  color: #a3b1c6;
  font-family: var(--font-400);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 30px;
}

.page-banner-btn-group {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}


/* ==========================================
   ABOUT — WHO WE ARE (extends .who-we-are)
   ========================================== */
.about-who-we-are .feature-list li {
  margin-bottom: 0;
}

/* Bottom Right ISO Badge (companion to .experience-badge) */
.iso-cert-badge {
  position: absolute;
  bottom: -10px;
  right: 30px;
  background-color: var(--secondary);
  color: #ffffff;
  padding: 14px 22px;
  text-align: center;
  z-index: 2;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.iso-cert-badge .badge-label {
  display: block;
  font-family: var(--Primary-font);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.iso-cert-badge .badge-text {
  display: block;
  font-family: var(--font-600);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ==========================================
   MISSION, VISION & VALUES
   (cards reuse .services-item-box pattern)
   ========================================== */
.mvv-section {
  background-color: #11141D;
  position: relative;
}

.badge-items {
  background-color: #121826;
  border: 2px solid #161B28;
  padding: 40px 30px;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;

}

.badge-items-border-1 {
  border-top: 3px solid #D01C24;
}

.badge-items-border-2 {
  border-top: 3px solid #FFAA00;
}

.badge-items-border-3 {
  border-top: 3px solid #0D235C;
}

.badge-item-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.mvv-header {
  margin-bottom: 50px;
}

.mvv-header .sub-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mvv-header .sub-title::before,
.mvv-header .sub-title::after {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
}

.mvv-header .sub-title::before {
  margin-right: 12px;
}

.mvv-header .sub-title::after {
  margin-left: 12px;
}

.mvv-header .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.mvv-section .services-item-box {
  text-align: left;
}


/* ==========================================
   OUR HISTORY — TIMELINE
   ========================================== */
.history-timeline-section {
  background-color: #ffffff;
  position: relative;
}

.timeline-header {
  margin-bottom: 55px;
}

.timeline-header .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.timeline-header .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 10px;
}

.who-we-are-content .main-heading>h2 {
  font-family: var(--Primary-font);
  font-size: 65px;
  color: #202020;
  line-height: 1.1;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.timeline-header .main-heading>h2 span {
  color: var(--secondary);
}

.timeline-header .description {
  font-family: var(--font-400);
  font-size: 14px;
  color: #6a7382;
  line-height: 22px;
  margin-top: 10px;
  margin-bottom: 0;
}

.timeline-wrapper {
  position: relative;
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-col {
  width: calc(50% - 40px);
}

.timeline-col.left {
  margin-right: auto;
  text-align: right;
}

.timeline-col.right {
  margin-left: auto;
  text-align: left;
}

.timeline-card {
  display: inline-block;
  background-color: #121826;
  border: 1px solid #1d2538;
  border-left: 3px solid var(--secondary);
  padding: 22px 26px;
  text-align: left;
  max-width: 100%;
}

.timeline-year {
  display: inline-block;
  background-color: var(--secondary);
  color: #ffffff;
  font-family: var(--Primary-font);
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.timeline-title {
  font-family: var(--font-600);
  font-size: 15px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.timeline-desc {
  font-family: var(--font-400);
  font-size: 13px;
  color: #8c97a8;
  line-height: 20px;
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
}

.timeline-marker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--secondary);
}

/* Central connecting line (desktop only) */


/* ==========================================
   WHY MURTUZA
   (reuses .command-center-wrapper /
   .security-build-content patterns)
   ========================================== */
.why-murtuza-section {
  background-color: #0b101d;
  position: relative;
}

.why-murtuza-section .security-build-content {
  padding-left: 0;
  padding-right: 30px;
}

.why-murtuza-section .security-build-content .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.why-murtuza-section .security-build-content .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 10px;
}

.why-murtuza-section .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.why-murtuza-section .security-build-desc {
  color: #a3acb9;
}

.why-murtuza-section .feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.why-murtuza-section .feature-list li {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--font-500);
  font-size: 14px;
  color: #ffffff;
}

.why-murtuza-section .feature-list li i {
  color: var(--secondary);
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.control-room-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-600);
  font-size: 11px;
  color: var(--secondary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.control-room-badge i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--secondary);
  margin-right: 8px;
}


/* ==========================================
   RESPONSIVE — ABOUT PAGE
   (breakpoints match responsive.css)
   ========================================== */

/* Desktop / Large Screens */

/* Tablets */


/* Small Tablets / Mobile Landscape */



/* ==========================================
   CONTACT PAGE — CUSTOM STYLES (contact.php)
   Scoped under .contact-page. Reuses
   .page-banner-section / .contact-form-card /
   .btn-theme / badge border-color pattern.
   ========================================== */

/* --- Hero Banner (compact variant) --- */
.contact-page .page-banner-section {
  min-height: auto;
  display: block;
  padding: 190px 0 70px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;

}

.contact-page .hero-tags,
.clients-page .hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.contact-page .hero-tags .hero-tag,
.clients-page .hero-tags .hero-tag {
  display: flex;
  align-items: center;
  font-family: var(--font-500);
  font-size: 13px;
  color: #e6eaf0;
}

.contact-page .hero-tags .hero-tag i,
.clients-page .hero-tags .hero-tag i {
  color: var(--secondary);
  font-size: 16px;
  margin-right: 8px;
}

/* --- Contact Form + Info Section --- */
.contact-page .contact-form-section {
  background-color: #0b0e14;
}

.contact-page .contact-form-header {
  margin-bottom: 30px;
}

.contact-page .contact-form-header .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-page .contact-form-header .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 12px;
}

.contact-page .contact-form-header .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.contact-page .contact-form-header .description {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  margin-top: 12px;
  margin-bottom: 0;
  max-width: 480px;
}

.contact-page .contact-form-card .privacy-note {
  font-family: var(--font-400);
  font-size: 11px;
  color: #5d6778;
  margin-bottom: 0;
}

/* --- Right: Direct Contact Info Card --- */
.contact-page .contact-info-card {
  background-color: #121826;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 3px solid var(--secondary);

}

.contact-page .response-highlight-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  border: 1px solid #FFAA004D;
  padding: 30px;
  margin-bottom: 30px;
}

.contact-page .response-highlight-box .icon-box {
  width: 36px;
  height: 36px;
  background-color: rgba(208, 28, 36, 0.15);
  border: 1px solid rgba(208, 28, 36, 0.3);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.contact-page .response-highlight-box .response-title {
  font-family: var(--Primary-font);
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.contact-page .response-highlight-box .response-tag {
  display: block;
  font-family: var(--font-500);
  font-size: 11px;
  color: #A8B2C1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.contact-page .response-highlight-box p {
  font-family: var(--font-400);
  font-size: 12px;
  color: #a0aab8;
  line-height: 18px;
  margin-bottom: 0;
}

.contact-page .direct-contact-title {
  font-family: var(--font-700);
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 0 30px;
}

.contact-page .direct-contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 30px 0;
  padding: 0 30px;
}

.contact-page .direct-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contact-page .direct-contact-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-page .direct-contact-item .contact-label {
  display: block;
  font-family: var(--font-600);
  font-size: 10px;
  color: #6a7382;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.contact-page .direct-contact-item .contact-value {
  font-family: var(--font-500);
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-page .direct-contact-item .contact-value:hover {
  color: var(--secondary);
}

.contact-page .contact-tag {
  flex-shrink: 0;
  font-family: var(--font-700);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
}

.contact-page .contact-tag.tag-red {
  background-color: rgba(208, 28, 36, 0.15);
  color: var(--secondary);
  border: 1px solid rgba(208, 28, 36, 0.3);
}

.contact-page .contact-tag.tag-outline {
  background-color: transparent;
  color: #8c97a8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-page .contact-info-image {
  position: relative;
  overflow: hidden;
}

.contact-page .contact-info-image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.contact-page .contact-info-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 60%);
}

.contact-page .contact-info-image::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  background-color: #FFAA00;
  left: 0;
  top: 0;
  z-index: 1;
}

.contact-page .contact-info-image .img-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 1;
}

.contact-page .contact-info-image .img-caption .caption-title {
  display: block;
  font-family: var(--font-700);
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-page .contact-info-image .img-caption .caption-desc {
  display: block;
  font-family: var(--font-400);
  font-size: 11px;
  color: #c3cad4;
}

/* --- Locations Section --- */
.contact-page .locations-section {
  background-color: #0b0e14;
}

.contact-page .locations-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 45px;
}

.contact-page .locations-header .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-page .locations-header .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 10px;
}

.contact-page .locations-header .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.contact-page .locations-header .description {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  max-width: 340px;
  text-align: right;
  margin-bottom: 6px;
}

.contact-page .map-panel {
  background-color: #121826;
  border: 1px solid rgba(255, 255, 255, 0.05);
  height: 100%;
  min-height: 380px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contact-page .map-panel svg {
  max-width: 260px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.contact-page .map-panel .map-pin-label {
  font-family: var(--font-600);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #fff !important;
}

.contact-page .map-caption-title {
  font-family: var(--Primary-font);
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.contact-page .map-caption-list {
  font-family: var(--font-400);
  font-size: 12px;
  color: #6a7382;
  margin-bottom: 0;
}

.contact-page .office-card {
  background-color: #121826;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid #D01C24;
  padding: 22px 24px;
  margin-bottom: 6px;
}

.contact-page .office-card:last-child {
  margin-bottom: 0;
}

.contact-page .office-card.office-card-border-2 {
  border-left-color: #FFAA00;
}

.contact-page .office-card.office-card-border-3 {
  border-left-color: #0D235C;
}

.contact-page .office-card .office-title {
  font-family: var(--font-700);
  font-size: 13px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-page .office-card .office-address {
  font-family: var(--font-400);
  font-size: 13px;
  color: #a0aab8;
  line-height: 20px;
  margin-bottom: 8px;
}

.contact-page .office-card .office-phone {
  display: block;
  font-family: var(--font-600);
  font-size: 14px;
  color: var(--secondary);
  text-decoration: none;
  margin-bottom: 4px;
}

.contact-page .office-card .office-hours {
  display: block;
  font-family: var(--font-400);
  font-size: 11px;
  color: #6a7382;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* ==========================================
   RESPONSIVE — CONTACT PAGE
   (breakpoints match responsive.css)
   ========================================== */

/* Desktop / Large Screens */

/* Tablets */


/* Small Tablets / Mobile Landscape */


/* Mobile */


/* ==========================================
   CLIENTS PAGE — CUSTOM STYLES (clients.php)
   Scoped under .clients-page. Reuses
   .page-banner-section / .hero-tags /
   .industries-serve-section / .ser-01-header /
   .ser-01-counter-box patterns.
   ========================================== */

/* --- Hero Banner --- */
.clients-page .page-banner-section {
  padding: 190px 0 70px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.clients-page .page-banner-content .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.clients-page .page-banner-content .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 12px;
}

.clients-page .page-banner-content p {
  max-width: 560px;
  margin-bottom: 28px;
}

/* --- Industries We Serve (extends .industries-serve-section) --- */
.clients-page .industries-header-wrapper .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-family: var(--font-700);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.clients-page .industries-header-wrapper .sub-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: var(--secondary);
  margin-right: 12px;
}

.clients-page .industries-header-wrapper .main-heading.white-heading h2 span {
  color: var(--secondary);
}

.clients-page .section-head-desc {
  font-family: var(--font-400);
  font-size: 14px;
  color: #a0aab8;
  line-height: 22px;
  text-align: right;
  margin-bottom: 6px;
}

/* Card — flat variant with red accent bar on the thumbnail */
.clients-page .industry-item-box {
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.clients-page .industry-image-thumb {
  height: 220px;
  position: relative;
}

.clients-page .industry-image-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--secondary);
  z-index: 1;
}

.clients-page .industry-content-body {
  padding: 25px 22px;
}

.clients-page .industry-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.clients-page .industry-desc {
  margin-bottom: 18px;
}

/* Company Tag Pills */
.clients-page .industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
}

.clients-page .industry-tags li {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 10px;
  font-family: var(--font-600);
  font-size: 10px;
  color: #8c97a8;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.3s ease, color 0.3s ease;
}

/* --- Client Logos Grid ---
 * Unscoped from `.clients-page` on purpose: this is the reusable "Client
 * Logos" block, insertable on any page, and body classes like `.clients-page`
 * are only present on a real front-end request -- the block editor's iframe
 * preview never copies custom body classes (WordPress core only mirrors
 * `admin-color-*`, `post-type-*` and `wp-embed-responsive`), so scoping this
 * block's styles behind one made it render unstyled in the editor canvas.
 */
.client-logos-section {
  background-color: #0b101d;
  padding: 70px 0;
}

.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  max-width: 1020px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 18px 12px;
  background-color: #121826;
  font-family: var(--font-600);
  font-size: 11px;
  color: #8c97a8;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* --- Desktop Only Hover Effects --- */
@media (min-width: 992px) and (hover: hover) {
  .clients-page .industry-item-box:hover .industry-tags li {
    border-color: rgba(208, 28, 36, 0.4);
    color: #ffffff;
  }

  .client-logo-item:hover {
    background-color: #161d2e;
    color: #ffffff;
  }
}


/* ==========================================
   RESPONSIVE — CLIENTS PAGE
   (breakpoints match responsive.css)
   ========================================== */



/* ==========================================
   Footer — Services widget in 2 columns
   (inherits every colour, size and hover state
   from .site-footer .footer-menu in style.css)
   ========================================== */
.site-footer .footer-menu-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}

/* Last row of the grid closes without a divider */
.site-footer .footer-menu-2col li:nth-last-child(-n + 2) {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ==========================================
   Offcanvas burger menu — Services submenu
   ========================================== */
.offcanvas .mobile-submenu-toggle .submenu-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.offcanvas .mobile-submenu-toggle[aria-expanded="true"] .submenu-arrow {
  transform: rotate(180deg);
}

.offcanvas .mobile-submenu {
  margin: 8px 0 10px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid rgba(200, 16, 46, 0.4);
}

.offcanvas .mobile-submenu li {
  margin-bottom: 2px;
}

.offcanvas .mobile-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-400);
  font-size: 0.875rem;
  line-height: 1.35;
  color: #a8b2c1 !important;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.offcanvas .mobile-submenu a:hover,
.offcanvas .mobile-submenu a.active {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff !important;
}

.offcanvas .mobile-submenu a i {
  flex: 0 0 auto;
  font-size: 16px;
  color: #0088ff;
}

/* Tablet — keep the footer services list readable when the widget halves */


/* ==========================================================================
   LEGAL PAGES — privacy-policy.php / terms-and-conditions.php
   Bootstrap is used ONLY for .container / .row / .col-* scaffolding.
   All colours and fonts below are inherited from the :root design tokens
   defined at the top of this file. No animations or effects.
   ========================================================================== */

.legal-page {
  background: #ffffff;
  color: #4a5568;
  font-family: var(--font-400);
}

/* ---------- Page title band ---------- */
/* Top padding clears the site's fixed .header */
.legal-hero {
  background: var(--primary);
  padding: 150px 0 54px;
}

.legal-title {
  margin: 0;
  font-family: var(--Primary-font), "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1;
}

.legal-updated {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Body copy ---------- */
.legal-content {
  padding: 56px 0 72px;
}

.legal-intro {
  margin-bottom: 34px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2d3748;
}

.legal-content h2 {
  margin: 38px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--secondary);
  font-family: var(--Primary-font), "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  font-size: 1.6rem;
  line-height: 1.3;
}

.legal-content p {
  margin-bottom: 16px;
  font-size: 0.98rem;
  line-height: 1.8;
}

.legal-content ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-content li {
  margin-bottom: 8px;
  font-size: 0.98rem;
  line-height: 1.8;
}

.legal-content a {
  color: var(--secondary);
  font-family: var(--font-500), sans-serif;
  text-decoration: none;
}

.legal-content a:hover {
  color: var(--secondary-light);
  text-decoration: underline;
}

/* ---------- Contact callout ---------- */
.legal-contact-box {
  margin-top: 44px;
  padding: 28px 30px;
  background: #f6f8fb;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
}

.legal-contact-box h2 {
  margin-top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .legal-hero {
    padding: 120px 0 40px;
  }

  .legal-content {
    padding: 44px 0 60px;
  }

  .legal-content h2 {
    font-size: 1.4rem;
  }

  .legal-contact-box {
    padding: 24px 22px;
  } 
}