/*-----------------------------------------------------------------------------------

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
	02. Header
    03. Hero
	04. Footer

-----------------------------------------------------------------------------------*/
/*===========================
    01.COMMON css 
===========================*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800");
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #141714;
}

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

img {
  max-width: 100%;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
  text-decoration: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #2B2A3D;
  margin: 0px;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #141714;
  margin: 0px;
}

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/*===== All Button Style =====*/
.main-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 0;
  padding: 0 40px;
  font-size: 16px;
  height: 55px;
  line-height: 55px;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-out 0s;
  background-color: #d80e0e;
}

.main-btn:hover {
  background-color: #d04a3b;
  color: #fff;
}

/*===== All Section Title Style =====*/
.section_title .title {
  font-size: 40px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .section_title .title {
    font-size: 26px;
  }
}

.section_title p {
  margin-top: 15px;
  font-size: 18px;
  color: #9e9db3;
}

.section_title.section_title_2 .title,
.section_title.section_title_2 p {
  color: #fff;
}

/*===== All Preloader Style =====*/
.preloader {
  /* Body Overlay */
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  /* Change Background Color */
  background: #fff;
  z-index: 99999;
}

.preloader .loader {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.preloader .loader .ytp-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  margin-left: -32px;
  z-index: 18;
  pointer-events: none;
}

.preloader .loader .ytp-spinner .ytp-spinner-container {
  pointer-events: none;
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  top: 50%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
  animation: ytp-spinner-linspin 1568.2353ms linear infinite;
}

.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  right: 50%;
}

.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  left: 50%;
}

.preloader .loader .ytp-spinner-circle {
  box-sizing: border-box;
  position: absolute;
  width: 200%;
  height: 100%;
  border-style: solid;
  /* Spinner Color */
  border-color: #d80e0e #d80e0e #F9F9F9;
  border-radius: 50%;
  border-width: 6px;
}

.preloader .loader .ytp-spinner-left .ytp-spinner-circle {
  left: 0;
  right: -100%;
  border-right-color: #F9F9F9;
  animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader .loader .ytp-spinner-right .ytp-spinner-circle {
  left: -100%;
  right: 0;
  border-left-color: #F9F9F9;
  animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

/* Preloader Animations */

@keyframes ytp-spinner-linspin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ytp-spinner-easespin {
  12.5% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(405deg);
  }
  50% {
    transform: rotate(540deg);
  }
  62.5% {
    transform: rotate(675deg);
  }
  75% {
    transform: rotate(810deg);
  }
  87.5% {
    transform: rotate(945deg);
  }
  to {
    transform: rotate(1080deg);
  }
}

@keyframes ytp-spinner-left-spin {
  0% {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}

@keyframes ytp-right-spin {
  0% {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}

/*===========================
     02.HEADER css 
===========================*/
/*===== NAVBAR =====*/
.header_navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.3s ease-out 0s;
}

/* Container with safe spacing */
.header_navbar .container {
  max-width: 100%;
  padding-left: 120px;   /* space from left edge */
  padding-right: 120px;  /* space from right edge */
}

.sticky {
  position: fixed;
  z-index: 99;
  background-color: #000000;
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-out 0s;
}

.sticky .navbar {
  padding: 15px 0;
}

.navbar {
  padding: 20px 0;
  border-radius: 5px;
  position: relative;
  transition: all 0.3s ease-out 0s;

  /* Ensure flex layout so we can push brand left and links right */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 24px;   /* inner breathing space */
  padding-right: 24px;
}

/* Push the collapse (nav links) to the far right on lg+ */
@media (min-width: 992px) {
  .navbar-collapse {
    margin-left: auto;
  }
}

/* Logo flush left (no extra margin) */
.navbar-brand {
  padding: 0;
  margin-right: 0;
}

.navbar-brand img {
  width: 250px;
}

@media (max-width: 767px) {
  .navbar-brand img {
    width: 160px;
  }
}

/* Toggler */
.navbar-toggler {
  padding: 0;
}

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

.navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  display: block;
  margin: 5px 0;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

/* Navbar Collapse (mobile dropdown) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #000000;
    z-index: 9;
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 5px 12px;
    margin-left: 0; /* reset on tablet */
  }
}

@media (max-width: 767px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #000000;
    z-index: 9;
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 5px 12px;
    margin-left: 0; /* reset on mobile */
  }
}

/* Nav Links */
.navbar-nav {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-item {
  position: relative;
  margin-left: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-nav .nav-item {
    margin-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item {
    margin: 0;
  }
}

.navbar-nav .nav-item a {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  padding: 10px 0;
  position: relative;
}

.navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  bottom: 0px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item a {
    display: block;
    padding: 4px 0;
    color: #d80e0e;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item a {
    display: block;
    padding: 4px 0;
    color: #d80e0e;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item a.active,
  .navbar-nav .nav-item a:hover {
    color: #d80e0e;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item a.active,
  .navbar-nav .nav-item a:hover {
    color: #d80e0e;
  }
}

.navbar-nav .nav-item a.active::before,
.navbar-nav .nav-item a:hover::before {
  width: 100%;
}

.navbar-nav .nav-item:hover .sub-menu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item:hover .sub-menu {
    top: 0;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item:hover .sub-menu {
    top: 0;
  }
}

.navbar-nav .nav-item .sub-menu {
  width: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 110%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item .sub-menu {
    position: relative;
    width: 100%;
    top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item .sub-menu {
    position: relative;
    width: 100%;
    top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
}

.navbar-nav .nav-item .sub-menu li {
  display: block;
}

.navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 20px;
  color: #d80e0e;
}

.navbar-nav .nav-item .sub-menu li a.active,
.navbar-nav .nav-item .sub-menu li a:hover {
  padding-left: 25px;
  color: #d80e0e;
}

.navbar-nav .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .sub-nav-toggler {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #222;
    font-size: 18px;
    border: 0;
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-nav .sub-nav-toggler {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #d80e0e;
    font-size: 18px;
    border: 0;
    width: 30px;
    height: 30px;
  }
}

.navbar-nav .sub-nav-toggler span {
  width: 8px;
  height: 8px;
  border-left: 1px solid #222;
  border-bottom: 1px solid #222;
  transform: rotate(-45deg);
  position: relative;
  top: -5px;
}

/* Sticky states */
.sticky .navbar-toggler .toggler-icon {
  background-color: #d80e0e;
}

.sticky .navbar-nav .nav-item a {
  color: #d80e0e;
}

.sticky .navbar-nav .nav-item a::before {
  background-color: #d80e0e;
}

.sticky .navbar-nav .nav-item a.active,
.sticky .navbar-nav .nav-item a:hover {
  color: #d80e0e;
}

/* Make nav links bolder when sticky */
.sticky .navbar-nav .nav-item a {
  font-weight: 700; /* or 600 depending on your design */
}


/*===== hero =====*/
.single_hero {
  height: 650px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@media only screen and (min-width: 1400px) {
  .single_hero {
    height: 950px;
  }
}

@media only screen and (min-width: 1079px) {
  .single_hero {
    height: 950px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single_hero {
    height: 550px;
  }
}

@media (max-width: 767px) {
  .single_hero {
    height: 450px;
  }
}

.single_hero::before {
  position: absolute;
  content: '';
  background-color: rgba(43, 42, 61, 0.7);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

.hero_content {
  padding-top: 50px;
}

.hero_content .hero_title {
  font-size: 60px;
  line-height: 85px;
  color: #fff;
  margin-top: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero_content .hero_title {
    font-size: 44px;
    line-height: 65px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero_content .hero_title {
    font-size: 40px;
    line-height: 60px;
  }
}

@media (max-width: 767px) {
  .hero_content .hero_title {
    font-size: 24px;
    line-height: 38px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero_content .hero_title {
    font-size: 40px;
    line-height: 60px;
  }
}

.hero_content .hero_title span {
  display: contents;
  color: #d80e0e;
}

:root {
  /* Premium red palette */
  --red-hi: #d80e0e;   /* soft highlight */
  --red-1:  #ff0909;   /* bright red */
  --red-2:  #e60000;   /* deep brand red */
  --red-3:  #b30000;   /* darker crimson */
  --red-dk: #660000;   /* dark edge */
  --red-stroke: rgba(100, 0, 0, 0.35);
}

.hero_content p {
  font-family: 'Orbitron', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  margin-top: 30px;

  /* Premium metallic red gradient */
  background: linear-gradient(
    180deg,
    var(--red-hi) 0%,
    var(--red-1) 30%,
    var(--red-2) 55%,
    var(--red-3) 80%,
    var(--red-dk) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Outline for crisp edges */
  -webkit-text-stroke: 0.7px var(--red-stroke);

  /* Depth with shadow */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.4);
}


@media (max-width: 767px) {
  .hero_content p {
    font-size: 14px;
  }
}

.hero_content .main-btn {
  margin-top: 45px;
}

/* ===== Compact tweaks (drop-in overrides; keep mobile as-is) ===== */

/* Tablets / small laptops */
@media (min-width: 768px) and (max-width: 991.98px){
  .single_hero{ height: 520px; }              /* was 550px */
  .hero_content{ padding-top: 32px; }         /* tighter top spacing */
  .hero_content .hero_title{
    font-size: 36px;                          /* was 40px */
    line-height: 50px;                        /* was 60px */
  }
  .hero_content p{
    font-size: 15px;                          /* slightly tighter */
    margin-top: 18px;                         /* less air */
    -webkit-text-stroke: 0.6px var(--red-stroke);
  }
  .hero_content .main-btn{ margin-top: 24px; }
}

/* Small/medium desktops (override your 1079+ rule to prevent huge hero) */
@media (min-width: 1079px) and (max-width: 1399.98px){
  .single_hero{ height: 680px; }              /* was 950px */
  .hero_content{ padding-top: 36px; }
  .hero_content .hero_title{
    font-size: 44px;                          /* was 60px */
    line-height: 62px;                        /* was 85px */
  }
  .hero_content p{
    font-size: 15.5px;
    margin-top: 20px;
  }
  .hero_content .main-btn{ margin-top: 28px; }
}

/* Large desktops (keep your look, just a touch more compact if desired) */
@media (min-width: 1400px) and (max-width: 1699.98px){
  .single_hero{ height: 760px; }              /* was 950px */
  .hero_content{ padding-top: 42px; }
  .hero_content .hero_title{
    font-size: 52px;                          /* was 60px */
    line-height: 72px;                        /* was 85px */
  }
  .hero_content p{ font-size: 16px; }
}

/* Ultra-wide (>=1700px): optional keep your original tall hero; remove this block if not needed */
@media (min-width: 1700px){
  .single_hero{ height: 880px; }              /* slightly less than 950 for balance on huge screens */
}
/* === Hero left-edge overflow fix (add after existing rules) === */

/* Give the hero content some inline (left/right) breathing room.
   Uses safe-area insets on iOS and scales slightly with viewport width. */
.single_hero {
  padding-left: max(16px, calc(env(safe-area-inset-left) + 12px));
  padding-right: max(16px, calc(env(safe-area-inset-right) + 12px));
}

/* Keep content inside the frame and centered logically */
.hero_content {
  /* Prevent the grid/gutter from pushing content out */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

  /* Gentle inline padding to avoid edge hits on odd breakpoints */
  padding-inline: clamp(12px, 4vw, 48px);
  box-sizing: border-box;
}

/* Constrain line length and wrap long tokens so nothing hangs off the left */
.hero_content .hero_title,
.hero_content p {
  max-width: min(44rem, 100%);      /* cap line length without cramping */
  overflow-wrap: anywhere;          /* break long words/URLs if necessary */
  word-break: break-word;           /* extra safety for legacy engines */
  hyphens: auto;
  margin-left: 0;                   /* ensure no accidental negative margins */
}

/* Slightly tighter cap on medium desktops where overflows tend to occur */
@media (min-width: 992px) and (max-width: 1399.98px){
  .hero_content .hero_title,
  .hero_content p {
    max-width: min(40rem, 100%);
  }
}

/* If you're using a .container inside .single_hero (Bootstrap, etc.),
   this keeps container gutters from causing visual left overflow */
.single_hero .container {
  padding-left: max(16px, calc(env(safe-area-inset-left) + 8px));
  padding-right: max(16px, calc(env(safe-area-inset-right) + 8px));
  box-sizing: border-box;
}


/*===========================
      03.FEATURES css 
===========================*/
/* ===== Feature Icons (Colorful + Black Glow version) ===== */
.single_features i {
  width: 90px;
  height: 90px;
  font-size: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 2px 5px rgba(255,255,255,0.2);
}

/* ==== Distinct Color Themes ==== */
.single_features:nth-child(1) i { background: linear-gradient(145deg, #d80e0e, #a60e0e); } /* Red */
.single_features:nth-child(2) i { background: linear-gradient(145deg, #007bff, #0048b3); } /* Blue */
.single_features:nth-child(3) i { background: linear-gradient(145deg, #28a745, #1e7e34); } /* Green */
.single_features:nth-child(4) i { background: linear-gradient(145deg, #ff9800, #e65100); } /* Orange */
.single_features:nth-child(5) i { background: linear-gradient(145deg, #6f42c1, #4a148c); } /* Purple */
.single_features:nth-child(6) i { background: linear-gradient(145deg, #ffc107, #ffb300); } /* Gold */

/* ==== Hover Animation ==== */
.single_features:hover i {
  transform: scale(1.1);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.8), /* deep black glow */
    0 0 25px rgba(0, 0, 0, 0.5),
    inset 0 3px 6px rgba(255,255,255,0.2);
  filter: brightness(1.1);
}

/* ===== Titles ===== */
.single_features .features_title {
  color: #222;
  margin-top: 15px;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 3px rgba(0,0,0,0.35);
  transition: transform 0.3s ease, color 0.3s ease;
}

.single_features:hover .features_title {
  transform: translateY(-3px);
  color: #000; /* subtle black shift for depth */
}

/* ===== Paragraphs ===== */
.single_features p {
  margin-top: 10px;
  font-size: 16px;
  color: #444;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== Section Heading ===== */
.features_area .section_title .title {
  color: #d80e0e;
  font-weight: 900;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 4px rgba(0,0,0,0.5),
    3px 3px 6px rgba(0,0,0,0.45);
  transition: transform 0.9s ease, text-shadow 0.9s ease;
}

.features_area .section_title .title:hover {
  transform: scale(1.05);
  text-shadow:
    1px 1px 0 #fff,
    3px 3px 6px rgba(0,0,0,0.55),
    5px 5px 12px rgba(0,0,0,0.7),
    0 0 10px rgba(0,0,0,0.8);
}

/* ===== Mobile Responsive ===== */
@media (max-width: 767px) {
  .single_features i {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }
}


/*===========================
      04.ABOUT css 
===========================*/
.about_area {
  background-color: #F9F9F9;
  position: relative;
}

.about_image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about_image {
    width: 100%;
    height: 500px;
    position: relative;
  }
}

@media (max-width: 767px) {
  .about_image {
    width: 100%;
    height: 400px;
    position: relative;
  }
}

.about_image .image_content {
  width: 185px;
  height: 185px;
  background-color: #d80e0e;
  display: table;
  text-align: center;
  position: relative;
  left: -92px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about_image .image_content {
    width: 135px;
    height: 135px;
    left: -78px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about_image .image_content {
    left: 0;
  }
}

@media (max-width: 767px) {
  .about_image .image_content {
    left: 0;
    width: 135px;
    height: 135px;
  }
}

.about_image .image_content .experience {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
  display: table-cell;
  vertical-align: middle;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about_image .image_content .experience {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .about_image .image_content .experience {
    font-size: 18px;
  }
}

.about_image .image_content .experience span {
  font-size: 44px;
  font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about_image .image_content .experience span {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .about_image .image_content .experience span {
    font-size: 36px;
  }
}

.about_content {
  padding-right: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about_content {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .about_content {
    padding-right: 0;
  }
}

.about_content .main-btn {
  margin-top: 30px;
}

/* vision */

.vision_area {
  background-color: #F9F9F9;
  position: relative;
  overflow: hidden;
}

.vision_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.vision_content {
  padding-left: 50px;
  padding-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .vision_image {
    width: 100%;
    height: 500px;
    position: relative;
  }

  .vision_content {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .vision_image {
    width: 100%;
    height: 400px;
    position: relative;
  }

  .vision_content {
    padding-left: 0;
  }
}

/* image_content2 styles for top right positioning */
.about_image .image_content2 {
  width: 185px;
  height: 185px;
  background-color: #d80e0e;
  display: table;
  text-align: center;
  position: absolute;
  right: -92px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about_image .image_content2 {
    width: 135px;
    height: 135px;
    right: -78px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .about_image .image_content2 {
    right: 0;
    width: 135px;
    height: 135px;
  }
}

.about_image .image_content2 .experience2 {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
  display: table-cell;
  vertical-align: middle;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
(max-width: 767px) {
  .about_image .image_content2 .experience2 {
    font-size: 18px;
  }
}

.about_image .image_content2 .experience2 span {
  font-size: 44px;
  font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
(max-width: 767px) {
  .about_image .image_content2 .experience2 span {
    font-size: 36px;
  }
}

/* 3D solid red for "Our Mission" + "Our Vision" only */
.about_area .section_title .title,
.vision_area .section_title .title{
  color:#d80e0e;                 /* solid red */
  text-transform: uppercase;
  letter-spacing:.04em;
  font-weight:900;

  /* crisp edge + depth */
  -webkit-text-stroke: .6px rgba(110,0,0,.35);
  text-shadow:
    0 1px 0 #ffffff,             /* subtle top highlight */
    0 2px 1px rgba(0,0,0,.28),   /* near shadow */
    0 6px 10px rgba(0,0,0,.25);  /* soft drop shadow */
}

/* Slightly soften on small screens for legibility */
@media (max-width: 767px){
  .about_area .section_title .title,
  .vision_area .section_title .title{
    -webkit-text-stroke: .45px rgba(110,0,0,.3);
    text-shadow:
      0 1px 0 #ffffff,
      0 2px 1px rgba(0,0,0,.22),
      0 5px 8px rgba(0,0,0,.22);
  }
}


/*===========================
      05.PORTFOLIO css 
===========================*/
.single_portfolio {
  position: relative;
  width: 25%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single_portfolio {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .single_portfolio {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single_portfolio {
    width: 50%;
  }
}

.single_portfolio img {
  width: 100%;
}

.single_portfolio::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2228, 96, 81, 0.8);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.single_portfolio .portfolio_content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

.single_portfolio .portfolio_content .meta li {
  display: inline-block;
  margin: 0 5px;
  transition: all 0.3s ease-out 0s;
  opacity: 0;
}

.single_portfolio .portfolio_content .meta li a {
  width: 35px;
  height: 35px;
  line-height: 33px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
}

.single_portfolio .portfolio_content .meta li a:hover {
  background-color: #fff;
  color: #d80e0e;
}

.single_portfolio .portfolio_content .meta li:first-child {
  transform: translateX(-100%);
}

.single_portfolio .portfolio_content .meta li:last-child {
  transform: translateX(100%);
}

.single_portfolio .portfolio_content .portfolio_title {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 25px;
  transform: translateY(100%);
  transition: all 0.3s ease-out 0s;
  opacity: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single_portfolio .portfolio_content .portfolio_title {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .single_portfolio .portfolio_content .portfolio_title {
    font-size: 20px;
  }
}

.single_portfolio:hover::before {
  opacity: 1;
}

.single_portfolio:hover .portfolio_content .meta li {
  transform: translateX(0);
  transition-delay: 0.2s;
}

.single_portfolio:hover .portfolio_content .portfolio_title {
  transform: translateX(0);
  transition-delay: 0.2s;
  opacity: 1;
}


/* ====== 3D Section Headline (Portfolio Section) ====== */
#portfolio .section_title .title {
  color: #d80e0e;
  font-weight: 900;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 3px rgba(0,0,0,0.35),
    4px 4px 6px rgba(0,0,0,0.4),
    6px 6px 10px rgba(0,0,0,0.45);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

/* Subtle Hover Effect */
#portfolio .section_title .title:hover {
  transform: scale(1.05);
  text-shadow:
    1px 1px 0 #fff,
    3px 3px 6px rgba(0,0,0,0.5),
    5px 5px 12px rgba(0,0,0,0.55),
    0 0 12px rgba(216,14,14,0.6);
}

/* Responsive Title Adjustments */
@media (max-width: 767px) {
  #portfolio .section_title .title {
    font-size: 1.9rem;
    letter-spacing: 0.03em;
  }
}




/*===========================
      06.PRICING css 
===========================*/
.pricing_area {
  background-color: #F9F9F9;
}

.single_pricing {
  background-color: #fff;
  padding: 60px 50px;
}

@media (max-width: 767px) {
  .single_pricing {
    padding: 40px 30px;
  }
}

.single_pricing .pricing_title {
  font-size: 24px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .single_pricing .pricing_title {
    font-size: 20px;
  }
}

.single_pricing .price {
  color: #d80e0e;
  font-size: 44px;
  margin-top: 25px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .single_pricing .price {
    font-size: 38px;
  }
}

.single_pricing .pricing_list li {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 300;
}

.single_pricing .mian-btn {
  height: 45px;
  border: 1px solid #141714;
  line-height: 43px;
  text-align: center;
  padding: 0 25px;
  color: #d80e0e;
  transition: all 0.3s ease-out 0s;
  margin-top: 30px;
}

.single_pricing .mian-btn:hover {
  background-color: rgba(90, 88, 114, 0.2);
}

.single_pricing.active {
  background-color: #d80e0e;
}

.single_pricing.active .pricing_title {
  color: #fff;
}

.single_pricing.active .price {
  color: #fff;
}

.single_pricing.active .pricing_list li {
  color: #fff;
}

.single_pricing.active .mian-btn {
  background-color: #fff;
  border-color: #fff;
}

/*===========================
        07.TEAM css 
===========================*/
.single_team {
  position: relative;
  overflow: hidden; /* Clip the zoom effect */
}

.single_team img {
  width: 100%;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth zoom + fade */
}

.single_team:hover img {
  transform: scale(1.08); /* Slightly more zoom for more impact */
  opacity: 0.85; /* Fade effect */
}

.single_team .team_content {
  position: absolute;
  background-color: #e9e9e9;
  left: 0;
  bottom: 0;
  width: 85%;
  padding: 25px;
  padding-right: 60px;
}

.single_team .team_content .team_name a {
  font-size: 20px;
  font-weight: 500;
  color: #2B2A3D;
  transition: all 0.3s ease-out 0s;
}

.single_team .team_content .team_name a:hover {
  color: #d80e0e;
}

.single_team .team_content p {
  margin-top: 5px;
}

.single_team .team_content .social {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.single_team .team_content .social li {
  margin: 3px 0;
}

.single_team .team_content .social li a {
  color: #141714;
  font-size: 16px;
  transition: all 0.3s ease-out 0s;
}

.single_team .team_content .social li a:hover {
  color: #d80e0e;
}



/*===========================
     08.TESTIMONIAL css 
===========================*/



/*===========================
    09.BLOG css 
===========================*/
.single_blog .blog_image img {
  width: 100%;
}

.single_blog .blog_content {
  margin-top: 25px;
}

.single_blog .blog_content .blog_title a {
  font-size: 24px;
  font-weight: 600;
  color: #2B2A3D;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .single_blog .blog_content .blog_title a {
    font-size: 20px;
  }
}

.single_blog .blog_content .blog_title a:hover {
  color: #d80e0e;
}

.single_blog .blog_content p {
  margin-top: 15px;
}

.single_blog .blog_content .more {
  font-size: 16px;
  font-weight: 500;
  color: #141714;
  margin-top: 15px;
  transition: all 0.3s ease-out 0s;
}

.single_blog .blog_content .more:hover {
  color: #d80e0e;
}

.single_blog.blog_2 .blog_content {
  margin-top: 0;
  padding-left: 20px;
}

@media (max-width: 767px) {
  .single_blog.blog_2 .blog_content {
    padding-left: 0;
    padding-top: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single_blog.blog_2 .blog_content {
    padding-left: 20px;
    padding-top: 0;
  }
}

.single_blog.blog_2 .blog_content .blog_title a {
  font-size: 20px;
}

.single_blog.blog_2 .blog_content p {
  margin-top: 15px;
}

/*===========================
    10.CONTACT css 
===========================*/
.contact_area {
  position: relative;
  z-index: 5;
}

.contact_area::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  z-index: -1;
}

p.form-message.success, p.form-message.error {
  font-size: 16px;
  color: #2B2A3D;
  background: #F9F9F9;
  padding: 10px 15px;
  margin-top: 30px;
  background-color: #fff;
  margin-left: 15px;
}

p.form-message.success.form-message.error, p.form-message.error.form-message.error {
  color: #f00;
}

.single_form {
  margin-top: 30px;
}

.single_form input,
.single_form textarea {
  width: 100%;
  height: 55px;
  border: 1px solid rgba(122, 122, 122, 0.9);
  padding: 0 25px;
  font-size: 16px;
  color: #000000;
  background: none;
  transition: all 0.3s ease-out 0s;
}

.single_form input:focus,
.single_form textarea:focus {
  border-color: #000000;
}

.single_form textarea {
  height: 170px;
  resize: none;
  padding-top: 15px;
}

/*===========================
    11.FOOTER css 
===========================*/
.footer_area {
  background-color: #000000;
  padding-top: 15px;
  padding-bottom: 30px;
}

.footer_menu ul li {
  display: inline-block;
  padding-top: 5px;
}

.footer_menu ul li + li {
  margin-left: 30px;
}

@media (max-width: 767px) {
  .footer_menu ul li + li {
    margin-left: 15px;
  }
}

.footer_menu ul li a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-out 0s;
}

.footer_menu ul li a:hover {
  color: #fff;
}

.credit {
  font-size: 16px;
  color: #fff;
  padding-top: 15px;
}

.credit a {
  color: #fff;
}

.footer_social ul li {
  display: inline-block;
}

.footer_social ul li + li {
  margin-left: 30px;
}

.footer_social ul li a {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-out 0s;
}

.footer_social ul li a:hover {
  color: #fff;
}

@media (max-width: 767px) {
  .footer_social ul li a {
    font-size: 20px;
  }
}

/*===== BACK TO TOP =====*/
.back-to-top {
  font-size: 20px;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  background-color: #d80e0e;
  text-align: center;
  z-index: 99;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
}

.back-to-top:hover {
  color: #fff;
  background-color: #d80e0e;
}


/*===== How We Work =====*/





/*===== Industries =====*/



/* ====== INDUSTRIES — Light Tinted Cards (darker gradient) + extra bottom padding & bg shadow ====== */

/* Section title (unchanged sizing, premium gradient) */
#industries .section_title .title{
  font-weight:900;
  font-size:2.5rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:linear-gradient(90deg,#06b6d4,#6366f1,#f43f5e);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:1px 1px 0 #fff, 2px 2px 6px rgba(0,0,0,.18);
}
@media (max-width: 991px){
  #industries .section_title .title{ font-size:2rem; }
}

/* Grid radius token */
.industry-grid{ --radius:18px; }

/* === Neon outline cards — darker light gradients + stronger background shadow === */
.neon-card{
  position:relative;
  border-radius:var(--radius);
  /* extra bottom padding “after the card” feeling */
  padding:20px 20px 34px;  /* ↑ increased bottom */
  margin-bottom:14px;      /* adds space below each card block */
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;

  /* Slightly darker default gradient (overridden per accent) */
  background:var(--bg-grad, linear-gradient(180deg,#edf2f7,#e6ecf4));

  /* Stronger background shadow + subtle bevel */
  box-shadow:
    0 26px 60px rgba(16,24,40,.22),  /* deep background shadow */
    0 10px 26px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(16,24,40,.07);

  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .35s, opacity .35s;
}

/* Equal-thickness neon border */
.neon-card:before{
  content:""; position:absolute; inset:0; border-radius:calc(var(--radius) + 2px);
  padding:6px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.95; z-index:0;
  background:var(--border-grad, linear-gradient(180deg,#e5e7eb,#e5e7eb));
}

/* Aura glow to match accent */
.neon-card:after{
  content:""; position:absolute; inset:-16px; border-radius:calc(var(--radius) + 12px);
  pointer-events:none; z-index:0;
  background:var(--glow-grad, linear-gradient(180deg,#e5e7eb,#e5e7eb));
  filter:blur(22px) saturate(1.05); opacity:.2;
}

/* Hover: gentle lift + brighter shadow */
.neon-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:
    0 32px 72px rgba(16,24,40,.25),
    0 14px 32px rgba(16,24,40,.12),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(16,24,40,.08);
  filter:brightness(1.03) saturate(1.06);
}
.neon-card:hover:before{ filter:drop-shadow(0 0 10px rgba(255,255,255,.16)); }

/* === Card content on darker light tints === */
.card-head{
  border-radius:14px 14px 0 0;
  padding:22px 18px 14px; text-align:center;
  background:var(--head-grad, linear-gradient(180deg,#ffffff,#f1f4f9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(16,24,40,.07);
}
.card-title{
  margin:0; font-weight:800; letter-spacing:.02em;
  color:#0f172a;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(15,23,42,.1);
}
.card-sub{
  margin:.4rem 0 0; font-size:.95rem;
  color:var(--sub-ink, #334155); opacity:.95;
}
.card-body{
  border-radius:0 0 14px 14px; flex:1 1 auto;
  background:var(--body-grad, linear-gradient(180deg,#f1f5fa,#e9eef5));
  padding:16px 18px 20px; /* a bit more bottom padding inside too */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(16,24,40,.06);
}
.card-list{
  list-style:none; margin:0; padding:0; color:#334155; font-size:.95rem;
}
.card-list li{
  padding:6px 0; border-bottom:1px dashed rgba(15,23,42,.14);
}
.card-list li:last-child{ border-bottom:0; }

/* === ACCENT palettes — darker light gradients + matching border/glow === */
/* ORANGE */
.neon-card.accent-orange{
  --bg-grad:   linear-gradient(180deg,#FFE3CC,#FFD0A6);
  --head-grad: linear-gradient(180deg,#FFF0E3,#FFE0C9);
  --body-grad: linear-gradient(180deg,#FFE2C7,#FFF0E1);
  --sub-ink:   #7c2d12;
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ffce8a, #ff7b1c, #ff9a45, #ffce8a);
  --glow-grad:   linear-gradient(180deg,#ffce8a,#ff7b1c);
}

/* YELLOW */
.neon-card.accent-yellow{
  --bg-grad:   linear-gradient(180deg,#FFF2C4,#FFE08A);
  --head-grad: linear-gradient(180deg,#FFF6D7,#FFE8A8);
  --body-grad: linear-gradient(180deg,#FFE8AE,#FFF1C9);
  --sub-ink:   #713f12;
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ffe889, #ffc400, #ffd54a, #ffe889);
  --glow-grad:   linear-gradient(180deg,#ffe889,#ffc400);
}

/* CYAN */
.neon-card.accent-cyan{
  --bg-grad:   linear-gradient(180deg,#D8F1F7,#BFE9F5);
  --head-grad: linear-gradient(180deg,#EAF7FB,#D5F1F9);
  --body-grad: linear-gradient(180deg,#DCF3F8,#EAF8FB);
  --sub-ink:   #0c4a6e;
  --border-grad: conic-gradient(from 180deg at 50% 50%, #7fe7ff, #17c0e9, #35d2ff, #7fe7ff);
  --glow-grad:   linear-gradient(180deg,#7fe7ff,#17c0e9);
}

/* PINK */
.neon-card.accent-pink{
  --bg-grad:   linear-gradient(180deg,#FFD3E6,#FFB7D3);
  --head-grad: linear-gradient(180deg,#FFE3EF,#FFCBE1);
  --body-grad: linear-gradient(180deg,#FFD0E2,#FFE9F2);
  --sub-ink:   #831843;
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ff93c2, #ff2f74, #ff6aa2, #ff93c2);
  --glow-grad:   linear-gradient(180deg,#ff93c2,#ff2f74);
}

/* LIME */
.neon-card.accent-lime{
  --bg-grad:   linear-gradient(180deg,#E6F5CF,#D3EEB3);
  --head-grad: linear-gradient(180deg,#EEF9DB,#DBF1C3);
  --body-grad: linear-gradient(180deg,#E2F3D1,#EFFAE3);
  --sub-ink:   #365314;
  --border-grad: conic-gradient(from 180deg at 50% 50%, #b8ff7a, #46d641, #82ff59, #b8ff7a);
  --glow-grad:   linear-gradient(180deg,#b8ff7a,#46d641);
}

/* GOLD */
.neon-card.accent-gold{
  --bg-grad:   linear-gradient(180deg,#FFE8BC,#FFD087);
  --head-grad: linear-gradient(180deg,#FFEFCE,#FFD89B);
  --body-grad: linear-gradient(180deg,#FFE0A1,#FFEDC4);
  --sub-ink:   #78430a;
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ffe19a, #ffb82e, #ffd067, #ffe19a);
  --glow-grad:   linear-gradient(180deg,#ffe19a,#ffb82e);
}

/* Mobile tweaks */
@media (max-width: 575px){
  .neon-card{ padding:16px 16px 30px; border-radius:14px; }
  .neon-card:before{ padding:5px; }
  .card-head{ padding:18px 14px 12px; }
  .card-title{ font-size:1.05rem; }
  .card-sub{ font-size:.9rem; }
  .card-body{ padding:12px 14px 16px; }
  .card-list li{ padding:5px 0; }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .neon-card{ transition:none; }
  .neon-card:hover{
    transform:none; filter:none;
    box-shadow:0 26px 60px rgba(16,24,40,.22), 0 10px 26px rgba(16,24,40,.10),
               inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(16,24,40,.07);
  }
}



/*===== Journey =====*/



/* ===== CANDIDATE JOURNEY — Vibrant “Crystal Diamond” Cards (DROP-IN CSS) ===== */
/* colorful • gradient • 3D background shadow • hover animated */

/* ==== Headline: iridescent gradient with subtle underline ==== */
#candidate-journey .section_title .title{
  font-weight:900;
  font-size:2.5rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:linear-gradient(90deg,#06b6d4 0%,#22d3ee 25%,#a78bfa 55%,#f43f5e 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:1px 1px 0 #3e1186, 2px 2px 6px rgba(0,0,0,.24);
  position:relative;
}
#candidate-journey .section_title .title::after{
  content:""; position:absolute; left:50%; bottom:-10px; width:120px; height:4px;
  transform:translateX(-50%) scaleX(.8);
  border-radius:999px;
  background:linear-gradient(90deg,#06b6d4,#22d3ee,#a78bfa,#f43f5e);
  box-shadow:0 6px 14px rgba(16,24,40,.18);
}
@media (max-width: 991px){
  #candidate-journey .section_title .title{ font-size:2rem; }
}

/* ==== Section spacing (unchanged from your base) ==== */
#candidate-journey{ padding-bottom:120px; }

/* ==== Card: crystal glass tint + neon border + deep 3D background shadow ==== */
.journey_card{
  --bg-grad: linear-gradient(180deg,#f1f5fb 0%,#e7edf6 100%); /* default, overridden by accents */
  --border-grad: conic-gradient(from 180deg at 50% 50%, #e5e7eb, #cbd5e1, #e5e7eb);
  --glow: rgba(16,24,40,.20); /* fallback glow */
  position:relative;
  background:
    radial-gradient(1200px 200px at -20% -20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(800px 200px at 120% 120%, rgba(255,255,255,.12), transparent 55%),
    var(--bg-grad);
  border-radius:18px;
  padding:26px 20px;
  text-align:center;
  height:100%;
  overflow:hidden;

  /* deep background shadow + subtle internal bevel */
  box-shadow:
    0 28px 84px var(--glow),
    0 12px 28px rgba(16,24,40,.12),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(16,24,40,.06);

  transition:transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s, filter .45s;
}

/* Gradient border (equal thickness on all sides) */
.journey_card::before{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:0;
  padding:8px; /* border thickness */
  background:var(--border-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* Moving “shine” sweep on hover */
.journey_card::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%);
  mix-blend-mode:screen;
}
@keyframes cj-sweep { to { transform:translateX(120%); } }

/* Hover: lift + slight tilt + brighter shadow + animated shine */
.journey_card:hover{
  transform:translateY(-8px) rotateX(.6deg) rotateY(.6deg) scale(1.015);
  box-shadow:
    0 36px 100px color-mix(in srgb, var(--glow) 85%, rgba(0,0,0,.08)),
    0 16px 36px rgba(16,24,40,.14),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(16,24,40,.08);
  filter:brightness(1.04) saturate(1.06);
}
.journey_card:hover::after{ animation:cj-sweep 1.05s ease forwards; }

/* ==== Icon: diamond pill with glossy highlight (rotated square) ==== */
.journey_icon{
  --disc-grad: linear-gradient(145deg,#ffb3c0,#ff6b88); /* default, overridden by accents */
  width:76px; height:76px; margin:0 auto 14px;
  transform:rotate(45deg);
  border-radius:20px;
  background:var(--disc-grad);
  display:flex; align-items:center; justify-content:center;
  border:3px solid rgba(255,255,255,.65);
  box-shadow:
    0 14px 28px rgba(0,0,0,.2),
    inset 0 3px 8px rgba(255,255,255,.28);
  position:relative; overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .45s, box-shadow .45s;
}
.journey_icon::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%);
}
.journey_icon i{
  transform:rotate(-45deg); /* counter-rotate glyph */
  color:#fff; font-size:28px; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .45s, opacity .45s;
}
.journey_card:hover .journey_icon{
  transform:rotate(45deg) translateY(-2px) scale(1.05);
  box-shadow:
    0 18px 40px rgba(0,0,0,.24),
    inset 0 4px 10px rgba(255,255,255,.32);
}

/* ==== Typography ==== */
.journey_card h5{
  font-size:16px; font-weight:800; margin-bottom:8px;
  letter-spacing:.01em; color:#0f172a;
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(15,23,42,.08);
}
.journey_card p{ font-size:14px; color:#475569; }

/* ==== Accent Themes (variables drive card, border, icon & shadow) ==== */
/* RED */
.accent-red{
  --bg-grad: linear-gradient(180deg,#fde2e6,#f9cbd2);
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ff9aa9, #ff4d5a, #d80e0e, #ff4d5a, #ff9aa9);
  --disc-grad: linear-gradient(145deg,#ff5b6b,#ff2d55);
  --glow: rgba(216,14,14,.26);
}
/* GREEN */
.accent-green{
  --bg-grad: linear-gradient(180deg,#e3f7ec,#cdf1de);
  --border-grad: conic-gradient(from 180deg at 50% 50%, #a7f3d0, #34d399, #15803d, #34d399, #a7f3d0);
  --disc-grad: linear-gradient(145deg,#34d399,#16a34a);
  --glow: rgba(22,163,74,.24);
}
/* BLUE */
.accent-blue{
  --bg-grad: linear-gradient(180deg,#e0efff,#cfe6ff);
  --border-grad: conic-gradient(from 180deg at 50% 50%, #9fdcff, #3b82f6, #1e40af, #3b82f6, #9fdcff);
  --disc-grad: linear-gradient(145deg,#3b82f6,#2563eb);
  --glow: rgba(59,130,246,.25);
}
/* ORANGE */
.accent-orange{
  --bg-grad: linear-gradient(180deg,#ffe9d6,#ffd8ba);
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ffd6a8, #ff8a1f, #c2410c, #ff8a1f, #ffd6a8);
  --disc-grad: linear-gradient(145deg,#ff8a1f,#ff5a1f);
  --glow: rgba(255,138,31,.26);
}
/* PURPLE */
.accent-purple{
  --bg-grad: linear-gradient(180deg,#efe7ff,#e1d6ff);
  --border-grad: conic-gradient(from 180deg at 50% 50%, #d4b6ff, #8b5cf6, #4c1d95, #8b5cf6, #d4b6ff);
  --disc-grad: linear-gradient(145deg,#8b5cf6,#7c3aed);
  --glow: rgba(139,92,246,.26);
}
/* GOLD */
.accent-gold{
  --bg-grad: linear-gradient(180deg,#fff0c9,#ffe3a0);
  --border-grad: conic-gradient(from 180deg at 50% 50%, #ffe6a6, #fbbf24, #b45309, #fbbf24, #ffe6a6);
  --disc-grad: linear-gradient(145deg,#fbbf24,#f59e0b);
  --glow: rgba(251,191,36,.28);
}

/* Keep your original accent borders compatible (optional) */
.accent-red .journey_icon{ border-color:#ffccd2; }
.accent-green .journey_icon{ border-color:#b7f0ce; }
.accent-blue .journey_icon{ border-color:#b9dcff; }
.accent-orange .journey_icon{ border-color:#ffd7b2; }
.accent-purple .journey_icon{ border-color:#e0d0ff; }
.accent-gold .journey_icon{ border-color:#ffe9b3; }

/* ==== Mobile tweaks ==== */
@media (max-width: 767px){
  .journey_card{ padding:20px 16px; border-radius:16px; }
  .journey_card::before{ border-radius:18px; padding:6px; }
  .journey_icon{ width:64px; height:64px; border-radius:16px; }
  .journey_icon i{ font-size:24px; }
  .journey_card h5{ font-size:14px; }
  .journey_card p{ font-size:13px; }
}

/* ==== Motion safety ==== */
@media (prefers-reduced-motion: reduce){
  .journey_card, .journey_icon, .journey_card::after{ transition:none; animation:none; }
  .journey_card:hover{ transform:none; filter:none; }
}




/*===== Tech =====*/

/* ===== Palette */
/* ===== TECHNOLOGIES — Vibrant Per-Card Accents + 3D Logo + Black Shadows (DROP-IN) ===== */

/* keep your section bg */
#technologies{
  --red:#d80e0e; --ink:#0f172a; --muted:#64748b;
  --blue:#2563eb; --green:#16a34a; --purple:#7c3aed; --gold:#f59e0b;
  background: linear-gradient(180deg,#ffffff 0%,#f7fafc 45%,#eef2f7 100%);
}

/* 3D headline (unchanged sizing, slight polish) */
#technologies .tech-title-3d{
  color: var(--red);
  font-weight: 900;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 3px rgba(0,0,0,.35),
    4px 4px 6px rgba(0,0,0,.40),
    6px 6px 12px rgba(0,0,0,.45);
}

/* ===== Cards (deeper black shadow + accent-tinted bg) ===== */
.tech_card{
  /* accent-driven light gradient background */
  --bg1:#ffffff; --bg2:#f6f8fb;               /* defaults if no accent provided */
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  border-radius:14px;
  padding:22px 18px;
  height:100%;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 26px 64px rgba(0,0,0,.22),              /* deep black shadow */
    0 12px 28px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.90);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

/* thin neon top bar (kept), uses currentColor from accent */
.tech_card:before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:6px;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 86%, #fff 14%), currentColor);
  opacity:.95;
}

/* hover lift + darker black shadow */
.tech_card.neon:hover{
  transform: translateY(-10px) scale(1.015);
  box-shadow:
    0 34px 96px rgba(0,0,0,.28),
    0 16px 36px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  filter: saturate(1.06) brightness(1.04);
}

/* ===== Icon ring — 3D, popped, glossy, matches accent color ===== */
.tech_icon.ring{
  --size:68px;
  --a: currentColor;                                            /* accent base */
  --aLight: color-mix(in srgb, var(--a) 65%, #fff 35%);
  --aDark:  color-mix(in srgb, var(--a) 78%, #000 22%);
  width:var(--size); height:var(--size);
  margin-bottom:14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;

  /* domed disc with accent tint */
  background:
    radial-gradient(120% 120% at 30% 25%, #ffffff 0%, rgba(255,255,255,.65) 22%, transparent 48%),
    linear-gradient(145deg, var(--aLight), var(--aDark));
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),               /* strong black drop shadow */
    0 8px 16px rgba(0,0,0,.18),
    inset 0 6px 12px rgba(255,255,255,.25),    /* top highlight */
    inset 0 -6px 12px rgba(0,0,0,.18);         /* bottom shading */
  transform: translateZ(0);                    /* enable GPU */
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .35s;
}

/* glossy rim + inner ring */
.tech_icon.ring:after{
  content:"";
  position:absolute; inset:-5px;
  border-radius:50%;
  background:
    conic-gradient(from 180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 25%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,.55)),
    conic-gradient(from 0deg, var(--a) , var(--aDark), var(--a), var(--a));
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
          mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
  pointer-events:none;
}

/* angled specular sheen */
.tech_icon.ring:before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(200deg, rgba(255,255,255,.32), rgba(255,255,255,0) 45%);
  mix-blend-mode:screen; pointer-events:none;
}

/* icon glyph — raised with subtle black outline */
.tech_icon i{
  font-size:30px;
  color:#fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 0 1px rgba(0,0,0,.6);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), text-shadow .35s;
}

/* hover: icon pops, ring lifts */
.tech_card:hover .tech_icon.ring{
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 28px 56px rgba(0,0,0,.4),
    0 12px 24px rgba(0,0,0,.22),
    inset 0 8px 14px rgba(255,255,255,.3),
    inset 0 -8px 14px rgba(0,0,0,.22);
}
.tech_card:hover .tech_icon.ring i{
  transform: translateY(-1px);
  text-shadow:
    0 3px 6px rgba(0,0,0,.55),
    0 0 1px rgba(0,0,0,.65);
}

/* ===== Text ===== */
.tech_card h5{
  font-size:18px;
  font-weight:800;
  margin:4px 0 8px;
  color:#1f2937;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.tech_card p{
  color:#374151;
  font-size:15px;
  line-height:1.55;
}

/* ===== Accent variants (set element color) + tint the card bg to match logo ===== */
.accent-red   { color: var(--red);   }
.accent-blue  { color: var(--blue);  }
.accent-green { color: var(--green); }
.accent-purple{ color: var(--purple);}
.accent-gold  { color: var(--gold);  }

/* card bg tints for each accent */
.tech_card.accent-red   { --bg1:#ffeff1; --bg2:#ffd9de; }
.tech_card.accent-blue  { --bg1:#e9f1ff; --bg2:#d9e8ff; }
.tech_card.accent-green { --bg1:#e8fbf1; --bg2:#d5f3e4; }
.tech_card.accent-purple{ --bg1:#f0eaff; --bg2:#e2d7ff; }
.tech_card.accent-gold  { --bg1:#fff3d9; --bg2:#ffe6b0; }

/* If you didn't add accent classes, auto-cycle per index (won't override if class contains "accent-") */
#technologies .tech_card:not([class*="accent-"]):nth-child(5n+1){ color: var(--blue);  --bg1:#e9f1ff; --bg2:#d9e8ff; }
#technologies .tech_card:not([class*="accent-"]):nth-child(5n+2){ color: var(--green); --bg1:#e8fbf1; --bg2:#d5f3e4; }
#technologies .tech_card:not([class*="accent-"]):nth-child(5n+3){ color: var(--purple);--bg1:#f0eaff; --bg2:#e2d7ff; }
#technologies .tech_card:not([class*="accent-"]):nth-child(5n+4){ color: var(--gold);  --bg1:#fff3d9; --bg2:#ffe6b0; }
#technologies .tech_card:not([class*="accent-"]):nth-child(5n){   color: var(--red);   --bg1:#ffeff1; --bg2:#ffd9de; }

/* ===== Image with badge (unchanged except stronger black shadow for consistency) ===== */
.tech-figure{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    0 24px 56px rgba(0,0,0,.18);
}
.tech-figure img{
  width:100%; display:block; transform:scale(1);
  transition:transform .35s ease;
}
.tech-figure:hover img{ transform:scale(1.03); }

/* Gold badge (kept) */
.experience-badge{
  position:absolute; right:18px; bottom:18px;
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
  box-shadow:
    inset 0 6px 12px rgba(255,255,255,.15),
    0 14px 28px rgba(0,0,0,.35);
}
.badge-gold{
  background: radial-gradient(circle at 35% 30%, #fff2cc 0%, #f4c76a 45%, #d6a53a 70%, #b4801f 100%);
}
.experience-badge h4{ font-size:20px; line-height:1.25; margin:0; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.experience-badge h4 span{ display:block; font-weight:900; font-size:26px; }

/* ===== Responsive tweaks ===== */
@media (max-width: 991.98px){
  #technologies .section_title .title{ font-size:2rem; }
  .experience-badge{ width:130px; height:130px; right:14px; bottom:14px; }
}
@media (max-width: 575.98px){
  .tech_card{ padding:18px 16px; }
  .tech_icon.ring{ --size:60px; }
  .experience-badge{ width:120px; height:120px; right:12px; bottom:12px; }
}



/* Whatsapp */

/* WhatsApp Support Section Styles */
#whatsapp-support {
  background-color: #f9f9f9;
  position: relative;
  overflow: hidden;
}

.whatsapp-container {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.whatsapp-heading {
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  color: #d80e0e;
  letter-spacing: 0.03em;
  margin-bottom: 20px;

  /* 3D & glow effect */
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 4px rgba(0,0,0,0.4),
    3px 3px 8px rgba(0,0,0,0.3),
    0 0 15px rgba(216,14,14,0.45);

  transition: all 0.3s ease;
}

.whatsapp-heading:hover {
  transform: scale(1.04);
  text-shadow:
    1px 1px 0 #fff,
    3px 3px 6px rgba(0,0,0,0.5),
    0 0 20px rgba(216,14,14,0.6),
    0 0 40px rgba(216,14,14,0.4);
}


.whatsapp-subheading {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}

.whatsapp-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.whatsapp-cta {
  display: inline-flex;
  align-items: center;
  background-color: #25d366;
  color: #ffffff;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-cta:hover {
  background-color: #20ba5a;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-cta svg {
  margin-right: 10px;
  width: 24px;
  height: 24px;
}

.response-time {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.clock-icon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}


/* WhatsApp Button (exact match style) */
.whatsapp-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.whatsapp-cta-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.wa-circle {
  background: #25d366;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -20px; /* overlap effect */
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.wa-circle svg {
  width: 35px;
  height: 35px;
  fill: #fff;
}

.wa-main-pill {
  background: linear-gradient(145deg, #111, #000);
  border-radius: 40px;
  padding: 18px 40px;
  min-width: 280px;
  text-align: center;
  font-weight: 800;
  font-size: 26px;
  color: #9ef7af;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 1;
}

.wa-sub-pill {
  background: #25d366;
  border-radius: 0 0 40px 40px;
  padding: 8px 40px;
  min-width: 200px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin-top: -10px; /* attach to main pill */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Hover Effect */
.whatsapp-cta-img:hover .wa-main-pill {
  background: linear-gradient(145deg, #000, #222);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.whatsapp-cta-img:hover .wa-sub-pill {
  background: #20ba5a;
  transition: all 0.3s ease;
}


/* ==== Mobile Fix for WhatsApp CTA ==== */
@media (max-width: 767px) {

  .whatsapp-heading {
    font-size: 24px;
    line-height: 1.3;
  }

  .whatsapp-subheading {
    font-size: 15px;
    margin-bottom: 25px;
    padding: 0 10px;  /* small side padding */
  }

  .wa-circle {
    width: 55px;
    height: 55px;
    margin-bottom: -15px;
  }

  .wa-circle svg {
    width: 26px;
    height: 26px;
  }

  .wa-main-pill {
    font-size: 18px;
    font-weight: 700;
    padding: 14px 24px;
    min-width: auto;       /* shrink to fit */
    max-width: 90vw;       /* prevent overflow */
  }

  .wa-sub-pill {
    font-size: 14px;
    padding: 6px 20px;
    min-width: auto;
    max-width: 80vw;
  }
}




/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 150px;
  right: 100px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.floating-whatsapp:hover {
  background-color: #20ba5a;
  transform: scale(1.1);
}

.floating-whatsapp::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #25d366;
  border-radius: 50%;
  opacity: 0.7;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.floating-whatsapp svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.tooltip {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.floating-whatsapp:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .whatsapp-heading {
    font-size: 28px;
  }
  
  .whatsapp-subheading {
    font-size: 16px;
    margin-bottom: 30px;
  }
  
  .floating-whatsapp {
    width: 50px;
    height: 50px;
    bottom: 80px;
    right: 20px;
  }
  
  .floating-whatsapp svg {
    width: 24px;
    height: 24px;
  }
}






/*===== Footer =====*/

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.offices-container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.office {
  flex: 1 1 45%;
  background: #161617;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}
.office:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}
.office-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ff715b;
}
.map-container iframe {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}
.contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  font-size: 1rem;
  color: #bbb;
}
.contact-info svg {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  color: #ff715b;
  flex-shrink: 0;
}
.divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  margin-top: 20px;
  margin-bottom: 10px;
}
.section-title {
  text-align: center;
  font-size: 2rem;candidate-journey
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 30px;
}
.copyright {
  text-align: center;
  font-size: 0.85rem;
  color: #888;
}
@media (max-width: 768px) {
  .offices-container {
    flex-direction: column;
    gap: 20px;
  }
  .office {
    flex: 1 1 100%;
  }
}





/* 1) Browsers add default body margin */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden; /* guards against horizontal jitter that can create extra vertical scroll */
}

/* 2) Ensure the section before the footer isn't pushing it down */
section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Make sure nothing inside the footer adds bottom spacing */
#footer,
#footer .container-fluid,
#footer .container,
#footer .footer-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 4) Kill any last-child margins inside the footer (headings, paragraphs, etc.) */
#footer *:last-child {
  margin-bottom: 0 !important;
}

/* 5) Inline elements (like iframes/images) can leave a tiny baseline gap */
#footer iframe,
#footer img {
  display: block;
  vertical-align: middle;
}

/* 6) If a global .pb-* utility is applied somewhere on the footer, neutralize it */
#footer[class*="pb-"],
#footer [class*="pb-"] {
  padding-bottom: 0 !important;
}

/* 7) If the perceived "extra space" is the card shadow glow, soften it slightly */
#footer .officeCard {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 14px 32px rgba(255,255,255,.10); /* slightly tighter so it doesn't look like empty space */
}