@import "../css/main.css";



/* =========================================================
HERO BASE
========================================================= */

.trimity-hero {

position: relative;


width: 100%;

/* height:
calc(
 100vh - var(--trimity-header-height)
); */
height: 100vh;
min-height: 560px;

max-height: 850px;

background: #0B1F33;

overflow: hidden;

font-family: "Inter", sans-serif;

}


/* =========================================================
BOOTSTRAP CAROUSEL HEIGHT
========================================================= */

.trimity-hero .carousel {

width: 100%;

height: 100%;

}


.trimity-hero .carousel-inner {

width: 100%;

height: 100%;

}


.trimity-hero .carousel-item {

position: relative;

width: 100%;

height: 100%;

}


/* =========================================================
HERO SLIDE
========================================================= */

.hero-slide {

position: relative;

width: 100%;

height: 100%;

min-height: 560px;

overflow: hidden;

}


/* =========================================================
BACKGROUND IMAGE
========================================================= */

.hero-background {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

transform: scale(1.06);

transition:
transform 7s ease;

}


/*
* Smooth image zoom when slide becomes active
*/

.carousel-item.active .hero-background {

transform: scale(1);

}


/* =========================================================
DARK IMAGE OVERLAY
========================================================= */

.hero-overlay {

position: absolute;

inset: 0;

z-index: 1;

background:

linear-gradient(
 90deg,

 rgba(5,18,30,0.94) 0%,

 rgba(5,18,30,0.82) 32%,

 rgba(5,18,30,0.50) 62%,

 rgba(5,18,30,0.22) 100%
);

}


/* =========================================================
BLUE ACCENT OVERLAY
========================================================= */

.hero-blue-overlay {

position: absolute;

inset: 0;

z-index: 2;

pointer-events: none;

background:

linear-gradient(
 135deg,

 rgba(21,155,211,0.12),

 transparent 45%
);

}


/* =========================================================
CONTENT CONTAINER
========================================================= */

.hero-slide .container {

position: relative;

z-index: 5;

width: 100%;

height: 100%;

}


/* =========================================================
MAIN HERO CONTENT
========================================================= */

.hero-content {

position: absolute;

top: 50%;

left: 12px;

width: min(720px, 65%);

transform: translateY(-45%);

}


/* =========================================================
TOP LABEL
========================================================= */

.hero-top-line {

display: flex;

align-items: center;

gap: 16px;

margin-bottom: 27px;

opacity: 0;

}


.carousel-item.active
.hero-top-line {

animation:
heroContentIn
0.8s
0.05s
ease
forwards;

}


.hero-top-line span {

color: #7BD2F3;

font-family: "Sora", sans-serif;

font-size: 12px;

font-weight: 700;

letter-spacing: 2px;

}


.hero-top-line div {

width: 55px;

height: 1px;

background: #159BD3;

}


.hero-top-line small {

color:
rgba(255,255,255,0.65);

font-family: "Sora", sans-serif;

font-size: 10px;

font-weight: 600;

letter-spacing: 2px;

}


/* =========================================================
HERO HEADING
========================================================= */

.hero-content h1 {

margin: 0;

color: #FFFFFF;

font-family: "Sora", sans-serif;

font-size:
clamp(
 50px,
 7vw,
 94px
);

font-weight: 700;

line-height: 1.02;

letter-spacing: -3px;

opacity: 0;

}


.carousel-item.active
.hero-content h1 {

animation:
heroTitleIn
0.9s
0.12s
ease
forwards;

}


.hero-content h1 span {

display: block;

color: #159BD3;

}


/* =========================================================
DESCRIPTION
========================================================= */

.hero-content p {

max-width: 610px;

margin:
28px 0
35px;

color:
rgba(255,255,255,0.78);

font-size: 16px;

line-height: 1.8;

opacity: 0;

}


.carousel-item.active
.hero-content p {

animation:
heroContentIn
0.9s
0.25s
ease
forwards;

}


/* =========================================================
BUTTON AREA
========================================================= */

.hero-buttons {

display: flex;

align-items: center;

gap: 14px;

opacity: 0;

}


.carousel-item.active
.hero-buttons {

animation:
heroContentIn
0.9s
0.4s
ease
forwards;

}


/* =========================================================
HERO BUTTON
========================================================= */

.hero-btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 15px;

min-height: 53px;

padding:
0 23px;

font-family: "Sora", sans-serif;

font-size: 12px;

font-weight: 600;

text-decoration: none;

transition:
all 0.35s ease;

}


/* PRIMARY */

.hero-btn-primary {

background: #159BD3;

border: 1px solid #159BD3;

color: #FFFFFF;

}


.hero-btn-primary:hover {

background: #FFFFFF;

border-color: #FFFFFF;

color: #0B1F33;

}


.hero-btn-primary i {

transition:
transform 0.3s ease;

}


.hero-btn-primary:hover i {

transform:
translate(
 3px,
 -3px
);

}


/* OUTLINE */

.hero-btn-outline {

border:
1px solid
rgba(255,255,255,0.45);

color: #FFFFFF;

background:
rgba(255,255,255,0.03);

}


.hero-btn-outline:hover {

background: #FFFFFF;

border-color: #FFFFFF;

color: #0B1F33;

}


/* =========================================================
RIGHT SIDE VERTICAL DATA
========================================================= */

.hero-side-data {

position: absolute;

z-index: 6;

top: 50%;

right: 45px;

transform:
translateY(-50%)
rotate(-90deg);

display: flex;

align-items: center;

gap: 16px;

color:
rgba(255,255,255,0.45);

font-family: "Sora", sans-serif;

font-size: 9px;

font-weight: 600;

letter-spacing: 2px;

}


.hero-side-data div {

width: 45px;

height: 1px;

background:
rgba(123,210,243,0.5);

}


/* =========================================================
BOTTOM INDUSTRY INFORMATION
========================================================= */

.hero-bottom-info {

position: absolute;

z-index: 6;

left: 50%;

bottom: 30px;

transform:
translateX(-50%);

display: flex;

align-items: center;

gap: 22px;

white-space: nowrap;

}


.hero-bottom-info span {

color:
rgba(255,255,255,0.55);

font-family: "Sora", sans-serif;

font-size: 12px;

font-weight: 600;

letter-spacing: 1.5px;

}


.hero-bottom-info span:not(:last-child)::after {

content: "";

display: inline-block;

width: 4px;

height: 4px;

margin-left: 22px;

vertical-align: middle;

background: #159BD3;

border-radius: 50%;

}


/* =========================================================
LEFT CAROUSEL PAGINATION
========================================================= */

.trimity-hero
.hero-indicators {

position: absolute;

top: 50%;

right: auto;

bottom: auto;

left: 36px;

transform:
translateY(-50%);

width: 45px;

height: auto;

margin: 0;

padding: 0;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: center;

gap: 15px;

z-index: 20;

}


/* INDICATOR BUTTON */

.trimity-hero
.hero-indicators button {

position: relative;

width: 45px;

height: 45px;

margin: 0;

padding: 0;

border: 0;

background: transparent;

text-indent: 0;

opacity: 1;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: center;

gap: 6px;

box-sizing: border-box;

cursor: pointer;

}


/* NUMBER */

.trimity-hero
.hero-indicators button span {

display: block;

color:
rgba(255,255,255,0.30);

font-family: "Sora", sans-serif;

font-size: 10px;

font-weight: 600;

line-height: 1;

letter-spacing: 1px;

transition:
color 0.3s ease;

}


/* LINE */

.trimity-hero
.hero-indicators button i {

display: block;

width: 20px;

height: 1px;

background:
rgba(255,255,255,0.25);

transition:
width 0.4s ease,
background 0.4s ease;

}


/* ACTIVE NUMBER */

.trimity-hero
.hero-indicators button.active span {

color: #7BD2F3;

}


/* ACTIVE LINE */

.trimity-hero
.hero-indicators button.active i {

width: 40px;

background: #159BD3;

}


/* HOVER */

.trimity-hero
.hero-indicators button:hover span {

color: #FFFFFF;

}


.trimity-hero
.hero-indicators button:hover i {

width: 32px;

background: #159BD3;

}


/* =========================================================
PREVIOUS / NEXT CONTROLS
========================================================= */

.trimity-hero
.hero-control {

position: absolute;

top: auto;

bottom: 28px;

z-index: 15;

width: 46px;

height: 46px;

margin: 0;

padding: 0;

opacity: 1;

}


.trimity-hero
.carousel-control-prev {

left: auto;

right: 105px;

}


.trimity-hero
.carousel-control-next {

right: 45px;

}


/* CONTROL BOX */

.hero-control-icon {

width: 44px;

height: 44px;

display: flex;

align-items: center;

justify-content: center;

border:
1px solid
rgba(255,255,255,0.25);

background:
rgba(11,31,51,0.35);

color: #FFFFFF;

font-size: 14px;

transition:
all 0.3s ease;

}


.hero-control:hover
.hero-control-icon {

background: #159BD3;

border-color: #159BD3;

color: #FFFFFF;

}


/* =========================================================
SCROLL INDICATOR
========================================================= */

.hero-scroll {

position: absolute;

z-index: 10;

left: 40px;

bottom: 30px;

display: flex;

align-items: center;

gap: 12px;

color:
rgba(255,255,255,0.38);

font-family: "Sora", sans-serif;

font-size: 8px;

font-weight: 600;

letter-spacing: 1.5px;

writing-mode: vertical-rl;

}


.scroll-line {

width: 1px;

height: 32px;

background:

linear-gradient(
 to bottom,

 #159BD3,

 transparent
);

}


/* =========================================================
ANIMATIONS
========================================================= */

@keyframes heroTitleIn {

from {

opacity: 0;

transform:
 translateY(35px);

}

to {

opacity: 1;

transform:
 translateY(0);

}

}


@keyframes heroContentIn {

from {

opacity: 0;

transform:
 translateY(20px);

}

to {

opacity: 1;

transform:
 translateY(0);

}

}


/* =========================================================
LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

.hero-content {

width: 70%;

}


.hero-content h1 {

font-size:
 clamp(
   50px,
   7vw,
   78px
 );

}


.hero-side-data {

right: 25px;

}

}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

:root {

--trimity-header-height: 114px;

}


.trimity-hero {

min-height: 600px;

}


.hero-slide {

min-height: 600px;

}


.hero-content {

left: 12px;

width: 76%;

}


.hero-indicators {

left: 24px;

}


.hero-scroll {

left: 24px;

}


.hero-content h1 {

font-size:
 clamp(
   48px,
   8vw,
   76px
 );

}


.hero-content p {

max-width: 560px;

}

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

/*
* On mobile the navigation/header is generally shorter.
*/

:root {

--trimity-header-height: 70px;

}


.trimity-hero {

height:
 calc(
   100svh -
   var(--trimity-header-height)
 );

min-height: 620px;

max-height: none;

}


.hero-slide {

min-height: 620px;

}


/* MOBILE OVERLAY */

.hero-overlay {

background:

 linear-gradient(
   90deg,

   rgba(5,18,30,0.96) 0%,

   rgba(5,18,30,0.82) 55%,

   rgba(5,18,30,0.55) 100%
 );

}


/* CONTENT */

.hero-content {

left: 20px;

top: 46%;

width:
 calc(
   100% - 40px
 );

transform:
 translateY(-45%);

}


.hero-top-line {

gap: 12px;

margin-bottom: 20px;

}


.hero-top-line div {

width: 35px;

}


.hero-top-line small {

font-size: 8px;

letter-spacing: 1.5px;

}


.hero-content h1 {

font-size:
 clamp(
   42px,
   12vw,
   62px
 );

line-height: 1.04;

letter-spacing: -2px;

}


.hero-content p {

max-width: 100%;

margin:
 22px 0
 28px;

font-size: 14px;

line-height: 1.7;

}


/* BUTTONS */

.hero-buttons {

flex-direction: column;

align-items: stretch;

gap: 10px;

}


.hero-btn {

width: 100%;

min-height: 50px;

}


/* PAGINATION */

.trimity-hero
.hero-indicators {

top: 25px;

left: 20px;

transform: none;

width: auto;

height: 35px;

flex-direction: row;

align-items: center;

gap: 12px;

}


.trimity-hero
.hero-indicators button {

width: 35px;

height: 35px;

gap: 5px;

}


.trimity-hero
.hero-indicators button i {

width: 18px;

}


.trimity-hero
.hero-indicators button.active i {

width: 35px;

}


/* HIDE SIDE DATA */

.hero-side-data {

display: none;

}


/* BOTTOM INFO */

.hero-bottom-info {

left: 20px;

bottom: 25px;

transform: none;

width:
 calc(
   100% - 40px
 );

overflow: hidden;

gap: 12px;

}


.hero-bottom-info span {

font-size: 7px;

}


.hero-bottom-info span:not(:last-child)::after {

margin-left: 12px;

}


/* CONTROLS */

.trimity-hero
.hero-control {

bottom: 72px;

width: 40px;

height: 40px;

}


.trimity-hero
.carousel-control-prev {

right: 65px;

}


.trimity-hero
.carousel-control-next {

right: 18px;

}


.hero-control-icon {

width: 38px;

height: 38px;

}


/* HIDE SCROLL */

.hero-scroll {

display: none;

}

}


/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.trimity-hero {

min-height: 620px;

}


.hero-slide {

min-height: 620px;

}


.hero-content h1 {

font-size: 43px;

}


.hero-top-line small {

font-size: 7px;

}


.hero-content p {

font-size: 13px;

}


.hero-bottom-info {

display: none;

}

}




/* =========================================================
   TRIMITY ENGINEERING - INTRO SECTION
========================================================= */

.trimity-intro-section {
  position: relative;

  padding: 120px 0;

  background: #FFFFFF;

  overflow: hidden;
}


/* ---------------------------------------------------------
   Background Technical Detail
--------------------------------------------------------- */

.trimity-intro-section::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -250px;
  left: -250px;

  border: 1px solid rgba(21, 155, 211, 0.06);

  border-radius: 50%;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Content
--------------------------------------------------------- */

.trimity-intro-content {
  position: relative;

  z-index: 2;
}


/* ---------------------------------------------------------
   Eyebrow
--------------------------------------------------------- */

.trimity-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 18px;

  color: #159BD3;

  font-family: var(--heading-font);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.trimity-eyebrow::before {
  content: "";

  width: 32px;
  height: 2px;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Main Heading
--------------------------------------------------------- */

.trimity-intro-title {
  max-width: 780px;

  margin: 0 0 32px;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: clamp(36px, 4vw, 54px);

  font-weight: 700;

  line-height: 1.08;

  letter-spacing: -1.3px;
}


.trimity-intro-title span {
  display: block;

  color: #159BD3;
}


/* ---------------------------------------------------------
   Body Content
--------------------------------------------------------- */

.trimity-intro-text {
  max-width: 800px;
}


.trimity-intro-text p {
  margin: 0 0 18px;

  color: #526170;

  font-family: var(--default-font);

  font-size: 15px;

  line-height: 1.85;
}


.trimity-intro-text p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.trimity-intro-cta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 14px;

  margin-top: 35px;
}


/* ---------------------------------------------------------
   Button Base
--------------------------------------------------------- */

.trimity-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  min-height: 52px;

  padding: 0 22px;

  font-family: var(--heading-font);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition:
    all .35s ease;
}


.trimity-btn span {
  font-size: 19px;

  line-height: 1;

  transition:
    transform .35s ease;
}


/* ---------------------------------------------------------
   Primary Button
--------------------------------------------------------- */

.trimity-btn-primary {
  color: #FFFFFF;

  background: #159BD3;

  border: 1px solid #159BD3;
}


.trimity-btn-primary:hover {
  color: #FFFFFF;

  background: #0B1F33;

  border-color: #0B1F33;
}


.trimity-btn-primary:hover span {
  transform: translate(3px, -3px);
}


/* ---------------------------------------------------------
   Outline Button
--------------------------------------------------------- */

.trimity-btn-outline {
  color: #0B1F33;

  background: transparent;

  border: 1px solid #B8C7D3;
}


.trimity-btn-outline:hover {
  color: #159BD3;

  border-color: #159BD3;
}


.trimity-btn-outline:hover span {
  transform: translate(3px, -3px);
}


/* =========================================================
   RIGHT SIDE VISUAL
========================================================= */

.trimity-intro-visual {
  position: relative;

  min-height: 620px;

  margin-left: 20px;
}


/* ---------------------------------------------------------
   Technical Grid
--------------------------------------------------------- */

.trimity-grid {
  position: absolute;

  width: 260px;
  height: 260px;

  top: -25px;
  right: -25px;

  opacity: .65;

  background-image:
    linear-gradient(
      rgba(21, 155, 211, .10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21, 155, 211, .10) 1px,
      transparent 1px
    );

  background-size: 22px 22px;

  z-index: 0;
}


/* ---------------------------------------------------------
   Image Wrapper
--------------------------------------------------------- */

.trimity-image-wrapper {
  position: absolute;

  top: 35px;
  left: 0;

  width: calc(100% - 25px);

  height: 530px;

  overflow: hidden;

  background: #0B1F33;

  z-index: 1;
}


.trimity-main-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .7s ease;
}


.trimity-image-wrapper:hover .trimity-main-image {
  transform: scale(1.04);
}


/* ---------------------------------------------------------
   Image Overlay
--------------------------------------------------------- */

.trimity-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(11, 31, 51, .02) 35%,
      rgba(11, 31, 51, .58) 100%
    );

  pointer-events: none;
}


/* ---------------------------------------------------------
   Engineering Corner Lines
--------------------------------------------------------- */

.trimity-corner-line {
  position: absolute;

  width: 80px;
  height: 80px;

  z-index: 3;

  pointer-events: none;
}


.trimity-corner-top {
  top: 5px;
  left: -12px;

  border-top: 3px solid #159BD3;
  border-left: 3px solid #159BD3;
}


.trimity-corner-bottom {
  right: 0;
  bottom: 35px;

  border-right: 3px solid #7BD2F3;
  border-bottom: 3px solid #7BD2F3;
}


/* ---------------------------------------------------------
   45+ Professionals Box
--------------------------------------------------------- */

.trimity-stat-box {
  position: absolute;

  right: -5px;
  bottom: 85px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: 150px;
  height: 125px;

  padding: 20px;

  background: #0B1F33;

  border-left: 4px solid #159BD3;

  z-index: 4;

  box-shadow:
    0 20px 45px rgba(11, 31, 51, .20);
}


.trimity-stat-number {
  color: #7BD2F3;

  font-family: var(--heading-font);

  font-size: 38px;

  font-weight: 700;

  line-height: 1;
}


.trimity-stat-label {
  margin-top: 8px;

  color: #FFFFFF;

  font-family: var(--default-font);

  font-size: 12px;

  font-weight: 500;

  letter-spacing: .5px;
}


/* ---------------------------------------------------------
   Visual Label
--------------------------------------------------------- */

.trimity-visual-label {
  position: absolute;

  left: 25px;
  bottom: 18px;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.5px;

  z-index: 5;
}


.trimity-label-dot {
  width: 7px;
  height: 7px;

  background: #159BD3;

  border-radius: 50%;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

  .trimity-intro-visual {
    min-height: 570px;
  }

  .trimity-image-wrapper {
    height: 490px;
  }

}


@media (max-width: 991px) {

  .trimity-intro-section {
    padding: 85px 0;
  }

  .trimity-intro-visual {
    min-height: 580px;

    margin: 35px 0 0;
  }

  .trimity-image-wrapper {
    width: calc(100% - 30px);

    height: 500px;
  }

}


@media (max-width: 767px) {

  .trimity-intro-section {
    padding: 70px 0;
  }

  .trimity-intro-title {
    font-size: 35px;

    letter-spacing: -.7px;
  }

  .trimity-intro-text p {
    font-size: 14px;

    line-height: 1.8;
  }

  .trimity-intro-cta {
    align-items: stretch;

    flex-direction: column;
  }

  .trimity-btn {
    width: 100%;
  }

  .trimity-intro-visual {
    min-height: 490px;

    margin-top: 20px;
  }

  .trimity-image-wrapper {
    width: calc(100% - 20px);

    height: 420px;
  }

  .trimity-grid {
    width: 180px;
    height: 180px;

    right: 0;
  }

  .trimity-stat-box {
    right: 0;
    bottom: 35px;

    width: 135px;
    height: 110px;
  }

  .trimity-stat-number {
    font-size: 32px;
  }

}


@media (max-width: 480px) {

  .trimity-intro-title {
    font-size: 31px;
  }

  .trimity-intro-visual {
    min-height: 440px;
  }

  .trimity-image-wrapper {
    height: 380px;
  }

  .trimity-stat-box {
    width: 125px;
    height: 100px;
  }

  .trimity-stat-number {
    font-size: 28px;
  }

}


/* =========================================================
   INTEGRATED ENGINEERING SERVICES
========================================================= */

.engineering-services-section {
  position: relative;

  padding: 115px 0;

  background-color: #0B1F33;

  overflow: hidden;
}



/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

.services-header {
  position: relative;
  z-index: 2;

  margin-bottom: 55px;
}


.services-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 17px;

  color: #7BD2F3;

  font-family: var(--heading-font);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.services-eyebrow::before {
  content: "";

  width: 30px;
  height: 2px;

  background: #159BD3;
}


.services-title {
  max-width: 800px;

  margin: 0;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: clamp(36px, 4.5vw, 58px);

  font-weight: 700;

  line-height: 1.08;

  letter-spacing: -1.5px;
}


.services-title span {
  display: block;

  color: #159BD3;
}


.services-intro {
  max-width: 480px;

  margin: 0 0 5px auto;

  color: #B8C7D3;

  font-family: var(--default-font);

  font-size: 15px;

  line-height: 1.8;
}


/* ---------------------------------------------------------
   Service Card
--------------------------------------------------------- */

.service-card {
  position: relative;

  height: 100%;

  background: #132D45;

  border: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}


.service-card:hover {
  transform: translateY(-8px);

  border-color: rgba(21, 155, 211, 0.55);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.28);
}


/* ---------------------------------------------------------
   Service Image
--------------------------------------------------------- */

.service-image {
  position: relative;

  height: 280px;

  overflow: hidden;

  background: #10283D;
}


.service-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform .7s ease,
    filter .7s ease;
}


.service-card:hover .service-image img {
  transform: scale(1.06);

  filter: brightness(0.82);
}


/* ---------------------------------------------------------
   Image Overlay
--------------------------------------------------------- */

/* .service-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(11, 31, 51, 0.05) 20%,
      rgba(11, 31, 51, 0.75) 100%
    );
} */


/* ---------------------------------------------------------
   Service Number
--------------------------------------------------------- */

.service-number {
  position: absolute;

  left: 25px;
  bottom: 22px;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;
}


.service-number::after {
  content: "";

  display: inline-block;

  width: 35px;
  height: 1px;

  margin-left: 10px;

  vertical-align: middle;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Service Content
--------------------------------------------------------- */

.service-content {
  position: relative;

  padding: 30px 30px 26px;
}


.service-content-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 25px;
}


.service-content h3 {
  max-width: 470px;

  margin: 0 0 14px;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 23px;

  font-weight: 600;

  line-height: 1.3;
}


.service-content p {
  max-width: 520px;

  margin: 0;

  color: #B8C7D3;

  font-family: var(--default-font);

  font-size: 14.5px;

  line-height: 1.75;
}


/* ---------------------------------------------------------
   Arrow Button
--------------------------------------------------------- */

.service-arrow {
  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  color: #FFFFFF !important;

  background: #159BD3;

  border: 1px solid #159BD3;

  text-decoration: none;

  transition:
    background .35s ease,
    color .35s ease,
    transform .35s ease,
    border-color .35s ease;
}


.service-arrow span {
  display: block;

  font-size: 25px;

  font-weight: 300;

  line-height: 1;

  transition: transform .35s ease;
}


.service-card:hover .service-arrow {
  background: #7BD2F3;

  border-color: #7BD2F3;

  color: #0B1F33 !important;
}


.service-card:hover .service-arrow span {
  transform: translate(3px, -3px);
}


/* ---------------------------------------------------------
   Bottom Technical Line
--------------------------------------------------------- */

.service-bottom-line {
  width: 45px;
  height: 2px;

  margin-top: 28px;

  background: #159BD3;

  transition: width .4s ease;
}


.service-card:hover .service-bottom-line {
  width: 100%;
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 991px) {

  .engineering-services-section {
    padding: 85px 0;
  }

  .services-header {
    margin-bottom: 40px;
  }

  .services-intro {
    margin: 25px 0 0;
  }

  .service-image {
    height: 260px;
  }

}


@media (max-width: 767px) {

  .engineering-services-section {
    padding: 70px 0;
  }

  .services-title {
    font-size: 35px;

    letter-spacing: -.7px;
  }

  .services-intro {
    font-size: 14px;
  }

  .service-image {
    height: 220px;
  }

  .service-content {
    padding: 25px 22px 22px;
  }

  .service-content-top {
    gap: 15px;
  }

  .service-content h3 {
    font-size: 20px;
  }

  .service-content p {
    font-size: 14px;
  }

  .service-arrow {
    width: 46px;
    height: 46px;
  }

}


@media (max-width: 480px) {

  .service-content-top {
    display: block;
  }

  .service-arrow {
    margin-top: 22px;
  }

}

/* =========================================================
   WHY CHOOSE TRIMITY ENGINEERING
========================================================= */

.why-choose-section {
  position: relative;
  padding: 110px 0;
  background: var(--background-color);
  overflow: hidden;
}


/* ---------------------------------------------------------
   Technical Background Detail
--------------------------------------------------------- */

/* .why-choose-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: 80px;
  border: 1px solid rgba(21, 155, 211, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.why-choose-section::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -110px;
  top: 150px;
  border: 1px solid rgba(21, 155, 211, 0.06);
  border-radius: 50%;
  pointer-events: none;
} */


/* ---------------------------------------------------------
   Section Eyebrow
--------------------------------------------------------- */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;

  color: var(--accent-color);

  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--accent-color);
}


/* ---------------------------------------------------------
   Section Heading
--------------------------------------------------------- */

.section-title {
  max-width: 700px;
  margin: 0;

  color: var(--heading-color);

  font-family: var(--heading-font);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
}

.section-title span {
  display: block;
  color: var(--accent-color);
}


/* ---------------------------------------------------------
   Intro
--------------------------------------------------------- */

.section-intro {
  max-width: 520px;

  color: var(--default-color);

  font-size: 16px;
  line-height: 1.8;
}


/* ---------------------------------------------------------
   Feature Card
--------------------------------------------------------- */

.why-card {
  position: relative;

  height: 100%;
  min-height: 330px;

  padding: 32px;

  background: var(--surface-color);

  border: 1px solid #DCE6ED;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

  overflow: hidden;
}


/* Engineering corner detail */

.why-card::before {
  content: "";
  position: absolute;

  top: 0;
  right: 0;

  width: 70px;
  height: 70px;

  border-top: 2px solid rgba(21, 155, 211, .15);
  border-right: 2px solid rgba(21, 155, 211, .15);

  transition: all .35s ease;
}


.why-card:hover {
  transform: translateY(-7px);

  border-color: rgba(21, 155, 211, .45);

  box-shadow:
    0 20px 50px rgba(11, 31, 51, .10);
}


.why-card:hover::before {
  width: 90px;
  height: 90px;

  border-color: rgba(21, 155, 211, .5);
}


/* ---------------------------------------------------------
   Card Top
--------------------------------------------------------- */

.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 38px;
}


/* ---------------------------------------------------------
   Number
--------------------------------------------------------- */

.why-number {
  color: rgba(11, 31, 51, .18);

  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}


/* ---------------------------------------------------------
   Icon
--------------------------------------------------------- */

.why-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  background: #F5F9FC;

  border: 1px solid #DCE6ED;

  transition: all .35s ease;
}


.why-icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: var(--accent-color);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform .35s ease;
}


.why-card:hover .why-icon {
  background: var(--accent-color);
  border-color: var(--accent-color);
}


.why-card:hover .why-icon svg {
  stroke: var(--contrast-color);
  transform: scale(1.08);
}


/* ---------------------------------------------------------
   Card Heading
--------------------------------------------------------- */

.why-card h3 {
  max-width: 390px;

  margin-bottom: 16px;

  color: var(--heading-color);

  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}


/* ---------------------------------------------------------
   Card Description
--------------------------------------------------------- */

.why-card p {
  max-width: 430px;

  margin-bottom: 0;

  color: var(--default-color);

  font-family: var(--default-font);
  font-size: 15px;
  line-height: 1.75;
}


/* ---------------------------------------------------------
   Technical Bottom Line
--------------------------------------------------------- */

.why-line {
  position: absolute;

  left: 32px;
  bottom: 0;

  width: 45px;
  height: 3px;

  background: var(--accent-color);

  transition: width .35s ease;
}


.why-card:hover .why-line {
  width: 100px;
}


/* ---------------------------------------------------------
   Wide Card
--------------------------------------------------------- */

.why-card-wide {
  min-height: 330px;
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 991px) {

  .why-choose-section {
    padding: 80px 0;
  }

  .section-intro {
    margin-top: 25px;
  }

  .why-card-wide {
    min-height: 300px;
  }

}


@media (max-width: 767px) {

  .why-choose-section {
    padding: 65px 0;
  }

  .section-title {
    font-size: 34px;
    letter-spacing: -.6px;
  }

  .section-intro {
    font-size: 15px;
  }

  .why-card {
    min-height: auto;
    padding: 26px;
  }

  .why-card-top {
    margin-bottom: 30px;
  }

  .why-card h3 {
    font-size: 20px;
  }

  .why-card p {
    font-size: 14px;
  }

  .why-card-wide {
    min-height: auto;
  }

}



/* =========================================================
   WHY CHOOSE TRIMITY ENGINEERING - CARD IMAGES
========================================================= */

.why-card-image {
  position: relative;
  width: 100%;
  height: 180px;
  margin-bottom: 28px;
  overflow: hidden;
  background: #F5F9FC;
  border: 1px solid #DCE6ED;
}

.why-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}

/* Image Hover Effect */

.why-card:hover .why-card-image img {
  transform: scale(1.04);
}

/* Wide Card Image */

.why-card-wide .why-card-image {
  height: 220px;
}

/* Responsive Images */

@media (max-width: 991px) {

  .why-card-image {
    height: 190px;
  }

  .why-card-wide .why-card-image {
    height: 200px;
  }

}

@media (max-width: 767px) {

  .why-card-image {
    height: 200px;
    margin-bottom: 24px;
  }

  .why-card-wide .why-card-image {
    height: 200px;
  }

}



/* =========================================================
   SUPPORTING FACILITIES / ENGINEERING APPROACH
========================================================= */

.lifecycle-section {
  position: relative;

  padding: 110px 0;

  background: #0B1F33;

  overflow: hidden;
}


/* ---------------------------------------------------------
   Main Wrapper
--------------------------------------------------------- */

.lifecycle-wrapper {
  position: relative;

  padding: 80px 75px;

  background: #102A41;

  border: 1px solid rgba(123, 210, 243, 0.12);

  overflow: hidden;
}


/* ---------------------------------------------------------
   Technical Grid
--------------------------------------------------------- */

.lifecycle-grid {
  position: absolute;

  top: 0;
  right: 0;

  width: 48%;
  height: 100%;

  opacity: .45;

  background-image:
    linear-gradient(
      rgba(123, 210, 243, .055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(123, 210, 243, .055) 1px,
      transparent 1px
    );

  background-size: 30px 30px;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Large Background Number
--------------------------------------------------------- */

.lifecycle-bg-number {
  position: absolute;

  right: -15px;
  bottom: -80px;

  color: rgba(255, 255, 255, .025);

  font-family: var(--heading-font);

  font-size: 360px;

  font-weight: 700;

  line-height: 1;

  user-select: none;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Section Label
--------------------------------------------------------- */

.lifecycle-label {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color: #7BD2F3;

  font-family: var(--heading-font);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.lifecycle-label::before {
  content: "";

  width: 30px;
  height: 2px;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.lifecycle-title {
  position: relative;

  max-width: 480px;

  margin: 0;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: clamp(36px, 4vw, 54px);

  font-weight: 700;

  line-height: 1.08;

  letter-spacing: -1.2px;

  z-index: 2;
}


.lifecycle-title span {
  display: block;

  color: #159BD3;
}


/* ---------------------------------------------------------
   Lifecycle Vertical Line
--------------------------------------------------------- */

.lifecycle-line {
  position: relative;

  display: flex;

  flex-direction: column;

  gap: 24px;

  margin-top: 55px;

  padding-left: 2px;

  z-index: 2;
}


.lifecycle-line-track {
  position: absolute;

  top: 8px;
  bottom: 8px;

  left: 5px;

  width: 1px;

  background: rgba(123, 210, 243, .22);
}


/* ---------------------------------------------------------
   Lifecycle Points
--------------------------------------------------------- */

.lifecycle-point {
  position: relative;

  display: flex;

  align-items: center;

  height: 30px;

  z-index: 2;
}


.lifecycle-point::before {
  content: "";

  width: 9px;
  height: 9px;

  margin-right: 18px;

  background: #102A41;

  border: 1px solid #7BD2F3;

  border-radius: 50%;
}


.lifecycle-point.active::before {
  background: #159BD3;

  border-color: #159BD3;

  box-shadow:
    0 0 0 5px rgba(21, 155, 211, .12);
}


.lifecycle-point span {
  color: #7890A3;

  font-family: var(--heading-font);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 1px;
}


.lifecycle-point.active span {
  color: #FFFFFF;
}


/* ---------------------------------------------------------
   Content
--------------------------------------------------------- */

.lifecycle-content {
  position: relative;

  max-width: 650px;

  z-index: 2;
}


.lifecycle-content p {
  margin: 0 0 22px;

  color: #B8C7D3;

  font-family: var(--default-font);

  font-size: 15px;

  line-height: 1.85;
}


.lifecycle-content p:last-of-type {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.lifecycle-cta {
  margin-top: 38px;
}


.lifecycle-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-height: 54px;

  padding: 0 24px;

  color: #FFFFFF;

  background: #159BD3;

  border: 1px solid #159BD3;

  font-family: var(--heading-font);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition:
    background .35s ease,
    border-color .35s ease,
    transform .35s ease;
}


.lifecycle-btn:hover {
  color: #FFFFFF;

  background: transparent;

  border-color: #7BD2F3;

  transform: translateY(-3px);
}


.lifecycle-btn-arrow {
  font-size: 20px;

  line-height: 1;

  transition: transform .35s ease;
}


.lifecycle-btn:hover .lifecycle-btn-arrow {
  transform: translate(3px, -3px);
}


/* ---------------------------------------------------------
   Bottom Technical Information
--------------------------------------------------------- */

.lifecycle-bottom {
  position: relative;

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 65px;

  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, .08);

  z-index: 3;
}


.lifecycle-bottom span {
  color: #7890A3;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.5px;
}


.lifecycle-bottom span:last-child {
  color: #7BD2F3;
}


.lifecycle-bottom i {
  display: block;

  width: 35px;
  height: 1px;

  background: rgba(123, 210, 243, .35);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .lifecycle-section {
    padding: 85px 0;
  }

  .lifecycle-wrapper {
    padding: 65px 45px;
  }

  .lifecycle-content {
    margin-top: 55px;
  }

  .lifecycle-grid {
    width: 100%;
  }

  .lifecycle-bg-number {
    font-size: 280px;
  }

}


@media (max-width: 767px) {

  .lifecycle-section {
    padding: 70px 0;
  }

  .lifecycle-wrapper {
    padding: 50px 25px;
  }

  .lifecycle-title {
    font-size: 35px;

    letter-spacing: -.7px;
  }

  .lifecycle-content {
    margin-top: 45px;
  }

  .lifecycle-content p {
    font-size: 14px;

    line-height: 1.8;
  }

  .lifecycle-line {
    display: none;
  }

  .lifecycle-bg-number {
    right: -20px;
    bottom: -30px;

    font-size: 200px;
  }

  .lifecycle-bottom {
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 45px;
  }

  .lifecycle-bottom i {
    width: 20px;
  }

}


@media (max-width: 480px) {

  .lifecycle-wrapper {
    padding: 45px 20px;
  }

  .lifecycle-title {
    font-size: 31px;
  }

  .lifecycle-bottom span {
    font-size: 9px;
  }

  .lifecycle-bottom i {
    width: 14px;
  }

}


/* =========================================================
   ABOUT TRIMITY ENGINEERING
========================================================= */

.trimity-about-page {
  background: #FFFFFF;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
  position: relative;

  padding: 110px 0;

  background: #0B1F33;

  overflow: hidden;
}



/* ---------------------------------------------------------
   Eyebrow
--------------------------------------------------------- */

.about-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #7BD2F3;

  font-family: var(--heading-font);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.about-eyebrow::before {
  content: "";

  width: 30px;
  height: 2px;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Hero Title
--------------------------------------------------------- */

.about-hero-title {
  max-width: 850px;

  margin: 0;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: clamp(42px, 5vw, 68px);

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: -1.8px;
}


.about-hero-title span {
  display: block;

  color: #159BD3;
}


.about-hero-line {
  width: 75px;
  height: 3px;

  margin-top: 32px;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Hero Technical Number
--------------------------------------------------------- */

.about-hero-tech {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 22px;
}


.about-tech-number {
  color: rgba(123, 210, 243, .18);

  font-family: var(--heading-font);

  font-size: 150px;

  font-weight: 700;

  line-height: 1;
}


.about-tech-text {
  padding-left: 20px;

  color: #7BD2F3;

  border-left: 1px solid rgba(123, 210, 243, .3);

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.5px;

  line-height: 1.7;
}


/* =========================================================
   LEADERSHIP SECTION
========================================================= */

.about-leadership-section {
  padding: 120px 0;

  background: #FFFFFF;
}


/* ---------------------------------------------------------
   Image Container
--------------------------------------------------------- */

.about-image-container {
  position: relative;

  min-height: 570px;

  padding: 25px;
}


.about-image-grid {
  position: absolute;

  top: 0;
  left: 0;

  width: 230px;
  height: 230px;

  background-image:
    linear-gradient(
      rgba(21, 155, 211, .13) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21, 155, 211, .13) 1px,
      transparent 1px
    );

  background-size: 20px 20px;
}


.about-main-image {
  position: relative;

  width: 100%;
  height: 520px;

  overflow: hidden;

  background: #0B1F33;

  z-index: 1;
}


.about-main-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .7s ease;
}


.about-image-container:hover .about-main-image img {
  transform: scale(1.04);
}


.about-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(11, 31, 51, .02) 30%,
      rgba(11, 31, 51, .72) 100%
    );
}


/* ---------------------------------------------------------
   Image Number
--------------------------------------------------------- */

.about-image-number {
  position: absolute;

  right: 0;
  bottom: 0;

  color: rgba(21, 155, 211, .18);

  font-family: var(--heading-font);

  font-size: 145px;

  font-weight: 700;

  line-height: 1;

  z-index: 2;
}


/* ---------------------------------------------------------
   Image Label
--------------------------------------------------------- */

.about-image-label {
  position: absolute;

  left: 48px;
  bottom: 45px;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.8px;

  z-index: 3;
}


.about-image-label::before {
  content: "";

  display: inline-block;

  width: 28px;
  height: 2px;

  margin-right: 10px;

  vertical-align: middle;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Image Corner Details
--------------------------------------------------------- */

.about-corner {
  position: absolute;

  width: 75px;
  height: 75px;

  z-index: 4;
}


.about-corner-top {
  top: 5px;
  left: 5px;

  border-top: 3px solid #159BD3;
  border-left: 3px solid #159BD3;
}


.about-corner-bottom {
  right: 5px;
  bottom: 5px;

  border-right: 3px solid #7BD2F3;
  border-bottom: 3px solid #7BD2F3;
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-content {
  padding-left: 30px;
}


.about-section-number {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;
  height: 48px;

  margin-bottom: 25px;

  color: #159BD3;

  border: 1px solid rgba(21, 155, 211, .35);

  font-family: var(--heading-font);

  font-size: 13px;

  font-weight: 700;
}


.about-content h2 {
  max-width: 580px;

  margin: 0 0 25px;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: clamp(32px, 3.2vw, 46px);

  font-weight: 700;

  line-height: 1.12;

  letter-spacing: -.8px;
}


.about-content p {
  max-width: 650px;

  margin: 0;

  color: #526170;

  font-family: var(--default-font);

  font-size: 15px;

  line-height: 1.9;
}


.about-content strong {
  color: #0B1F33;

  font-weight: 700;
}


/* =========================================================
   VISION / MISSION SECTION
========================================================= */

.about-vision-mission-section {
  position: relative;

  padding: 115px 0;

  background: #F5F9FC;

  overflow: hidden;
}


.about-vision-mission-section::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -280px;
  top: -220px;

  border: 1px solid rgba(21, 155, 211, .07);

  border-radius: 50%;
}


.vision-main-title {
  max-width: 800px;

  margin: 0;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: clamp(34px, 4vw, 52px);

  font-weight: 700;

  line-height: 1.08;

  letter-spacing: -1.2px;
}


.vision-main-title span {
  display: block;

  color: #159BD3;
}


/* =========================================================
   VISION / MISSION CARDS
========================================================= */

.vision-mission-card {
  position: relative;

  min-height: 400px;

  padding: 35px;

  background: #FFFFFF;

  border: 1px solid #DCE6ED;

  overflow: hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


.vision-mission-card:hover {
  transform: translateY(-7px);

  border-color: rgba(21, 155, 211, .45);

  box-shadow:
    0 25px 55px rgba(11, 31, 51, .10);
}


/* ---------------------------------------------------------
   Card Header
--------------------------------------------------------- */

.vm-card-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 40px;
}


.vm-number {
  color: rgba(11, 31, 51, .18);

  font-family: var(--heading-font);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;
}


.vm-label {
  color: #159BD3;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.8px;
}


/* ---------------------------------------------------------
   VM Icon
--------------------------------------------------------- */

.vm-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 55px;
  height: 55px;

  margin-bottom: 25px;

  background: #F5F9FC;

  border: 1px solid #DCE6ED;
}


.vm-icon svg {
  width: 27px;
  height: 27px;

  fill: none;

  stroke: #159BD3;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* ---------------------------------------------------------
   VM Content
--------------------------------------------------------- */

.vision-mission-card h3 {
  max-width: 550px;

  margin: 0 0 18px;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: 23px;

  font-weight: 600;

  line-height: 1.3;
}


.vision-mission-card p {
  max-width: 580px;

  margin: 0;

  color: #526170;

  font-family: var(--default-font);

  font-size: 14.5px;

  line-height: 1.8;
}


/* ---------------------------------------------------------
   Bottom Line
--------------------------------------------------------- */

.vm-bottom-line {
  position: absolute;

  left: 35px;
  bottom: 0;

  width: 55px;
  height: 3px;

  background: #159BD3;

  transition: width .35s ease;
}


.vision-mission-card:hover .vm-bottom-line {
  width: 120px;
}


/* =========================================================
   ENGINEERING STATEMENT
========================================================= */

.about-statement-section {
  padding: 90px 0;

  background: #FFFFFF;
}


.about-statement {
  position: relative;

  padding: 50px 60px;

  background: #0B1F33;

  overflow: hidden;
}


.statement-grid {
  position: absolute;

  right: 0;
  top: 0;

  width: 45%;
  height: 100%;

  background-image:
    linear-gradient(
      rgba(123, 210, 243, .05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(123, 210, 243, .05) 1px,
      transparent 1px
    );

  background-size: 28px 28px;
}


.statement-number {
  color: rgba(123, 210, 243, .2);

  font-family: var(--heading-font);

  font-size: 70px;

  font-weight: 700;
}


.statement-text {
  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: clamp(24px, 3vw, 38px);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -.5px;
}


.statement-text span {
  display: block;

  color: #159BD3;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .about-hero {
    padding: 85px 0;
  }

  .about-hero-tech {
    justify-content: flex-start;

    margin-top: 30px;
  }

  .about-leadership-section {
    padding: 85px 0;
  }

  .about-content {
    padding-left: 0;
  }

  .about-vision-mission-section {
    padding: 85px 0;
  }

  .about-statement-section {
    padding: 70px 0;
  }

}


@media (max-width: 767px) {

  .about-hero {
    padding: 70px 0;
  }

  .about-hero-title {
    font-size: 40px;

    letter-spacing: -.8px;
  }

  .about-tech-number {
    font-size: 95px;
  }

  .about-leadership-section {
    padding: 65px 0;
  }

  .about-image-container {
    min-height: 430px;

    padding: 15px;
  }

  .about-main-image {
    height: 400px;
  }

  .about-image-number {
    font-size: 100px;
  }

  .about-image-label {
    left: 32px;
    bottom: 30px;
  }

  .about-content h2 {
    font-size: 31px;
  }

  .about-content p {
    font-size: 14px;

    line-height: 1.8;
  }

  .about-vision-mission-section {
    padding: 65px 0;
  }

  .vision-main-title {
    font-size: 35px;
  }

  .vision-mission-card {
    min-height: auto;

    padding: 27px;
  }

  .vision-mission-card h3 {
    font-size: 20px;
  }

  .about-statement {
    padding: 40px 25px;
  }

  .statement-number {
    margin-bottom: 20px;

    font-size: 55px;
  }

}


@media (max-width: 480px) {

  .about-hero-title {
    font-size: 34px;
  }

  .about-tech-number {
    font-size: 75px;
  }

  .about-main-image {
    height: 350px;
  }

  .about-image-container {
    min-height: 380px;
  }

  .vision-main-title {
    font-size: 30px;
  }

}



/* =========================================================
   ENGINEERING & TECHNICAL SERVICES PAGE
========================================================= */

.engineering-services-page {
  position: relative;

  background: #FFFFFF;

  overflow: hidden;
}


/* =========================================================
   PAGE HERO
========================================================= */

.services-page-hero {
  position: relative;

  padding: 110px 0;

  background: #0B1F33;

  overflow: hidden;
}


.services-page-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #7BD2F3;

  font-family: var(--heading-font);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.services-page-eyebrow::before {
  content: "";

  width: 30px;
  height: 2px;

  background: #159BD3;
}


.services-page-title {
  margin: 0;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: clamp(42px, 5vw, 68px);

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: -1.8px;
}


.services-page-subtitle {
  margin: 20px 0 0;

  color: #B8C7D3;

  font-family: var(--default-font);

  font-size: 16px;

  letter-spacing: .3px;
}


/* Hero Number */

.services-hero-number {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 20px;
}


.services-hero-number span {
  color: rgba(123, 210, 243, .18);

  font-family: var(--heading-font);

  font-size: 120px;

  font-weight: 700;

  line-height: 1;
}


.services-hero-number small {
  padding-left: 18px;

  color: #7BD2F3;

  border-left: 1px solid rgba(123, 210, 243, .3);

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.5px;

  line-height: 1.7;
}


/* =========================================================
   SERVICE DETAIL SECTION
========================================================= */

.service-detail-section {
  position: relative;

  padding: 120px 0;

  background: #FFFFFF;
}


.service-detail-section:nth-of-type(odd) {
  background: #F5F9FC;
}


/* =========================================================
   DARK SERVICE SECTION
========================================================= */

.service-detail-dark {
  background: #0B1F33 !important;

  overflow: hidden;
}


.service-detail-dark::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -280px;
  top: 50%;

  transform: translateY(-50%);

  border: 1px solid rgba(123, 210, 243, .06);

  border-radius: 50%;
}


/* =========================================================
   SERVICE IMAGE
========================================================= */

.service-detail-visual {
  position: relative;

  min-height: 520px;

  padding: 25px;
}


.service-image-grid {
  position: absolute;

  top: 0;
  left: 0;

  width: 220px;
  height: 220px;

  background-image:
    linear-gradient(
      rgba(21, 155, 211, .13) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21, 155, 211, .13) 1px,
      transparent 1px
    );

  background-size: 20px 20px;

  z-index: 0;
}


.service-detail-image {
  position: relative;

  width: 100%;
  height: 470px;

  overflow: hidden;

  background: #0B1F33;

  z-index: 1;
}


.service-detail-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .7s ease;
}


.service-detail-visual:hover .service-detail-image img {
  transform: scale(1.045);
}


.service-image-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(11, 31, 51, .02) 30%,
      rgba(11, 31, 51, .72) 100%
    );
}


/* =========================================================
   LARGE NUMBER
========================================================= */

.service-large-number {
  position: absolute;

  right: 0;
  bottom: 10px;

  color: rgba(21, 155, 211, .15);

  font-family: var(--heading-font);

  font-size: 145px;

  font-weight: 700;

  line-height: 1;

  z-index: 2;

  user-select: none;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.service-image-label {
  position: absolute;

  left: 45px;
  bottom: 45px;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.8px;

  z-index: 3;
}


.service-image-label::before {
  content: "";

  display: inline-block;

  width: 25px;
  height: 2px;

  margin-right: 10px;

  vertical-align: middle;

  background: #159BD3;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-detail-content {
  position: relative;

  padding: 10px 10px 10px 30px;
}


.service-light-content {
  padding-left: 0;
}


.service-section-number {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 46px;
  height: 46px;

  margin-bottom: 25px;

  color: #159BD3;

  border: 1px solid rgba(21, 155, 211, .35);

  font-family: var(--heading-font);

  font-size: 13px;

  font-weight: 700;
}


.service-detail-content h2 {
  max-width: 650px;

  margin: 0 0 18px;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: clamp(31px, 3vw, 44px);

  font-weight: 700;

  line-height: 1.12;

  letter-spacing: -.8px;
}


.service-light-content h2 {
  color: #FFFFFF;
}


.service-detail-content h3 {
  margin: 0 0 20px;

  color: #159BD3;

  font-family: var(--heading-font);

  font-size: 20px;

  font-weight: 600;

  line-height: 1.35;
}


.service-description {
  max-width: 650px;

  margin: 0 0 30px;

  color: #526170;

  font-family: var(--default-font);

  font-size: 15px;

  line-height: 1.8;
}


.service-light-content .service-description {
  color: #B8C7D3;
}


/* =========================================================
   SERVICE FEATURE GRID
========================================================= */

.service-feature-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0;

  border-top: 1px solid #DCE6ED;

  border-left: 1px solid #DCE6ED;
}


.service-light-content .service-feature-grid {
  border-color: rgba(255, 255, 255, .10);
}


.service-feature {
  position: relative;

  min-height: 62px;

  display: flex;

  align-items: center;

  padding: 13px 18px 13px 38px;

  color: #526170;

  border-right: 1px solid #DCE6ED;

  border-bottom: 1px solid #DCE6ED;

  font-family: var(--default-font);

  font-size: 13px;
  
  font-weight: bolder;

  line-height: 1.45;

  transition:
    background .3s ease,
    color .3s ease,
    padding .3s ease;
}


.service-light-content .service-feature {
  color: #B8C7D3;

  border-color: rgba(255, 255, 255, .10);
}


.service-feature::before {
  content: "";

  position: absolute;

  left: 17px;

  width: 7px;
  height: 7px;

  background: #159BD3;

  transform: rotate(45deg);

  transition: transform .3s ease;
}


.service-feature:hover {
  color: #0B1F33;

  background: rgba(21, 155, 211, .06);

  padding-left: 42px;
}


.service-light-content .service-feature:hover {
  color: #FFFFFF;

  background: rgba(21, 155, 211, .08);
}


.service-feature:hover::before {
  transform: rotate(90deg);
}


/* =========================================================
   FINAL CTA
========================================================= */

.services-final-cta {
  padding: 100px 0;

  background: #F5F9FC;
}


.services-cta-box {
  position: relative;

  padding: 65px 70px;

  background: #0B1F33;

  overflow: hidden;
}


.services-cta-grid {
  position: absolute;

  top: 0;
  right: 0;

  width: 45%;
  height: 100%;

  opacity: .45;

  background-image:
    linear-gradient(
      rgba(123, 210, 243, .06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(123, 210, 243, .06) 1px,
      transparent 1px
    );

  background-size: 28px 28px;
}


.services-cta-box h2 {
  max-width: 700px;

  margin: 0;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: clamp(28px, 3.2vw, 42px);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -.7px;
}


.services-cta-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-height: 54px;

  padding: 0 25px;

  color: #FFFFFF;

  background: #159BD3;

  border: 1px solid #159BD3;

  font-family: var(--heading-font);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition:
    all .35s ease;
}


.services-cta-button span {
  font-size: 20px;

  transition:
    transform .35s ease;
}


.services-cta-button:hover {
  color: #FFFFFF;

  background: transparent;

  border-color: #7BD2F3;
}


.services-cta-button:hover span {
  transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .services-page-hero {
    padding: 85px 0;
  }

  .services-hero-number {
    justify-content: flex-start;

    margin-top: 35px;
  }

  .service-detail-section {
    padding: 85px 0;
  }

  .service-detail-visual {
    min-height: 500px;
  }

  .service-detail-image {
    height: 450px;
  }

  .service-detail-content {
    padding: 0;
  }

  .services-final-cta {
    padding: 75px 0;
  }

}


@media (max-width: 767px) {

  .services-page-hero {
    padding: 70px 0;
  }

  .services-page-title {
    font-size: 42px;

    letter-spacing: -.8px;
  }

  .services-hero-number span {
    font-size: 80px;
  }

  .service-detail-section {
    padding: 65px 0;
  }

  .service-detail-visual {
    min-height: 390px;

    padding: 15px;
  }

  .service-detail-image {
    height: 350px;
  }

  .service-image-grid {
    width: 150px;
    height: 150px;
  }

  .service-large-number {
    font-size: 100px;
  }

  .service-image-label {
    left: 30px;
    bottom: 30px;
  }

  .service-detail-content h2 {
    font-size: 31px;
  }

  .service-detail-content h3 {
    font-size: 18px;
  }

  .service-description {
    font-size: 14px;
  }

  .service-feature-grid {
    grid-template-columns: 1fr;
  }

  .services-cta-box {
    padding: 45px 25px;
  }

  .services-cta-button {
    width: 100%;

    margin-top: 30px;
  }

}


@media (max-width: 480px) {

  .services-page-title {
    font-size: 35px;
  }

  .services-page-subtitle {
    font-size: 14px;
  }

  .service-detail-visual {
    min-height: 340px;
  }

  .service-detail-image {
    height: 300px;
  }

  .service-large-number {
    font-size: 80px;
  }

  .service-detail-content h2 {
    font-size: 28px;
  }

}

/* =========================================================
   FROM CONCEPT TO OPERATIONS
========================================================= */

.concept-operations-section {
  position: relative;

  padding: 120px 0;

  background: #F5F9FC;

  overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.concept-header {
  margin-bottom: 75px;
}


.concept-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #159BD3;

  font-family: var(--heading-font);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.concept-eyebrow::before {
  content: "";

  width: 30px;
  height: 2px;

  background: #159BD3;
}


.concept-title {
  margin: 0;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: clamp(40px, 4.5vw, 60px);

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: -1.5px;
}


.concept-title span {
  display: block;

  color: #159BD3;
}


.concept-header-line {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 12px;

  color: #718293;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.8px;
}


.concept-header-line span {
  width: 45px;
  height: 1px;

  background: #159BD3;
}


/* =========================================================
   ENGINEERING PROCESS
========================================================= */

.engineering-process {
  position: relative;

  max-width: 1100px;

  margin: 0 auto;
}


/* ---------------------------------------------------------
   Process Item
--------------------------------------------------------- */

.process-item {
  position: relative;

  padding: 0 0 55px;

  margin-bottom: 10px;
}


.process-last {
  padding-bottom: 0;
}


/* ---------------------------------------------------------
   Number
--------------------------------------------------------- */

.process-number {
  position: absolute;

  left: 0;
  top: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 58px;
  height: 58px;

  color: #159BD3;

  background: #FFFFFF;

  border: 1px solid #DCE6ED;

  font-family: var(--heading-font);

  font-size: 14px;

  font-weight: 700;

  z-index: 3;

  transition:
    all .35s ease;
}


.process-item:hover .process-number {
  color: #FFFFFF;

  background: #159BD3;

  border-color: #159BD3;

  box-shadow:
    0 10px 25px rgba(21, 155, 211, .18);
}


/* ---------------------------------------------------------
   Connecting Line
--------------------------------------------------------- */

.process-line {
  position: absolute;

  left: 29px;

  top: 58px;

  bottom: 0;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      #159BD3,
      #DCE6ED
    );
}


.process-last::after {
  display: none;
}


/* ---------------------------------------------------------
   Content Area
--------------------------------------------------------- */

.process-item .row {
  padding-left: 100px;
}


.process-heading {
  padding-right: 35px;
}


.process-tag {
  display: block;

  margin-bottom: 10px;

  color: #159BD3;

  font-family: var(--heading-font);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.8px;
}


.process-heading h3 {
  margin: 0;

  color: #0B1F33;

  font-family: var(--heading-font);

  font-size: 26px;

  font-weight: 600;

  line-height: 1.25;
}


/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.process-content {
  position: relative;

  padding: 28px 30px;

  background: #FFFFFF;

  border: 1px solid #DCE6ED;

  transition:
    border-color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}


.process-item:hover .process-content {
  transform: translateX(5px);

  border-color: rgba(21, 155, 211, .45);

  box-shadow:
    0 15px 35px rgba(11, 31, 51, .07);
}


.process-content::before {
  content: "";

  position: absolute;

  left: -1px;
  top: 25px;

  width: 3px;
  height: 35px;

  background: #159BD3;

  transition:
    height .35s ease;
}


.process-item:hover .process-content::before {
  height: 60px;
}


.process-content p {
  margin: 0;

  color: #526170;

  font-family: var(--default-font);

  font-size: 14.5px;

  line-height: 1.8;
}


/* =========================================================
   OUR STRENGTH
========================================================= */

.our-strength-section {
  position: relative;

  margin-top: 110px;

  padding: 65px 70px;

  background: #0B1F33;

  overflow: hidden;
}


/* ---------------------------------------------------------
   Technical Grid
--------------------------------------------------------- */

.strength-grid {
  position: absolute;

  top: 0;
  right: 0;

  width: 45%;
  height: 100%;

  opacity: .45;

  background-image:
    linear-gradient(
      rgba(123, 210, 243, .06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(123, 210, 243, .06) 1px,
      transparent 1px
    );

  background-size: 28px 28px;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Strength Label
--------------------------------------------------------- */

.strength-label {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;

  color: #7BD2F3;

  font-family: var(--heading-font);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2px;
}


.strength-label::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #159BD3;
}


/* ---------------------------------------------------------
   Strength Title
--------------------------------------------------------- */

.strength-title {
  margin: 0;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 38px;

  font-weight: 700;

  line-height: 1.1;
}


/* ---------------------------------------------------------
   45+
--------------------------------------------------------- */

.strength-number {
  margin-top: 10px;

  color: #159BD3;

  font-family: var(--heading-font);

  font-size: 78px;

  font-weight: 700;

  line-height: 1;
}


/* ---------------------------------------------------------
   Strength Content
--------------------------------------------------------- */

.strength-content {
  position: relative;

  z-index: 2;
}


.strength-content h3 {
  max-width: 700px;

  margin: 0 0 20px;

  color: #FFFFFF;

  font-family: var(--heading-font);

  font-size: 23px;

  font-weight: 600;

  line-height: 1.4;
}


.strength-content p {
  max-width: 700px;

  margin: 0;

  color: #B8C7D3;

  font-family: var(--default-font);

  font-size: 14.5px;

  line-height: 1.8;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.strength-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  min-height: 52px;

  margin-top: 30px;

  padding: 0 23px;

  color: #FFFFFF;

  background: #159BD3;

  border: 1px solid #159BD3;

  font-family: var(--heading-font);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition:
    all .35s ease;
}


.strength-button span {
  font-size: 20px;

  line-height: 1;

  transition:
    transform .35s ease;
}


.strength-button:hover {
  color: #FFFFFF;

  background: transparent;

  border-color: #7BD2F3;
}


.strength-button:hover span {
  transform: translate(3px, -3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .concept-operations-section {
    padding: 90px 0;
  }

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

  .concept-header-line {
    justify-content: flex-start;

    margin-top: 25px;
  }

  .process-item .row {
    padding-left: 85px;
  }

  .process-heading {
    padding-right: 20px;

    margin-bottom: 20px;
  }

  .our-strength-section {
    margin-top: 80px;

    padding: 55px 45px;
  }

}


@media (max-width: 767px) {

  .concept-operations-section {
    padding: 70px 0;
  }

  .concept-title {
    font-size: 36px;

    letter-spacing: -.7px;
  }

  .process-item {
    padding-bottom: 40px;
  }

  .process-number {
    width: 48px;
    height: 48px;

    font-size: 12px;
  }

  .process-line {
    left: 24px;

    top: 48px;
  }

  .process-item .row {
    padding-left: 68px;
  }

  .process-heading {
    padding-right: 0;

    margin-bottom: 18px;
  }

  .process-heading h3 {
    font-size: 21px;
  }

  .process-content {
    padding: 23px 20px;
  }

  .process-content p {
    font-size: 14px;

    line-height: 1.75;
  }

  .our-strength-section {
    margin-top: 60px;

    padding: 45px 25px;
  }

  .strength-title {
    font-size: 31px;
  }

  .strength-number {
    font-size: 62px;
  }

  .strength-content {
    margin-top: 35px;
  }

  .strength-content h3 {
    font-size: 20px;
  }

}


@media (max-width: 480px) {

  .concept-title {
    font-size: 31px;
  }

  .process-item .row {
    padding-left: 60px;
  }

  .process-number {
    width: 43px;
    height: 43px;
  }

  .process-line {
    left: 21px;

    top: 43px;
  }

  .process-heading h3 {
    font-size: 19px;
  }

  .strength-button {
    width: 100%;
  }

}

/* =========================
    INDUSTRIES CSS
========================= */

.industries-section {
 position: relative;
 padding: 110px 0;
 background: #F5F9FC;
 overflow: hidden;
}

/* Technical Background */
.industries-section::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image:
   linear-gradient(rgba(11,31,51,0.035) 1px, transparent 1px),
   linear-gradient(90deg, rgba(11,31,51,0.035) 1px, transparent 1px);
 background-size: 55px 55px;
 pointer-events: none;
}

.industries-section .container {
 position: relative;
 z-index: 2;
}


/* Section Header */

.section-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 15px;

 font-family: "Sora", sans-serif;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 2px;
 color: #159BD3;
}

.section-eyebrow::before {
 content: "";
 width: 30px;
 height: 2px;
 background: #159BD3;
}

.section-title {
 margin: 0;
 color: #0B1F33;
 font-family: "Sora", sans-serif;
 font-size: clamp(30px, 4vw, 48px);
 font-weight: 700;
 line-height: 1.15;
}

.section-line {
 width: 65px;
 height: 3px;
 margin: 24px auto 0;
 background: #159BD3;
}


/* Industry Card */

.industry-card {
 position: relative;
 display: flex;
 min-height: 270px;

 background: #FFFFFF;
 border: 1px solid #DCE6ED;

 overflow: hidden;

 transition:
   transform 0.4s ease,
   box-shadow 0.4s ease,
   border-color 0.4s ease;
}

.industry-card:hover {
 transform: translateY(-7px);
 border-color: #159BD3;

 box-shadow:
   0 20px 45px rgba(11,31,51,0.12);
}


/* Image */

.industry-image {
 position: relative;
 width: 48%;
 min-height: 270px;
 overflow: hidden;
}

.industry-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;

 transition:
   transform 0.6s ease,
   filter 0.6s ease;
}

.industry-card:hover .industry-image img {
 transform: scale(1.07);
 filter: brightness(0.9);
}


/* Image Overlay */

.industry-image::after {
 content: "";
 position: absolute;
 inset: 0;

 background:
   linear-gradient(
     135deg,
     rgba(11,31,51,0.25),
     transparent 60%
   );
}


/* Number */

.industry-number {
 position: absolute;
 top: 18px;
 left: 18px;
 z-index: 3;

 display: flex;
 align-items: center;
 justify-content: center;

 width: 48px;
 height: 48px;

 background: #159BD3;
 color: #FFFFFF;

 font-family: "Sora", sans-serif;
 font-size: 13px;
 font-weight: 700;

 box-shadow: 0 8px 20px rgba(21,155,211,0.3);
 display: none !important;
}


/* Content */

.industry-content {
 position: relative;

 width: 52%;
 padding: 34px 30px 28px;

 display: flex;
 flex-direction: column;
 justify-content: center;
}

.industry-content::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;

 width: 3px;
 height: 0;

 background: #159BD3;

 transition: height 0.4s ease;
}

.industry-card:hover .industry-content::before {
 height: 100%;
}


.industry-content h3 {
 margin: 0 0 14px;

 color: #0B1F33;
 font-family: "Sora", sans-serif;
 font-size: 21px;
 font-weight: 700;
 line-height: 1.3;

 transition: color 0.3s ease;
}

.industry-card:hover .industry-content h3 {
 color: #159BD3;
}


.industry-content p {
 margin: 0;

 color: #526170;
 font-family: "Inter", sans-serif;
 font-size: 15px;
 line-height: 1.7;
}


/* Bottom Arrow */

.industry-arrow {
 display: flex;
 align-items: center;
 justify-content: space-between;

 margin-top: 25px;
 padding-top: 15px;

 border-top: 1px solid #E6EDF2;

 color: #159BD3;
}

.industry-arrow span {
 font-family: "Sora", sans-serif;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 1px;
 color: #91A1AE;
 display: none !important;
}

.industry-arrow i {
display: none !important;
 display: flex;
 align-items: center;
 justify-content: center;
    
 width: 34px;
 height: 34px;

 border: 1px solid #DCE6ED;

 color: #159BD3;

 transition:
   background 0.3s ease,
   color 0.3s ease,
   transform 0.3s ease;
}

.industry-card:hover .industry-arrow i {
 background: #159BD3;
 color: #FFFFFF;
 border-color: #159BD3;

 transform: translate(3px, -3px);
}


/* =========================
  TABLET
========================= */

@media (max-width: 991px) {

 .industries-section {
   padding: 85px 0;
 }

 .industry-card {
   min-height: 250px;
 }

 .industry-image {
   min-height: 250px;
 }

 .industry-content {
   padding: 28px 24px;
 }

 .industry-content h3 {
   font-size: 19px;
 }

}


/* =========================
  MOBILE
========================= */

@media (max-width: 575px) {

 .industries-section {
   padding: 70px 0;
 }

 .section-title {
   font-size: 30px;
 }

 .industry-card {
   display: block;
 }

 .industry-image {
   width: 100%;
   height: 220px;
   min-height: 220px;
 }

 .industry-content {
   width: 100%;
   padding: 25px 22px 24px;
 }

 .industry-content h3 {
   font-size: 19px;
 }

 .industry-content p {
   font-size: 14px;
 }

}

 /* =========================
CLIENTS CSS
=========================  */


.clients-section {
position: relative;
padding: 115px 0;

background: #FFFFFF;

overflow: hidden;
}


/* Technical Background */

.clients-section::before {
content: "";

position: absolute;
inset: 0;

background-image:
linear-gradient(
 rgba(11, 31, 51, 0.025) 1px,
 transparent 1px
),
linear-gradient(
 90deg,
 rgba(11, 31, 51, 0.025) 1px,
 transparent 1px
);

background-size: 60px 60px;

pointer-events: none;
}


/* Decorative Engineering Circle */

.clients-section::after {
content: "";

position: absolute;

width: 500px;
height: 500px;

right: -250px;
top: 120px;

border: 1px solid rgba(21, 155, 211, 0.08);
border-radius: 50%;

pointer-events: none;
}


.clients-section .container {
position: relative;
z-index: 2;
}


/* =========================
HEADER
========================= */

.clients-header {

display: flex;

justify-content: space-between;
align-items: flex-end;

margin-bottom: 55px;

padding-bottom: 28px;

border-bottom: 1px solid #DCE6ED;
}


.clients-heading {
max-width: 760px;
}


.clients-eyebrow {

display: inline-flex;
align-items: center;
gap: 10px;

margin-bottom: 16px;

color: #159BD3;

font-family: "Sora", sans-serif;

font-size: 12px;
font-weight: 700;

letter-spacing: 2px;
}


.clients-eyebrow::before {

content: "";

width: 32px;
height: 2px;

background: #159BD3;
}


.clients-heading h2 {

margin: 0;

color: #0B1F33;

font-family: "Sora", sans-serif;

font-size: clamp(30px, 4vw, 48px);

font-weight: 700;

line-height: 1.15;
}


/* Header Right */

.clients-intro {

min-width: 220px;

text-align: right;
}


.clients-label {

display: block;

margin-bottom: 12px;

color: #526170;

font-family: "Sora", sans-serif;

font-size: 11px;

font-weight: 700;

letter-spacing: 1.8px;
}


.clients-header-line {

width: 100%;
height: 3px;

background: #159BD3;
}



/* =========================
INFINITE CLIENT LOGO SLIDER
========================= */

.clients-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #DCE6ED;
  border-bottom: 1px solid #DCE6ED;
}

/* Track */

.clients-track {
  display: flex;
  width: max-content;
  animation: clientsInfiniteSlide 90s linear infinite;
  will-change: transform;
}

/* Pause on Hover */

.clients-slider:hover .clients-track {
  animation-play-state: paused;
}

/* Individual Logo Card */

.clients-track .client-logo-box {
  flex: 0 0 220px;
  width: 220px;
  height: 190px;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 35px;

  background: #FFFFFF;

  border-right: 1px solid #DCE6ED;
  border-bottom: none;

  overflow: hidden;

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

/* Top Engineering Accent */

.clients-track .client-logo-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 3px;

  background: #159BD3;

  transition: width 0.4s ease;
}

.clients-track .client-logo-box:hover::before {
  width: 100%;
}

/* Hover Card */

.clients-track .client-logo-box:hover {
  background: #F5F9FC;

  box-shadow:
    inset 0 0 0 1px rgba(21, 155, 211, 0.08);
}

/* Corner Detail */

.clients-track .client-logo-box::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;

  width: 35px;
  height: 35px;

  border-left: 1px solid #DCE6ED;
  border-top: 1px solid #DCE6ED;

  opacity: 0;

  transition: opacity 0.35s ease;
}

.clients-track .client-logo-box:hover::after {
  opacity: 1;
}

/* Client Logos */

.clients-track .client-logo-box img {
  display: block;

  width: auto;
  height: auto;

  max-width: 82%;
  max-height: 82px;

  object-fit: contain;

  /* filter: grayscale(100%); */
  /* opacity: 0.62; */

  transition:
    filter 0.4s ease,
    /* opacity 0.4s ease, */
    transform 0.4s ease;
}

/* Original Hover Effect */

.clients-track .client-logo-box:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

/* Client Number */

.clients-track .client-number {
  position: absolute;
  display: none;

  top: 12px;
  left: 14px;

  color: #A7B5C0;

  font-family: "Sora", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Seamless Infinite Animation */

@keyframes clientsInfiniteSlide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================
TABLET
========================= */

@media (max-width: 991px) {

  .clients-track .client-logo-box {
    flex-basis: 200px;
    width: 200px;
    height: 165px;
    padding: 25px;
  }

}

/* =========================
MOBILE
========================= */

@media (max-width: 767px) {

  .clients-track {
    animation-duration: 65s;
  }

  .clients-track .client-logo-box {
    flex-basis: 165px;
    width: 165px;
    height: 145px;
    padding: 20px;
  }

  .clients-track .client-logo-box img {
    max-width: 88%;
    max-height: 65px;
  }

}

/* =========================
SMALL MOBILE
========================= */

@media (max-width: 480px) {

  .clients-track .client-logo-box {
    flex-basis: 145px;
    width: 145px;
    height: 130px;
    padding: 15px;
  }

  .clients-track .client-logo-box img {
    max-width: 90%;
    max-height: 55px;
  }

}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  .clients-track {
    animation: none;
  }

}





/* =========================
BOTTOM TRUST STRIP
========================= */

.clients-bottom {

display: flex;

align-items: center;

gap: 25px;

margin-top: 50px;
}


.trust-line {

flex: 1;

height: 1px;

background: #DCE6ED;
}


.trust-content {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 15px;

color: #526170;

font-family: "Sora", sans-serif;

font-size: 10px;

font-weight: 700;

letter-spacing: 1.2px;

white-space: nowrap;
}


.trust-dot {

width: 4px;
height: 4px;

background: #159BD3;

border-radius: 50%;
}


/* =========================
LARGE TABLET
========================= */

@media (max-width: 1199px) {



}


/* =========================
TABLET
========================= */

@media (max-width: 991px) {

.clients-section {

padding: 90px 0;

}

.clients-header {

align-items: flex-start;

}

.clients-intro {

min-width: 160px;

}



}


/* =========================
MOBILE
========================= */

@media (max-width: 767px) {

.clients-section {

padding: 75px 0;

}

.clients-header {

display: block;

margin-bottom: 40px;

}

.clients-heading h2 {

font-size: 30px;

}

.clients-intro {

margin-top: 25px;

text-align: left;

min-width: auto;

}

.clients-header-line {

width: 65px;

}


.clients-bottom {

margin-top: 35px;

}

.trust-content {

font-size: 8px;

gap: 8px;

}

}


/* =========================
SMALL MOBILE
========================= */

@media (max-width: 480px) {

.clients-bottom {

display: none;

}

}


/* ===========================
  Contact section
  ============================ */


  :root {
    --background-color: #FFFFFF;
    --default-color: #526170;
    --heading-color: #0B1F33;
    --accent-color: #159BD3;
    --surface-color: #FFFFFF;
    --contrast-color: #FFFFFF;

    --deep-navy: #0B1F33;
    --navy-light: #132D45;
    --light-blue: #7BD2F3;
    --light-bg: #F5F9FC;
    --border-color: #DCE6ED;

    --default-font: "Inter", sans-serif;
    --heading-font: "Sora", sans-serif;
  }

  /* SECTION */

    .trimity-contact {
      padding: 100px 0 0;
      background: #FFFFFF;
      overflow: hidden;
    }

    /* HEADER */

    .contact-header {
      max-width: 850px;
      margin: 0 auto 60px;
      text-align: center;
    }

    .contact-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
      color: var(--accent-color);
      font-family: var(--heading-font);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .contact-eyebrow::before,
    .contact-eyebrow::after {
      content: "";
      width: 25px;
      height: 2px;
      background: var(--accent-color);
    }

    .contact-header h1 {
      margin: 0;
      font-family: var(--heading-font);
      font-size: clamp(32px, 4vw, 50px);
      line-height: 1.2;
      font-weight: 700;
      color: var(--heading-color);
    }

    .contact-header-line {
      width: 65px;
      height: 3px;
      margin: 25px auto 0;
      background: var(--accent-color);
    }

    /* MAIN LAYOUT */

    .contact-main {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      align-items: stretch;
      box-shadow: 0 20px 65px rgba(11,31,51,0.08);
    }

    /* LEFT PANEL */

    .contact-main .contact-info {
      position: relative;
      padding: 55px 45px;
      background: var(--deep-navy);
      color: #FFFFFF;
      overflow: hidden;
    }

    /* .contact-info::before {
      content: "";
      position: absolute;
      top: -120px;
      right: -120px;
      width: 340px;
      height: 340px;
      border: 1px solid rgba(123,210,243,0.14);
      border-radius: 50%;
      pointer-events: none;
    }

    .contact-info::after {
      content: "";
      position: absolute;
      top: -70px;
      right: -70px;
      width: 240px;
      height: 240px;
      border: 1px solid rgba(123,210,243,0.1);
      border-radius: 50%;
      pointer-events: none;
    } */

    .info-label {
      display: block;
      margin-bottom: 15px;
      color: var(--light-blue);
      font-family: var(--heading-font);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .contact-info h2 {
      position: relative;
      z-index: 1;
      max-width: 380px;
      margin: 0 0 38px;
      color: #FFFFFF;
      font-family: var(--heading-font);
      font-size: 29px;
      font-weight: 700;
      line-height: 1.35;
    }

    .info-item {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 24px 0;
      border-top: 1px solid rgba(255,255,255,0.13);
    }

    .info-icon {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(21,155,211,0.14);
      border: 1px solid rgba(123,210,243,0.22);
      color: var(--light-blue);
      font-size: 20px;
    }

    .info-text {
      min-width: 0;
    }

    .info-text h3 {
      margin: 0 0 9px;
      color: var(--light-blue);
      font-family: var(--heading-font);
      font-size: 14px;
      font-weight: 600;
    }

    .info-text p,
    .info-text a {
      margin: 0;
      color: #D1DFE8;
      font-size: 14px;
      line-height: 1.9;
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    .info-text a:hover {
      color: var(--light-blue);
    }

    .info-text .phone-separator {
      color: #7195AC;
      padding: 0 5px;
    }

    /* RIGHT FORM */

    .contact-form-panel {
      padding: 55px 50px;
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-left: 0;
    }

    .form-eyebrow {
      display: block;
      margin-bottom: 12px;
      color: var(--accent-color);
      font-family: var(--heading-font);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .contact-form-panel h2 {
      margin: 0 0 18px;
      color: var(--heading-color);
      font-family: var(--heading-font);
      font-size: clamp(24px, 2.5vw, 31px);
      font-weight: 700;
      line-height: 1.3;
    }

    .form-description {
      margin-bottom: 30px;
      color: var(--default-color);
      font-size: 15px;
      line-height: 1.8;
    }

    .contact-form .form-label {
      margin-bottom: 9px;
      color: var(--heading-color);
      font-family: var(--default-font);
      font-size: 13px;
      font-weight: 600;
    }

    .contact-form .form-control,
    .contact-form .form-select {
      min-height: 52px;
      padding: 13px 16px;
      border: 1px solid var(--border-color);
      border-radius: 2px;
      background: #F8FAFC;
      color: var(--heading-color);
      font-family: var(--default-font);
      font-size: 14px;
      box-shadow: none;
      transition: all 0.3s ease;
    }

    .contact-form .form-control:focus,
    .contact-form .form-select:focus {
      border-color: var(--accent-color);
      background: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(21,155,211,0.08);
    }

    .contact-form .form-control::placeholder {
      color: #9AA9B6;
    }

    .contact-form textarea.form-control {
      min-height: 145px;
      resize: vertical;
    }

    .contact-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      width: 100%;
      min-height: 56px;
      padding: 14px 24px;
      border: 1px solid var(--accent-color);
      border-radius: 2px;
      background: var(--accent-color);
      color: #FFFFFF;
      font-family: var(--heading-font);
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .contact-submit:hover {
      border-color: var(--deep-navy);
      background: var(--deep-navy);
      color: #FFFFFF;
    }

    .contact-submit i {
      font-size: 18px;
      transition: transform 0.3s ease;
    }

    .contact-submit:hover i {
      transform: translate(4px, -4px);
    }

    .form-note {
      margin: 14px 0 0;
      color: #8293A0;
      font-size: 12px;
      line-height: 1.6;
    }

    /* CTA BAR */

    .contact-cta-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 45px;
      border: 1px solid var(--border-color);
      background: var(--light-bg);
    }

    .contact-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 105px;
      padding: 25px 28px;
      color: var(--heading-color);
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .contact-cta + .contact-cta {
      border-left: 1px solid var(--border-color);
    }

    .contact-cta-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      background: #E5F5FB;
      color: var(--accent-color);
      font-size: 20px;
    }

    .contact-cta-text {
      flex: 1;
      font-family: var(--heading-font);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
    }

    .contact-cta-arrow {
      color: var(--accent-color);
      font-size: 18px;
    }

    .contact-cta:hover {
      background: var(--deep-navy);
      color: #FFFFFF;
    }

    .contact-cta:hover .contact-cta-icon {
      background: rgba(21,155,211,0.2);
      color: var(--light-blue);
    }

    /* MAP */

    .contact-map-section {
      margin-top: 95px;
      background: var(--light-bg);
    }

    .map-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      padding: 30px 0;
    }

    .map-header h2 {
      margin: 0 0 7px;
      color: var(--heading-color);
      font-family: var(--heading-font);
      font-size: 25px;
      font-weight: 700;
    }

    .map-header p {
      margin: 0;
      color: var(--default-color);
      font-size: 14px;
      line-height: 1.7;
    }

    .map-directions {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 13px 20px;
      border: 1px solid var(--accent-color);
      background: #FFFFFF;
      color: var(--accent-color);
      font-family: var(--heading-font);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .map-directions:hover {
      background: var(--accent-color);
      color: #FFFFFF;
    }

    .map-frame {
      width: 100%;
      height: 430px;
      overflow: hidden;
      background: #E8EEF2;
    }

    .map-frame iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* RESPONSIVE */

    @media (max-width: 991px) {
      .trimity-contact {
        padding-top: 75px;
      }

      .contact-main {
        grid-template-columns: 1fr;
      }

      .contact-info {
        padding: 45px 35px;
      }

      .contact-form-panel {
        padding: 45px 35px;
        border: 1px solid var(--border-color);
        border-top: 0;
      }

      .contact-cta-bar {
        grid-template-columns: 1fr;
      }

      .contact-cta + .contact-cta {
        border-left: 0;
        border-top: 1px solid var(--border-color);
      }

      .contact-map-section {
        margin-top: 75px;
      }
    }

    @media (max-width: 575px) {
      .contact-header {
        margin-bottom: 40px;
      }

      .contact-header h1 {
        font-size: 30px;
      }

      .contact-info,
      .contact-form-panel {
        padding: 35px 23px;
      }

      .contact-info h2 {
        font-size: 24px;
      }

      .info-item {
        gap: 13px;
      }

      .info-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
      }

      .contact-cta {
        min-height: 85px;
        padding: 20px;
      }

      .map-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .map-frame {
        height: 340px;
      }
    }


    /* <!-- =========================
FOOTER CSS
========================= --> */



.trimity-footer {

--footer-bg: #071A2A;
--footer-bg-light: #0B2439;
--footer-blue: #159BD3;
--footer-light-blue: #7BD2F3;
--footer-text: #AFC0CC;
--footer-muted: #718796;
--footer-border: rgba(255,255,255,0.11);

font-family: "Inter", sans-serif;

background: var(--footer-bg);

color: var(--footer-text);

}


/* =========================
CTA SECTION
========================= */

.footer-cta {

background: #159BD3;

position: relative;

overflow: hidden;
}


/* Engineering Corner */

.footer-cta::after {

content: "";

position: absolute;

width: 250px;
height: 250px;

right: -80px;
top: -120px;

border: 1px solid rgba(255,255,255,0.22);

border-radius: 50%;

}


.footer-cta-inner {

min-height: 150px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;

}


.footer-cta-label {

display: block;

margin-bottom: 8px;

color: rgba(255,255,255,0.72);

font-family: "Sora", sans-serif;

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;

}


.footer-cta h2 {

margin: 0;

color: #FFFFFF;

font-family: "Sora", sans-serif;

font-size: clamp(25px, 3vw, 38px);

font-weight: 700;

line-height: 1.2;

}


.footer-cta-btn {

position: relative;

z-index: 2;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 18px;

min-width: 220px;

padding: 16px 24px;

border: 1px solid rgba(255,255,255,0.7);

color: #FFFFFF;

font-family: "Sora", sans-serif;

font-size: 13px;

font-weight: 600;

text-decoration: none;

transition: all 0.3s ease;

}


.footer-cta-btn:hover {

background: #FFFFFF;

border-color: #FFFFFF;

color: #0B1F33;

}


.footer-cta-btn i {

transition: transform 0.3s ease;

}


.footer-cta-btn:hover i {

transform: translate(3px,-3px);

}


/* =========================
MAIN FOOTER
========================= */

.footer-main {

padding: 85px 0 55px;

background: var(--footer-bg);

position: relative;

overflow: hidden;

}


/* Subtle Engineering Lines */

.footer-main::before {

content: "";

position: absolute;

top: 0;
right: 7%;

width: 1px;
height: 100%;

background: rgba(123,210,243,0.06);

}


.footer-main::after {

content: "";

position: absolute;

top: 80px;
right: 5%;

width: 130px;
height: 130px;

border: 1px solid rgba(123,210,243,0.08);

border-radius: 50%;

}


/* COMPANY */

.footer-logo {

display: inline-block;

margin-bottom: 25px;

}


.footer-logo img {

display: block;

max-width: 190px;

max-height: 70px;

object-fit: contain;

}


.footer-description {

max-width: 440px;

margin: 0 0 23px;

color: var(--footer-text);

font-size: 14px;

line-height: 1.85;

}


.footer-more {

display: inline-flex;

align-items: center;

gap: 12px;

color: var(--footer-light-blue);

font-family: "Sora", sans-serif;

font-size: 12px;

font-weight: 600;

text-decoration: none;

}


.footer-more i {

transition: transform 0.3s ease;

}


.footer-more:hover {

color: #FFFFFF;

}


.footer-more:hover i {

transform: translateX(5px);

}


/* =========================
FOOTER COLUMNS
========================= */

.footer-column {

position: relative;

}


.footer-column-label {

display: block;

margin-bottom: 10px;

color: var(--footer-blue);

font-family: "Sora", sans-serif;

font-size: 9px;

font-weight: 700;

letter-spacing: 2px;

}


.footer-column h3 {

margin: 0 0 25px;

color: #FFFFFF;

font-family: "Sora", sans-serif;

font-size: 18px;

font-weight: 600;

}


/* LINKS */

.footer-links {

margin: 0;

padding: 0;

list-style: none;

}


.footer-links li {

margin-bottom: 13px;

}


.footer-links a {

display: flex;

align-items: center;

gap: 10px;

color: var(--footer-text);

font-size: 13px;

line-height: 1.5;

text-decoration: none;

transition: all 0.3s ease;

}


.footer-links a:hover {

color: var(--footer-light-blue);

transform: translateX(4px);

}


.footer-links a span {

color: #526D7D;

font-family: "Sora", sans-serif;

font-size: 8px;

min-width: 20px;

}


.footer-links a i {

color: var(--footer-blue);

font-size: 11px;

}


/* =========================
CONTACT
========================= */

.footer-contact-item {

display: flex;

align-items: flex-start;

gap: 13px;

margin-bottom: 23px;

}


.footer-contact-icon {

flex: 0 0 35px;

width: 35px;
height: 35px;

display: flex;

align-items: center;
justify-content: center;

border: 1px solid rgba(123,210,243,0.16);

color: var(--footer-light-blue);

background: rgba(21,155,211,0.08);

font-size: 14px;

}


.footer-contact-item span {

display: block;

margin-bottom: 5px;

color: #5F7B8C;

font-family: "Sora", sans-serif;

font-size: 8px;

font-weight: 700;

letter-spacing: 1.5px;

}


.footer-contact-item a {

display: block;

color: var(--footer-text);

font-size: 12px;

line-height: 1.7;

text-decoration: none;

transition: color 0.3s ease;

}


.footer-contact-item a:hover {

color: var(--footer-light-blue);

}


.footer-contact-item p {

margin: 0;

color: var(--footer-text);

font-size: 12px;

line-height: 1.75;

}


/* =========================
LARGE BRAND
========================= */

.footer-brand-line {

position: relative;

display: flex;

align-items: baseline;

justify-content: space-between;

margin-top: 70px;

padding-top: 35px;

border-top: 1px solid var(--footer-border);

overflow: hidden;

}


.brand-outline {

color: transparent;

-webkit-text-stroke: 1px rgba(255,255,255,0.12);

font-family: "Sora", sans-serif;

font-size: clamp(60px, 12vw, 155px);

font-weight: 700;

line-height: 0.8;

letter-spacing: -5px;

}


.brand-tagline {

color: var(--footer-blue);

font-family: "Sora", sans-serif;

font-size: 12px;

font-weight: 700;

letter-spacing: 3px;

}


/* =========================
BOTTOM BAR
========================= */

.footer-bottom {

background: #061522;

border-top: 1px solid rgba(255,255,255,0.07);

}


.footer-bottom-inner {

min-height: 75px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 25px;

}


.footer-copyright {

color: var(--footer-muted);

font-size: 11px;

line-height: 1.6;

}


.footer-developed {

color: var(--footer-muted);

font-size: 11px;

}


.footer-developed a {

margin-left: 4px;

color: var(--footer-light-blue);

font-weight: 600;

text-decoration: none;

transition: color 0.3s ease;

}


.footer-developed a:hover {

color: #FFFFFF;

}


/* =========================
SOCIAL
========================= */

.footer-social {

display: flex;

align-items: center;

gap: 8px;

}


.footer-social a {

width: 34px;
height: 34px;

display: flex;

align-items: center;
justify-content: center;

border: 1px solid rgba(255,255,255,0.1);

color: #8299A8;

font-size: 13px;

text-decoration: none;

transition: all 0.3s ease;

}


.footer-social a:hover {

border-color: var(--footer-blue);

background: var(--footer-blue);

color: #FFFFFF;

}


/* =========================
TABLET
========================= */

@media (max-width: 991px) {

.footer-cta-inner {

min-height: 170px;

}

.footer-main {

padding: 70px 0 45px;

}

.footer-brand-line {

margin-top: 50px;

}

.footer-bottom-inner {

flex-wrap: wrap;

padding: 20px 0;

}

}


/* =========================
MOBILE
========================= */

@media (max-width: 767px) {

.footer-cta-inner {

padding: 45px 0;

flex-direction: column;

align-items: flex-start;

gap: 25px;

}

.footer-cta-btn {

width: 100%;

}

.footer-main {

padding: 60px 0 35px;

}

.footer-brand-line {

display: block;

margin-top: 45px;

}

.brand-outline {

display: block;

font-size: 70px;

letter-spacing: -3px;

}

.brand-tagline {

display: block;

margin-top: 15px;

}

.footer-bottom-inner {

display: flex;

flex-direction: column;

align-items: flex-start;

gap: 15px;

padding: 22px 0;

}

.footer-social {

order: -1;

}

}


/* =========================
SMALL MOBILE
========================= */

@media (max-width: 480px) {

.footer-description {

font-size: 13px;

}

.brand-outline {

font-size: 58px;

}

}

/* <!-- =========================================
    BREADCRUMB CSS
========================================= --> */



/* =========================================
  MAIN SECTION
========================================= */

.trimity-breadcrumb {

 position: relative;

 width: 100%;
  padding-top: 100px;
 min-height: 310px;

 display: flex;

 align-items: center;

 overflow: hidden;

 background: #0B1F33;

}


/* =========================================
  BACKGROUND IMAGE
========================================= */

.breadcrumb-bg {

 position: absolute;

 inset: 0;

 background-image:
   url(../img/banner.webp);

 background-size: cover;

 background-position: center;

 transform: scale(1.03);

}


/* =========================================
  OVERLAY
========================================= */

.breadcrumb-overlay {

 position: absolute;

 inset: 0;

 background:

   linear-gradient(
     90deg,
     rgba(5,18,30,0.94) 0%,
     rgba(5,18,30,0.78) 45%,
     rgba(5,18,30,0.55) 100%
   );

}


/* =========================================
  BLUE ACCENT
========================================= */

.trimity-breadcrumb::before {

 content: "";

 position: absolute;

 z-index: 2;

 left: 0;

 bottom: 0;

 width: 35%;

 height: 3px;

 background: #159BD3;

}


/* =========================================
  CONTAINER
========================================= */

.trimity-breadcrumb .container {

 position: relative;

 z-index: 5;

 display: flex;

 align-items: center;

 justify-content: space-between;

 min-height: 310px;

}


/* =========================================
  CONTENT
========================================= */

.breadcrumb-content {

 padding-top: 15px;

}


/* =========================================
  LABEL
========================================= */

.breadcrumb-label {

 display: flex;

 align-items: center;

 gap: 12px;

 margin-bottom: 16px;

 color: #7BD2F3;

 font-family: "Sora", sans-serif;

 font-size: 10px;

 font-weight: 700;

 letter-spacing: 2px;

}


.breadcrumb-label span {

 display: block;

 width: 35px;

 height: 2px;

 background: #159BD3;

}


/* =========================================
  TITLE
========================================= */

.breadcrumb-content h1 {

 margin: 0 0 20px;

 color: #FFFFFF;

 font-family: "Sora", sans-serif;

 font-size: clamp(38px, 5vw, 62px);

 font-weight: 700;

 line-height: 1.1;

 letter-spacing: -1.5px;

}


/* =========================================
  BREADCRUMB
========================================= */

.breadcrumb-list {

 display: flex;

 align-items: center;

 flex-wrap: wrap;

 gap: 12px;

 margin: 0;

 padding: 0;

 list-style: none;

}


.breadcrumb-list li {

 color:
   rgba(255,255,255,0.55);

 font-family: "Inter", sans-serif;

 font-size: 13px;

}


.breadcrumb-list a {

 color: #FFFFFF;

 text-decoration: none;

 transition: color 0.3s ease;

}


.breadcrumb-list a:hover {

 color: #7BD2F3;

}


.breadcrumb-separator {

 color: #159BD3 !important;

 font-weight: 600;

}


.breadcrumb-list .active {

 color: #7BD2F3;

}


/* =========================================
  TECHNICAL NUMBER
========================================= */

.breadcrumb-number {

 display: flex;

 flex-direction: column;

 align-items: flex-end;

 gap: 10px;

 color: rgba(255,255,255,0.45);
 
 display:none !important;

}


.breadcrumb-number span {

 color: #7BD2F3;

 font-family: "Sora", sans-serif;

 font-size: 32px;

 font-weight: 700;

}


.breadcrumb-number div {

 width: 55px;

 height: 1px;

 background: #159BD3;

}


.breadcrumb-number small {

 color: rgba(255,255,255,0.45);

 font-family: "Sora", sans-serif;

 font-size: 12px;

 font-weight: 600;

 letter-spacing: 2px;
 
 display:none !important;

}





/* =========================================
  TABLET
========================================= */

@media (max-width: 991px) {

 .trimity-breadcrumb {

   min-height: 280px;

 }


 .trimity-breadcrumb .container {

   min-height: 280px;

 }


 .breadcrumb-number {

   margin-right: 15px;

 }

}


/* =========================================
  MOBILE
========================================= */

@media (max-width: 767px) {

 .trimity-breadcrumb {

   min-height: 250px;

 }


 .trimity-breadcrumb .container {

   min-height: 250px;

 }


 .breadcrumb-content h1 {

   font-size: 38px;

 }


 .breadcrumb-number {

   display: none;

 }


 .breadcrumb-label {

   font-size: 8px;

   letter-spacing: 1.5px;

 }


 .breadcrumb-list li {

   font-size: 12px;

 }


 .trimity-breadcrumb::after {

   right: -200px;

 }

}



/* =========================
FORM SUBMISSION STATUS
========================= */

.form-status {
  margin-top: 18px;
  padding: 14px 16px;

  border: 1px solid transparent;
  border-radius: 6px;

  font-size: 14px;
  line-height: 1.6;

  overflow-wrap: anywhere;
}

.form-status[hidden] {
  display: none !important;
}

.form-status-loading {
  color: #0B1F33;
  background: #F5F9FC;
  border-color: #DCE6ED;
}

.form-status-success {
  color: #166534;
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.form-status-error {
  color: #B91C1C;
  background: #FEF2F2;
  border-color: #FECACA;
}

.contact-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}



.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 3px;
  font-family: var(--default-font);
  font-size: 14px;
  line-height: 1.6;
}

.form-status[hidden] {
  display: none !important;
}

.form-status.is-success {
  color: #176B37;
  background: #EAF8EF;
  border: 1px solid #B8E3C5;
}

.form-status.is-error {
  color: #B42318;
  background: #FFF0F0;
  border: 1px solid #F2C4C4;
}





/* =========================
PREMIUM WHATSAPP FLOATING BUTTON
========================= */

.whatsapp-float {
  position: fixed;
  left: 26px;
  bottom: 26px;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 55px;
  height: 55px;

  color: #FFFFFF;
  background: linear-gradient(145deg, #25D366, #128C7E);

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;

  box-shadow:
    0 8px 24px rgba(18, 140, 126, 0.25),
    0 2px 6px rgba(11, 31, 51, 0.12);

  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/* WhatsApp Icon */

.whatsapp-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.whatsapp-icon svg {
  display: block;

  width: 31px;
  height: 31px;

  color: #FFFFFF;

  transition: transform 0.3s ease;
}

/* Premium Hover */

.whatsapp-float:hover {
  color: #FFFFFF;

  transform: translateY(-4px);

  box-shadow:
    0 14px 32px rgba(18, 140, 126, 0.35),
    0 4px 10px rgba(11, 31, 51, 0.12);
}

.whatsapp-float:hover .whatsapp-icon svg {
  transform: scale(1.08);
}

/* Keyboard Accessibility */

.whatsapp-float:focus-visible {
  outline: 3px solid #159BD3;
  outline-offset: 5px;
}

/* Tooltip */

.whatsapp-tooltip {
  position: absolute;

  left: 76px;
  top: 50%;

  transform: translate(-6px, -50%);

  padding: 11px 16px;

  color: #FFFFFF;
  background: #0B1F33;

  font-family: "Sora", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;

  white-space: nowrap;

  border-radius: 5px;

  box-shadow: 0 6px 18px rgba(11, 31, 51, 0.14);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

/* Tooltip Arrow */

.whatsapp-tooltip::before {
  content: "";

  position: absolute;

  left: -5px;
  top: 50%;

  width: 10px;
  height: 10px;

  background: #0B1F33;

  transform: translateY(-50%) rotate(45deg);
}

/* Show Tooltip */

.whatsapp-float:hover .whatsapp-tooltip,
.whatsapp-float:focus-visible .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;

  transform: translate(0, -50%);
}

/* Subtle Pulse */

.whatsapp-float::after {
  content: "";

  position: absolute;
  inset: -5px;

  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: 50%;

  animation: whatsappPulse 2.4s ease-out infinite;

  pointer-events: none;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* =========================
TABLET
========================= */

@media (max-width: 991px) {

  .whatsapp-float {
    left: 22px;
    bottom: 22px;

    width: 58px;
    height: 58px;
  }

}

/* =========================
MOBILE
========================= */

@media (max-width: 767px) {

  .whatsapp-float {
    left: 16px;
    bottom: 18px;

    width: 54px;
    height: 54px;
  }

  .whatsapp-icon svg {
    width: 28px;
    height: 28px;
  }

  .whatsapp-tooltip {
    display: none;
  }

}

/* Small Mobile */

@media (max-width: 380px) {

  .whatsapp-float {
    left: 12px;
    bottom: 14px;

    width: 50px;
    height: 50px;
  }

  .whatsapp-icon svg {
    width: 26px;
    height: 26px;
  }

}

/* Respect Reduced Motion */

@media (prefers-reduced-motion: reduce) {

  .whatsapp-float,
  .whatsapp-icon svg,
  .whatsapp-tooltip {
    transition: none;
  }

  .whatsapp-float::after {
    animation: none;
  }

}