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

:root{
  --red:#c0242c;
  --red-bright:#d81f2a;
  --navy:#0a1628;
  --white:#ffffff;
  --transition:0.28s cubic-bezier(.4,0,.2,1);
}

body{
  font-family:'Segoe UI','Arial',Helvetica,sans-serif;
}

img{ max-width:100%; display:block; }

/* =========================================================
   SERVICES HERO — PREMIUM CORPORATE DESIGN
========================================================= */

.services-hero {
  --service-red: #c1272d;
  --service-navy: #101d35;
  --service-white: #ffffff;

  position: relative;
  width: 100%;
  min-height: 760px;

  display: flex;
  align-items: center;

  overflow: hidden;
  isolation: isolate;

  background: #0a1425;
}

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

.services-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.services-hero .hero-img {
  --service-image-x: 0px;
  --service-image-y: 0px;

  width: 100%;
  height: 112%;

  position: absolute;
  top: -6%;
  left: 0;

  display: block;
  object-fit: cover;
  object-position: center 42%;

  transform:
    translate3d(
      var(--service-image-x),
      var(--service-image-y),
      0
    )
    scale(1.1);

  filter:
    contrast(1.08)
    saturate(0.92)
    brightness(0.88);

  will-change: transform;

  animation:
    servicesImageEntrance 2s
    cubic-bezier(.16, 1, .3, 1) forwards;

  transition:
    filter 0.8s ease;
}

.services-hero:hover .hero-img {
  filter:
    contrast(1.1)
    saturate(1.02)
    brightness(0.92);
}

@keyframes servicesImageEntrance {
  from {
    transform:
      translate3d(0, 20px, 0)
      scale(1.18);

    filter:
      contrast(1)
      saturate(0.65)
      brightness(0.65);
  }

  to {
    transform:
      translate3d(
        var(--service-image-x),
        var(--service-image-y),
        0
      )
      scale(1.1);

    filter:
      contrast(1.08)
      saturate(0.92)
      brightness(0.88);
  }
}

/* =========================================================
   PREMIUM OVERLAY
========================================================= */

.services-hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(5, 12, 25, 0.96) 0%,
      rgba(7, 16, 31, 0.91) 30%,
      rgba(7, 16, 31, 0.67) 53%,
      rgba(7, 16, 31, 0.24) 75%,
      rgba(7, 16, 31, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 10, 20, 0.18),
      rgba(4, 10, 20, 0.10) 58%,
      rgba(4, 10, 20, 0.56)
    );
}

/* Fine industrial grid */
.services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  mask-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8),
      transparent 72%
    );

  animation: servicesGridMove 18s linear infinite;
}

@keyframes servicesGridMove {
  to {
    background-position: 72px 72px;
  }
}

/* Cinematic moving light */
.services-hero::after {
  content: "";
  position: absolute;

  top: -50%;
  left: -40%;

  width: 40%;
  height: 200%;

  z-index: 3;
  pointer-events: none;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255, 255, 255, 0.14),
      transparent
    );

  transform: rotate(12deg);
  filter: blur(16px);

  animation: servicesLightSweep 8s ease-in-out infinite;
}

@keyframes servicesLightSweep {
  0%,
  20% {
    left: -45%;
    opacity: 0;
  }

  40% {
    opacity: 0.65;
  }

  75%,
  100% {
    left: 125%;
    opacity: 0;
  }
}

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

.services-hero .hero-content {
  position: relative;
  z-index: 5;

  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;

  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}

/* Glass content panel */
.services-hero .hero-content::before {
  content: "";
  position: absolute;

  top: 50%;
  left: -42px;

  width: min(630px, 52vw);
  height: 520px;

  transform: translateY(-50%);

  z-index: -1;

  border-radius: 4px 30px 30px 4px;

  background:
    linear-gradient(
      135deg,
      rgba(8, 18, 35, 0.82),
      rgba(15, 29, 52, 0.48)
    );

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

  border-left:
    4px solid var(--service-red);

  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(9px);
}

/* =========================================================
   BREADCRUMB — SAME LEFT ALIGNMENT
========================================================= */

.services-hero .breadcrumb {
  position: relative;

  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 32px;
  padding: 0;

  opacity: 0;
  transform: translateX(-35px);

  animation:
    servicesBreadcrumbIn 0.8s 0.25s
    cubic-bezier(.16, 1, .3, 1) forwards;
}

.services-hero .home-ico {
  width: 38px;
  height: 38px;

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

  color: #ffffff;

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

  border-radius: 50%;

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

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

.services-hero .home-ico svg {
  width: 18px;
  height: 18px;
}

.services-hero .home-ico:hover {
  color: #ffffff;
  background: var(--service-red);
  border-color: var(--service-red);

  transform:
    translateY(-3px)
    rotate(-5deg);

  box-shadow:
    0 10px 25px rgba(193, 39, 45, 0.38);
}

.services-hero .divider {
  width: 1px;
  height: 22px;

  background:
    rgba(255, 255, 255, 0.36);
}

.services-hero .crumb-text {
  color:
    rgba(255, 255, 255, 0.88);

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;

  text-transform: uppercase;
}

@keyframes servicesBreadcrumbIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.services-hero .hero-heading {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin: 0 0 28px;
  padding: 0;

  line-height: 0.88;
  text-align: left;
}

.services-hero .hero-heading .line {
  position: relative;
  display: block;

  color: #ffffff;

  font-size:
    clamp(58px, 6vw, 92px);

  font-weight: 900;
  line-height: 0.92;

  letter-spacing: -2px;
  text-transform: uppercase;

  opacity: 0;

  transform:
    translateY(60px)
    rotateX(18deg);

  filter: blur(10px);

  transform-origin: bottom;

  animation:
    servicesTitleReveal 1.05s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}

.services-hero .hero-heading .line:first-child {
  color: rgba(255, 255, 255, 0.97);
  animation-delay: 0.45s;
}

.services-hero .hero-heading .line:last-child {
  color: var(--service-red);
  animation-delay: 0.62s;

  text-shadow:
    0 10px 40px
    rgba(193, 39, 45, 0.22);
}

/* Animated underline */
.services-hero .hero-heading::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: -18px;

  width: 0;
  height: 4px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      var(--service-red),
      #f04c57,
      transparent
    );

  box-shadow:
    0 0 18px rgba(193, 39, 45, 0.40);

  animation:
    servicesHeadingLine 1.1s 1.2s
    cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes servicesTitleReveal {
  to {
    opacity: 1;

    transform:
      translateY(0)
      rotateX(0);

    filter: blur(0);
  }
}

@keyframes servicesHeadingLine {
  to {
    width: 170px;
  }
}

/* =========================================================
   TAGLINE
========================================================= */

.services-hero .hero-tagline {
  position: relative;

  margin: 24px 0 0;
  padding-left: 20px;

  max-width: 500px;

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

  font-size:
    clamp(18px, 1.8vw, 23px);

  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.4px;

  opacity: 0;
  transform: translateY(30px);

  animation:
    servicesTaglineIn 0.85s 0.95s
    ease forwards;
}

/* Vertical accent ensures same alignment */
.services-hero .hero-tagline::before {
  content: "";
  position: absolute;

  left: 0;
  top: 3px;

  width: 3px;
  height: 0;

  border-radius: 10px;

  background: var(--service-red);

  animation:
    servicesTaglineBar 0.8s 1.25s
    ease forwards;
}

@keyframes servicesTaglineIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes servicesTaglineBar {
  to {
    height: calc(100% - 6px);
  }
}

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

.services-scroll-indicator {
  position: absolute;
  left: 0;
  top: 350px;

  display: flex;
  align-items: center;
  gap: 13px;

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

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;

  opacity: 0;

  animation:
    servicesScrollReveal 0.8s 1.4s
    ease forwards;
}

.services-scroll-line {
  position: relative;

  width: 54px;
  height: 1px;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.22);
}

.services-scroll-line::after {
  content: "";
  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 100%;

  background: var(--service-red);

  animation:
    servicesScrollLine 2s
    ease-in-out infinite;
}

@keyframes servicesScrollReveal {
  to {
    opacity: 1;
  }
}

@keyframes servicesScrollLine {
  0% {
    left: -100%;
  }

  60%,
  100% {
    left: 100%;
  }
}

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

@media (max-width: 1024px) {
  .services-hero {
    min-height: 680px;
  }

  .services-hero .hero-content {
    width:
      min(100% - 60px, 1200px);
  }
  

  .services-hero .hero-heading .line {
    font-size:
      clamp(46px, 14vw, 66px);

    letter-spacing: -1px;
  }

  .services-hero .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5, 12, 25, 0.96),
        rgba(5, 12, 25, 0.78)
      );
  }

  .services-hero .hero-img {
    object-position: 60% center;
  }

  .services-scroll-indicator {
    position: relative;
    top: auto;
    margin-top: 45px;
  }
}

@media (max-width: 420px) {
  .services-hero {
    min-height: 570px;
  }

  .services-hero .breadcrumb {
    margin-bottom: 25px;
  }

  .services-hero .hero-tagline {
    font-size: 16px;
  }

  .services-hero .hero-content::before {
    height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-hero *,
  .services-hero::before,
  .services-hero::after {
    animation: none !important;
    transition: none !important;
  }

  .services-hero .breadcrumb,
  .services-hero .hero-heading .line,
  .services-hero .hero-tagline,
  .services-scroll-indicator {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =========================================================
   CORE SERVICES — PREMIUM ALTERNATING LAYOUT
========================================================= */

.core-services-premium {
  --cs-red: #c1272d;
  --cs-red-dark: #921a20;
  --cs-navy: #14213d;
  --cs-dark: #0b1629;
  --cs-muted: #596171;
  --cs-light: #f3f5f8;
  --cs-white: #ffffff;

  position: relative;
  padding: 95px 40px 110px;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 5% 20%,
      rgba(193, 39, 45, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 75%,
      rgba(20, 33, 61, 0.08),
      transparent 30%
    ),
    #f4f6f8;
}

/* Subtle industrial grid */
.core-services-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(20, 33, 61, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(20, 33, 61, 0.035) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}

/* Moving spotlight */
.core-services-premium::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;

  width: 38%;
  height: 180%;

  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.75),
      transparent
    );

  filter: blur(24px);
  transform: rotate(10deg);

  animation: coreServicesSpotlight 10s ease-in-out infinite;
}

@keyframes coreServicesSpotlight {
  0%,
  15% {
    left: -35%;
    opacity: 0;
  }

  40% {
    opacity: 0.55;
  }

  80%,
  100% {
    left: 125%;
    opacity: 0;
  }
}

.core-services-container {
  width: min(1420px, 100%);
  margin: 0 auto;
}

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

.core-services-header {
  max-width: 850px;
  margin: 0 auto 65px;
  text-align: center;
}

.core-services-header > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(7px);
}

.core-services-header.core-services-visible > * {
  animation: coreServicesHeaderReveal 0.8s ease forwards;
}

.core-services-header.core-services-visible
.core-services-header-line {
  animation:
    coreServicesHeaderReveal 0.7s 0.1s ease forwards,
    coreServicesLineGrow 0.9s 0.35s ease forwards;
}

.core-services-header.core-services-visible
.core-services-heading {
  animation:
    coreServicesHeaderReveal 0.9s 0.22s
    cubic-bezier(.16, 1, .3, 1) forwards;
}

.core-services-header.core-services-visible
.core-services-description {
  animation:
    coreServicesHeaderReveal 0.8s 0.48s ease forwards;
}

.core-services-eyebrow {
  color: var(--cs-red);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2.4px;
}

.core-services-header-line {
  display: block;
  width: 0;
  height: 3px;
  margin: 11px auto 22px;

  border-radius: 20px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cs-red),
      transparent
    );
}

.core-services-heading {
  margin-bottom: 18px;

  color: var(--cs-navy);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -1.5px;
  text-transform: uppercase;
}

.core-services-heading span,
.core-services-heading strong {
  display: block;
}

.core-services-heading strong {
  color: var(--cs-red);
  font-weight: inherit;
}

.core-services-description {
  max-width: 700px;
  margin: 0 auto;

  color: var(--cs-muted);
  font-size: 16px;
  line-height: 1.75;
}

@keyframes coreServicesHeaderReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes coreServicesLineGrow {
  to {
    width: 74px;
  }
}

/* =========================================================
   SERVICES LIST
========================================================= */

.core-services-list {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.core-service-item {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, 0.82fr);

  min-height: 475px;
  overflow: hidden;

  border-radius: 24px;

  background: var(--cs-white);

  border:
    1px solid rgba(20, 33, 61, 0.08);

  box-shadow:
    0 28px 70px rgba(20, 33, 61, 0.11);

  opacity: 0;

  transform:
    translateY(70px)
    scale(0.96);

  transition:
    opacity 0.9s ease,
    transform 1s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.55s ease;
}

.core-service-item.core-service-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

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

  box-shadow:
    0 40px 95px rgba(20, 33, 61, 0.17),
    0 12px 35px rgba(193, 39, 45, 0.07);
}

.core-service-reverse {
  grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1.18fr);
}

.core-service-reverse .core-service-image {
  grid-column: 2;
  grid-row: 1;
}

.core-service-reverse .core-service-content {
  grid-column: 1;
  grid-row: 1;
}

/* =========================================================
   LARGE IMAGE
========================================================= */

.core-service-image {
  position: relative;
  min-height: 475px;
  overflow: hidden;
  background: var(--cs-dark);
}

.core-service-image img {
  --service-image-x: 0px;
  --service-image-y: 0px;

  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  display: block;
  object-fit: cover;

  transform:
    scale(1.13)
    translate3d(
      var(--service-image-x),
      var(--service-image-y),
      0
    );

  filter:
    saturate(0.86)
    contrast(1.08);

  transition:
    transform 1.1s cubic-bezier(.16, 1, .3, 1),
    filter 0.65s ease;
}

.core-service-item:hover .core-service-image img {
  transform:
    scale(1.22)
    translate3d(
      var(--service-image-x),
      var(--service-image-y),
      0
    );

  filter:
    saturate(1.06)
    contrast(1.1);
}

.core-service-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(6, 14, 28, 0.08),
      transparent 48%,
      rgba(6, 14, 28, 0.75)
    ),
    linear-gradient(
      110deg,
      rgba(6, 14, 28, 0.18),
      transparent 50%
    );
}

/* Image reveal curtain */
.core-service-image::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 8;

  background:
    linear-gradient(
      135deg,
      var(--cs-navy),
      #23365b
    );

  transform: scaleX(1);
  transform-origin: right center;

  transition:
    transform 1.15s
    cubic-bezier(.76, 0, .24, 1);
}

.core-service-reverse .core-service-image::before {
  transform-origin: left center;
}

.core-service-visible .core-service-image::before {
  transform: scaleX(0);
}

/* Red reveal line */
.core-service-image::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;

  width: 5px;

  z-index: 9;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--cs-red) 20%,
      var(--cs-red) 80%,
      transparent
    );

  transform: translateX(0);

  transition:
    transform 1.15s
    cubic-bezier(.76, 0, .24, 1);
}

.core-service-reverse .core-service-image::after {
  right: auto;
  left: 0;
}

.core-service-visible .core-service-image::after {
  transform: translateX(600px);
}

.core-service-reverse.core-service-visible
.core-service-image::after {
  transform: translateX(-600px);
}

/* Image shine */
.core-service-image-shine {
  position: absolute;
  top: -15%;
  left: -90%;

  width: 38%;
  height: 140%;

  z-index: 5;
  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.55),
      transparent
    );

  transform: skewX(-18deg);
}

.core-service-visible .core-service-image-shine {
  animation:
    coreServiceImageShine 1.35s 0.75s ease forwards;
}

@keyframes coreServiceImageShine {
  to {
    left: 150%;
  }
}

.core-service-image-label {
  position: absolute;
  left: 34px;
  bottom: 30px;

  z-index: 6;

  padding-left: 45px;

  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.core-service-image-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;

  width: 32px;
  height: 2px;

  transform: translateY(-50%);
  background: var(--cs-red);
}

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

.core-service-content {
  position: relative;

  padding: 64px 62px 55px;

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

  overflow: hidden;
}

/* Large faint service number */
.core-service-number {
  position: absolute;
  top: 18px;
  right: 28px;

  color: rgba(20, 33, 61, 0.055);

  font-size: 115px;
  font-weight: 900;
  line-height: 1;

  pointer-events: none;

  transform:
    translateY(25px)
    scale(0.9);

  opacity: 0;

  transition:
    opacity 0.9s 0.45s ease,
    transform 1s 0.45s
    cubic-bezier(.16, 1, .3, 1);
}

.core-service-reverse .core-service-number {
  right: auto;
  left: 28px;
}

.core-service-visible .core-service-number {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

/* Square angled icon – no circle or hexagon */
.core-service-icon {
  width: 64px;
  height: 64px;

  margin-bottom: 23px;

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

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #e03843,
      var(--cs-red),
      var(--cs-red-dark)
    );

  clip-path:
    polygon(
      12% 0,
      100% 0,
      88% 100%,
      0 100%
    );

  box-shadow:
    0 14px 30px
    rgba(193, 39, 45, 0.28);

  opacity: 0;

  transform:
    translateY(25px)
    rotate(-8deg);

  transition:
    opacity 0.7s 0.25s ease,
    transform 0.8s 0.25s
    cubic-bezier(.16, 1, .3, 1);
}

.core-service-visible .core-service-icon {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.core-service-icon svg {
  width: 29px;
  height: 29px;

  transition:
    transform 0.55s
    cubic-bezier(.16, 1, .3, 1);
}

.core-service-item:hover .core-service-icon svg {
  transform:
    translateX(4px)
    rotate(-5deg)
    scale(1.08);
}

.core-service-label {
  margin-bottom: 9px;

  color: var(--cs-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;

  opacity: 0;
  transform: translateY(22px);

  transition:
    opacity 0.7s 0.35s ease,
    transform 0.8s 0.35s ease;
}

.core-service-content h3 {
  position: relative;

  max-width: 500px;
  margin-bottom: 20px;

  color: var(--cs-navy);
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 850;
  line-height: 1.14;
  letter-spacing: -0.8px;

  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.75s 0.43s ease,
    transform 0.85s 0.43s
    cubic-bezier(.16, 1, .3, 1);
}

.core-service-content h3::after {
  content: "";
  display: block;

  width: 0;
  height: 3px;

  margin-top: 17px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      var(--cs-red),
      transparent
    );

  transition:
    width 0.85s 0.65s ease;
}

.core-service-visible
.core-service-content h3::after {
  width: 85px;
}

.core-service-copy {
  max-width: 540px;
  margin-bottom: 23px;

  color: var(--cs-muted);
  font-size: 15.5px;
  line-height: 1.78;

  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.75s 0.52s ease,
    transform 0.85s 0.52s ease;
}

.core-service-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;

  margin-bottom: 28px;

  opacity: 0;
  transform: translateY(22px);

  transition:
    opacity 0.75s 0.62s ease,
    transform 0.85s 0.62s ease;
}

.core-service-benefits span {
  position: relative;

  padding:
    8px 13px
    8px 28px;

  border-radius: 4px;

  color: #495264;
  font-size: 12px;
  font-weight: 700;

  background: #f0f2f5;

  border:
    1px solid rgba(20, 33, 61, 0.07);
}

.core-service-benefits span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;

  width: 7px;
  height: 7px;

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

  background: var(--cs-red);
}

.core-service-link {
  position: relative;

  width: fit-content;

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

  color: var(--cs-navy);

  font-size: 13px;
  font-weight: 850;
  letter-spacing: 1px;
  text-transform: uppercase;

  opacity: 0;
  transform: translateY(20px);

  transition:
    color 0.35s ease,
    opacity 0.75s 0.72s ease,
    transform 0.85s 0.72s ease;
}

.core-service-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;

  width: 0;
  height: 2px;

  background: var(--cs-red);

  transition:
    width 0.45s ease;
}

.core-service-link svg {
  width: 18px;
  height: 18px;

  color: var(--cs-red);

  transition:
    transform 0.4s
    cubic-bezier(.16, 1, .3, 1);
}

.core-service-link:hover {
  color: var(--cs-red);
}

.core-service-link:hover::after {
  width: 100%;
}

.core-service-link:hover svg {
  transform: translateX(7px);
}

/* Reveal all content */
.core-service-visible .core-service-label,
.core-service-visible .core-service-content h3,
.core-service-visible .core-service-copy,
.core-service-visible .core-service-benefits,
.core-service-visible .core-service-link {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative red edge */
.core-service-content::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;

  width: 3px;

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--cs-red),
      transparent
    );

  transform: scaleY(0);
  transform-origin: top;

  transition:
    transform 1s 0.7s ease;
}

.core-service-reverse
.core-service-content::after {
  right: auto;
  left: 0;
}

.core-service-visible
.core-service-content::after {
  transform: scaleY(1);
}

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

@media (max-width: 1100px) {
  .core-service-item,
  .core-service-reverse {
    grid-template-columns: 1fr;
  }

  .core-service-image,
  .core-service-reverse .core-service-image {
    grid-column: 1;
    grid-row: 1;

    min-height: 420px;
  }

  .core-service-content,
  .core-service-reverse .core-service-content {
    grid-column: 1;
    grid-row: 2;

    padding: 52px 45px;
  }

  .core-service-content::after,
  .core-service-reverse
  .core-service-content::after {
    left: 10%;
    right: 10%;
    top: 0;
    bottom: auto;

    width: auto;
    height: 3px;

    transform: scaleX(0);
    transform-origin: left;
  }

  .core-service-visible
  .core-service-content::after {
    transform: scaleX(1);
  }
}

@media (max-width: 700px) {
  .core-services-premium {
    padding: 70px 18px 80px;
  }

  .core-services-header {
    margin-bottom: 45px;
  }

  .core-services-list {
    gap: 25px;
  }

  .core-service-item {
    min-height: auto;
    border-radius: 17px;
  }

  .core-service-image,
  .core-service-reverse .core-service-image {
    min-height: 285px;
  }

  .core-service-content,
  .core-service-reverse .core-service-content {
    padding: 42px 25px 38px;
  }

  .core-service-number {
    top: 12px;
    right: 15px;

    font-size: 75px;
  }

  .core-service-reverse
  .core-service-number {
    left: auto;
    right: 15px;
  }

  .core-service-icon {
    width: 56px;
    height: 56px;
  }

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

  .core-service-copy {
    font-size: 14px;
  }

  .core-service-image-label {
    left: 22px;
    bottom: 22px;

    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-services-premium *,
  .core-services-premium *::before,
  .core-services-premium *::after {
    animation: none !important;
    transition: none !important;
  }

  .core-services-header > *,
  .core-service-item,
  .core-service-content > *,
  .core-service-number,
  .core-service-icon {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .core-service-image::before,
  .core-service-image::after {
    display: none !important;
  }
}







/* ================= OUR SERVICES ================= */
.services {
  background-color: #f1f1f1;
  padding: 90px 40px 100px;
}

.services-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.services-header {
  text-align: center;
  margin-bottom: 55px;
}

.services-eyebrow {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.services-underline-top {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 10px auto 26px;
}

.services-heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
  line-height: 1.25;
}

.services-heading .brand-red {
  color: var(--brand-red);
}

.services-desc {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

.services-underline {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-red);
  margin: 20px auto 0;
}

/* Grid of cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--brand-navy);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

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

.service-img {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

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

.service-card:hover .service-img img {
  transform: scale(1.08);
}

.service-body {
  position: relative;
  padding: 40px 28px 30px;
  color: #ffffff;
}

.service-icon {
  position: absolute;
  top: -30px;
  left: 28px;
  width: 60px;
  height: 60px;
  background-color: var(--brand-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(193,39,45,0.4);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-title {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 10px;
  margin-top: 6px;
}

.service-text {
  font-size: 14.5px;
  color: #d6d9e2;
  line-height: 1.6;
  margin-bottom: 22px;
}

.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: #ffffff;
}

.service-list .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-red);
  color: var(--brand-red);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-heading {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .services {
    padding: 70px 20px 80px;
  }
  .service-body {
    padding: 40px 22px 26px;
  }
}
/* =========================================
   SERVICES HERO — CLEAN NO-CARD LAYOUT
========================================= */

.services-hero .hero-content {
  position: relative;
  z-index: 5;

  width: min(1440px, calc(100% - 100px));
  margin: 0 auto;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}

/* remove old glass card */
.services-hero .hero-content::before,
.services-hero .hero-content::after {
  display: none !important;
}

/* compact breadcrumb */
.services-hero .breadcrumb {
  margin-bottom: 34px;
}

/* heading */
.services-hero .hero-heading {
  margin: 0 0 26px;
  max-width: 620px;
  line-height: 0.9;
}

.services-hero .hero-heading .line {
  font-size: clamp(58px, 6vw, 92px);
  font-weight: 900;
  letter-spacing: -2px;
}

.services-hero .hero-heading .line:first-child {
  color: #ffffff;
}

.services-hero .hero-heading .line:last-child {
  color: var(--service-red);
}

/* clean underline */
.services-hero .hero-heading::after {
  bottom: -14px;
  height: 3px;
  width: 0;
}

/* tagline */
.services-hero .hero-tagline {
  margin-top: 24px;
  padding-left: 18px;

  max-width: 520px;

  color: rgba(255, 255, 255, 0.88);
  font-size: 22px;
  line-height: 1.45;
}

/* stronger left image readability */
.services-hero .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 12, 25, 0.94) 0%,
      rgba(5, 12, 25, 0.82) 26%,
      rgba(5, 12, 25, 0.48) 48%,
      rgba(5, 12, 25, 0.16) 72%,
      rgba(5, 12, 25, 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 10, 20, 0.10),
      rgba(4, 10, 20, 0.18),
      rgba(4, 10, 20, 0.40)
    );
}

/* subtle red vertical accent */
.services-hero .hero-content {
  padding-left: 30px;
}

.services-hero .hero-content::before {
  content: "";
  display: block !important;

  position: absolute;
  left: 0;
  top: 50%;

  width: 4px;
  height: 290px;

  transform: translateY(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--service-red) 20%,
      var(--service-red) 80%,
      transparent
    );

  border-radius: 10px;

  box-shadow:
    0 0 18px rgba(193, 39, 45, 0.45);

  z-index: -1;
}

/* scroll indicator lower */
.services-scroll-indicator {
  position: relative;
  top: auto;
  left: auto;
  margin-top: 52px;
}
/* Keep all large service numbers on the right side */
.core-service-number,
.core-service-reverse .core-service-number {
  left: auto !important;
  right: 28px !important;
  top: 18px;
}

/* =========================================================
   OUR PRODUCTS — NAVY CORPORATE CAROUSEL
========================================================= */

.productsNavy{
  --navy:#101c33;
  --navy-deep:#0a1426;
  --red:#cb1d2b;
  --white:#ffffff;
  --muted:rgba(255,255,255,.72);

  position:relative;
  padding:100px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 15%,rgba(255,255,255,.07),transparent 25%),
    linear-gradient(135deg,var(--navy-deep),var(--navy));
  font-family:"Poppins",Arial,sans-serif;
}

.productsNavy::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
}

.productsNavy *{
  box-sizing:border-box;
}

.productsNavy__inner{
  position:relative;
  z-index:1;
  width:min(1320px,calc(100% - 48px));
  margin:auto;
}

.productsNavy__header{
  max-width:820px;
  margin:0 auto 48px;
  text-align:center;
}

.productsNavy__eyebrow{
  margin:0;
  color:var(--red);
  font-size:12px;
  font-weight:800;
  letter-spacing:2.6px;
}

.productsNavy__line{
  display:block;
  width:54px;
  height:3px;
  margin:13px auto 18px;
  border-radius:20px;
  background:var(--red);
}

.productsNavy__title{
  margin:0;
  color:var(--white);
  font-size:clamp(38px,4vw,62px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-2px;
}

.productsNavy__title span{
  display:block;
  color:var(--red);
}

.productsNavy__desc{
  max-width:700px;
  margin:20px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.productsNavy__controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:27px;
}

.productsNavy__btn{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:.3s ease;
}

.productsNavy__btn svg{
  width:19px;
  height:19px;
}

.productsNavy__btn:hover{
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-3px);
}

.productsNavy__viewport{
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}

.productsNavy__viewport.is-dragging{
  cursor:grabbing;
}

.productsNavy__track{
  display:flex;
  gap:24px;
  will-change:transform;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

.productsNavy__track.is-dragging{
  transition:none;
}

.productsNavy__card{
  flex:0 0 calc((100% - 72px) / 4);
  min-width:0;
}

.productsNavy__link{
  display:block;
  overflow:hidden;
  color:inherit;
  background:#fff;
  border-radius:18px;
  text-decoration:none;
  box-shadow:0 20px 46px rgba(0,0,0,.24);
  transform:translateY(0) scale(1);
  transition:transform .4s ease,box-shadow .4s ease;
}

.productsNavy__link:hover{
  transform:translateY(-10px) scale(1.025);
  box-shadow:0 30px 65px rgba(0,0,0,.34);
}

.productsNavy__link.is-clicked{
  transform:translateY(-12px) scale(1.055);
  box-shadow:
    0 34px 70px rgba(0,0,0,.38),
    0 0 0 3px rgba(203,29,43,.32);
}

.productsNavy__image{
  position:relative;
  height:320px;
  overflow:hidden;
  background:#dfe3e8;
}

.productsNavy__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,18,34,.58));
  pointer-events:none;
}

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

.productsNavy__link:hover img,
.productsNavy__link.is-clicked img{
  transform:scale(1.1);
}

.productsNavy__index{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  min-width:42px;
  height:30px;
  padding:0 11px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(10,20,38,.82);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.productsNavy__content{
  padding:22px 20px 24px;
}

.productsNavy__type{
  display:block;
  margin-bottom:7px;
  color:var(--red);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.productsNavy__content h3{
  margin:0 0 17px;
  color:#111a2d;
  font-size:20px;
  font-weight:900;
}

.productsNavy__more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:15px;
  color:#657080;
  border-top:1px solid #e8ebef;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  transition:.3s ease;
}

.productsNavy__more b{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:#101c33;
  background:#eef1f5;
  border-radius:50%;
  font-size:16px;
  transition:.3s ease;
}

.productsNavy__link:hover .productsNavy__more,
.productsNavy__link.is-clicked .productsNavy__more{
  color:var(--red);
}

.productsNavy__link:hover .productsNavy__more b,
.productsNavy__link.is-clicked .productsNavy__more b{
  color:#fff;
  background:var(--red);
  transform:rotate(45deg);
}

.productsNavy__progress{
  position:relative;
  width:min(420px,70%);
  height:3px;
  margin:36px auto 0;
  overflow:hidden;
  background:rgba(255,255,255,.16);
  border-radius:20px;
}

.productsNavy__progressBar{
  position:absolute;
  inset:0 auto 0 0;
  width:25%;
  background:var(--red);
  border-radius:20px;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

@media(max-width:1100px){
  .productsNavy__card{
    flex-basis:calc((100% - 48px) / 3);
  }
}

@media(max-width:820px){
  .productsNavy{
    padding:80px 0;
  }

  .productsNavy__card{
    flex-basis:calc((100% - 24px) / 2);
  }
}

@media(max-width:560px){
  .productsNavy__inner{
    width:calc(100% - 30px);
  }

  .productsNavy__title{
    font-size:40px;
    letter-spacing:-1.4px;
  }

  .productsNavy__card{
    flex-basis:86%;
  }

  .productsNavy__image{
    height:300px;
  }
}

/* ===== TIMELINE ===== */
/* column widths as variables so the connecting line always lines up with the dot,
   no matter what screen size we're on */
.timeline{
  --media-w: 176px;
  --dot-w: 64px;
  --gap: 28px;
  position:relative;
  max-height:800px;
  overflow-y:auto;
  padding:10px 14px 10px 0;
  scroll-behavior:smooth;
}
.timeline::-webkit-scrollbar{width:8px;}
.timeline::-webkit-scrollbar-track{background:transparent;}
.timeline::-webkit-scrollbar-thumb{background:var(--red); border-radius:10px;}

.timeline-track{
  position:relative;
}
.timeline-track::before{
  content:'';
  position:absolute;
  left:calc(var(--media-w) + var(--gap) + (var(--dot-w) / 2));
  top:70px;
  bottom:70px;
  width:2px;
  background:var(--line);
  z-index:0;
}

.step{
    display:grid;
    grid-template-columns:220px 80px minmax(520px,1fr);
    justify-content:center;
    align-items:center;
    gap:30px;
    max-width:980px;
    margin:0 auto 70px;

  align-items:center;
  column-gap:var(--gap);
  position:relative;
  margin-bottom:50px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s ease, transform .7s ease;
}
.step.in-view{
  opacity:1;
  transform:translateY(0);
}
.step:last-child{margin-bottom:20px;}

/* ---- media: photo hexagon + overlapping number badge ---- */
.media{
  position:relative;
  width:var(--media-w);
  height:190px;
  justify-self:start;
}
.photo-wrap{
  width:160px;
  height:184px;
  clip-path:polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
  background:var(--white);
  padding:6px;
  box-shadow:0 8px 22px rgba(22,35,63,.18);
  transition:transform .4s ease, box-shadow .4s ease;
  position:relative;
  z-index:1;
}
.photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  clip-path:polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
  transition:transform .6s ease;
}
.step:hover .photo-wrap{
  transform:translateY(-6px) rotate(-2deg);
  box-shadow:0 16px 32px rgba(22,35,63,.28);
}
.step:hover .photo-wrap img{
  transform:scale(1.12);
}

.badge{
  width:78px;
  height:90px;
  background:linear-gradient(145deg, var(--red), #a3121f);
  clip-path:polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.55rem;
  position:absolute;
  top:50%;
  right:0;
  transform:translate(38%, -50%);
  z-index:2;
  box-shadow:0 8px 18px rgba(201,32,47,.4);
  transition:transform .4s ease;
}
.step:hover .badge{
  transform:translate(38%, -50%) scale(1.1) rotate(6deg);
}

/* ---- dot / line column ---- */
.dot-col{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  position:relative;
  z-index:2;
}
.dot{
  width:18px;
  height:18px;
  background:var(--red);
  border:3px solid var(--white);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(201,32,47,.25);
  transition:transform .4s ease, box-shadow .4s ease;
}
.step:hover .dot{
  transform:scale(1.3);
  box-shadow:0 0 0 7px rgba(201,32,47,.25);
}

/* ---- card ---- */
.card{
  background:var(--white);
  border-radius:14px;
  padding:28px 36px;
  box-shadow:0 4px 16px rgba(22,35,63,.08);
  border-left:4px solid transparent;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    width:100%;
    max-width:620px;

}
.step:hover .card{
  transform:translateX(8px);
  box-shadow:0 14px 30px rgba(22,35,63,.14);
  border-left-color:var(--red);
}
.card h3{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--navy);
  margin-bottom:12px;
  letter-spacing:.3px;
}
.card p{
  font-size:1.05rem;
  color:var(--text);
  line-height:1.65;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .timeline{--media-w:130px; --dot-w:50px; --gap:18px;}
  .media{height:150px;}
  .photo-wrap{width:118px; height:136px;}
  .badge{width:58px; height:66px; font-size:1.1rem;}
  .title{font-size:2.2rem;}
  .card{padding:20px 22px;}
  .card h3{font-size:1.2rem;}
  .card p{font-size:.95rem;}
}
@media (max-width:600px){
  .process-section{padding:50px 16px 70px;}
  .timeline{--media-w:90px; --dot-w:36px; --gap:12px;}
  .media{height:104px;}
  .photo-wrap{width:82px; height:96px; padding:4px;}
  .badge{width:42px; height:48px; font-size:.8rem;}
  .step{margin-bottom:34px;}
  .card{padding:16px 18px;}
  .card h3{font-size:1.05rem;}
  .card p{font-size:.86rem;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  .step{opacity:1; transform:none;}
}
/* =========================================================
   OUR SUPPLY PROCESS — LUXURY TIMELINE ANIMATION
   Paste at the END of your CSS file
========================================================= */

.process-section{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:100px 40px;
}
/* Soft luxury background glow */
.process-section::before {
  content: "";
  position: absolute;
  top: 250px;
  left: 50%;
  width: 850px;
  height: 850px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(201, 32, 47, 0.08),
      rgba(22, 35, 63, 0.04) 42%,
      transparent 70%
    );
  filter: blur(15px);
  z-index: -1;
  pointer-events: none;
}

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

.process-header{
    width:100%;
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.process-header.process-header-active .eyebrow {
  animation: processEyebrowReveal 0.7s ease forwards;
}

.process-header.process-header-active .title {
  animation: processTitleReveal 1s 0.15s
    cubic-bezier(.16, 1, .3, 1) forwards;
}

.process-header.process-header-active .subtext {
  animation: processTextReveal 0.8s 0.38s ease forwards;
}

.process-header.process-header-active .eyebrow::after {
  animation: processHeaderLine 1s 0.45s
    cubic-bezier(.2, .8, .2, 1) both;
}

.process-header.process-header-active .underline-accent::after {
  animation: processUnderline 1s 0.9s
    cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes processEyebrowReveal {
  from {
    opacity: 0;
    transform: translateY(-22px);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes processTitleReveal {
  from {
    opacity: 0;
    transform:
      perspective(800px)
      translateY(45px)
      rotateX(18deg)
      scale(0.92);
    filter: blur(12px);
  }

  to {
    opacity: 1;
    transform:
      perspective(800px)
      translateY(0)
      rotateX(0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes processTextReveal {
  from {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes processHeaderLine {
  from {
    width: 0;
  }

  to {
    width: 130px;
  }
}

@keyframes processUnderline {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }

  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* =========================================================
   TIMELINE STAGE
========================================================= */

.timeline {
  position: relative;
  overflow-x: hidden;
  .timeline{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:40px 50px;
}
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0.28)
    );

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

  box-shadow:
    0 30px 70px rgba(22, 35, 63, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(10px);
}

/* Existing static timeline line */
.timeline::before{
content:"";
position:absolute;
left:294px;   /* adjust once */
top:105px;
bottom:105px;
width:3px;
background:#d2d7df;
border-radius:20px;
z-index:0;
}

/* Animated red progress line — JS creates this */
.timeline-progress {
  position: absolute;

  left: calc(
    var(--media-w) +
    var(--gap) +
    (var(--dot-w) / 2) +
    4px
  );

  top: 105px;
  width: 3px;
  height: 0;

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #ff6672,
      var(--red),
      #8e101c
    );

  box-shadow:
    0 0 10px rgba(201, 32, 47, 0.65),
    0 0 24px rgba(201, 32, 47, 0.30);

  z-index: 1;
  transition: height 0.18s linear;
}

/* Animated point travelling with progress */
.timeline-progress::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;

  width: 13px;
  height: 13px;

  transform: translateX(-50%);
  border-radius: 50%;

  background: #ffffff;
  border: 3px solid var(--red);

  box-shadow:
    0 0 0 6px rgba(201, 32, 47, 0.15),
    0 0 22px rgba(201, 32, 47, 0.65);
}

/* Elegant scrollbar */
.timeline::-webkit-scrollbar {
  width: 6px;
}

.timeline::-webkit-scrollbar-track {
  background: rgba(22, 35, 63, 0.05);
  border-radius: 20px;
}

.timeline::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      #ec4451,
      var(--red),
      #94121e
    );
  border-radius: 20px;
}

/* =========================================================
   STEP ENTRANCE
========================================================= */

.process-section .step {
  opacity: 0;
  filter: blur(8px);

  transform:
    perspective(1100px)
    translateY(70px)
    translateX(-35px)
    rotateY(7deg)
    scale(0.93);

  transition:
    opacity 0.9s ease,
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    filter 0.8s ease;
}

/* Even steps enter from opposite direction */
.process-section .step:nth-child(even) {
  transform:
    perspective(1100px)
    translateY(70px)
    translateX(35px)
    rotateY(-7deg)
    scale(0.93);
}

.process-section .step.in-view {
  opacity: 1;
  filter: blur(0);

  transform:
    perspective(1100px)
    translateY(0)
    translateX(0)
    rotateY(0)
    scale(1);
}

/* =========================================================
   IMAGE — CINEMATIC REVEAL
========================================================= */

.process-section .photo-wrap {
  overflow: hidden;
  transform-style: preserve-3d;

  box-shadow:
    0 18px 38px rgba(22, 35, 63, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.8);

  transition:
    transform 0.65s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.65s ease;
}

/* Moving image light sweep */
.process-section .photo-wrap::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -100%;

  width: 48%;
  height: 120%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.60),
      transparent
    );

  transform: skewX(-18deg);
  z-index: 4;
  pointer-events: none;
}

.process-section .step.in-view .photo-wrap::before {
  animation: processImageShine 1.25s 0.55s ease forwards;
}

@keyframes processImageShine {
  from {
    left: -100%;
  }

  to {
    left: 150%;
  }
}

.process-section .photo-wrap img {
  transform: scale(1.16);
  filter:
    saturate(0.82)
    contrast(1.08);

  transition:
    transform 1s cubic-bezier(.16, 1, .3, 1),
    filter 0.65s ease;
}

.process-section .step.in-view .photo-wrap img {
  transform: scale(1.03);
}

.process-section .step:hover .photo-wrap {
  transform:
    translateY(-10px)
    rotate(-2deg)
    scale(1.035);

  box-shadow:
    0 30px 55px rgba(22, 35, 63, 0.28),
    0 0 0 1px rgba(201, 32, 47, 0.25);
}

.process-section .step:hover .photo-wrap img {
  transform: scale(1.14);
  filter:
    saturate(1.08)
    contrast(1.1);
}

/* =========================================================
   NUMBER BADGE — LUXURY PULSE
========================================================= */

.process-section .badge {
  overflow: visible;

  background:
    linear-gradient(
      145deg,
      #eb3d4b 0%,
      var(--red) 48%,
      #8e101c 100%
    );

  box-shadow:
    0 16px 30px rgba(201, 32, 47, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Badge outer pulse */
.process-section .badge::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -1;

  clip-path:
    polygon(
      50% 0%,
      100% 20%,
      100% 80%,
      50% 100%,
      0% 80%,
      0% 20%
    );

  border: 1px solid rgba(201, 32, 47, 0.48);

  animation: processBadgePulse 2.6s ease-out infinite;
}

/* Gloss highlight */
.process-section .badge::after {
  content: "";
  position: absolute;
  inset: 2px;

  clip-path: inherit;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.22),
      transparent 46%
    );

  pointer-events: none;
}

@keyframes processBadgePulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  35% {
    opacity: 0.65;
  }

  100% {
    transform: scale(1.34);
    opacity: 0;
  }
}

.process-section .step:hover .badge {
  transform:
    translate(38%, -50%)
    scale(1.12)
    rotate(5deg);

  box-shadow:
    0 22px 42px rgba(201, 32, 47, 0.48),
    0 0 28px rgba(201, 32, 47, 0.22);
}

/* =========================================================
   DOT — ACTIVE SIGNAL EFFECT
========================================================= */

.process-section .dot-col {
  z-index: 3;
}

.process-section .dot {
  position: relative;
  background: #ffffff;
  border: 4px solid rgba(201, 32, 47, 0.35);

  box-shadow:
    0 0 0 5px rgba(201, 32, 47, 0.10);

  transition:
    transform 0.45s cubic-bezier(.16, 1, .3, 1),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Outer expanding ring */
.process-section .dot::before {
  content: "";
  position: absolute;
  inset: -9px;

  border-radius: 50%;
  border: 1px solid rgba(201, 32, 47, 0.45);

  opacity: 0;
  transform: scale(0.5);
}

.process-section .step.in-view .dot {
  background: var(--red);
  border-color: #ffffff;

  box-shadow:
    0 0 0 5px rgba(201, 32, 47, 0.18),
    0 0 24px rgba(201, 32, 47, 0.42);
}

.process-section .step.in-view .dot::before {
  animation: processDotSignal 2.2s ease-out infinite;
}

@keyframes processDotSignal {
  0% {
    opacity: 0.75;
    transform: scale(0.55);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

.process-section .step:hover .dot {
  transform: scale(1.32);

  box-shadow:
    0 0 0 8px rgba(201, 32, 47, 0.16),
    0 0 30px rgba(201, 32, 47, 0.55);
}

/* =========================================================
   CARD — GLASS + LIGHT SWEEP
========================================================= */

.process-section .card {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(247, 248, 251, 0.91)
    );

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

  border-left:
    4px solid transparent;

  box-shadow:
    0 16px 38px rgba(22, 35, 63, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(12px);

  transform-origin: left center;

  transition:
    transform 0.55s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.55s ease,
    border-color 0.5s ease;
}

/* Card red top accent */
.process-section .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      #f45b66,
      transparent
    );

  transition:
    width 0.7s cubic-bezier(.16, 1, .3, 1);
}

/* Card shine */
.process-section .card::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -90%;

  width: 35%;
  height: 140%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.85),
      transparent
    );

  transform: skewX(-20deg);
  pointer-events: none;
}

.process-section .step.in-view .card::before {
  width: 42%;
}

.process-section .step:hover .card {
  transform:
    translateX(12px)
    translateY(-5px)
    scale(1.015);

  border-left-color: var(--red);

  box-shadow:
    0 28px 60px rgba(22, 35, 63, 0.17),
    0 10px 25px rgba(201, 32, 47, 0.08);
}

.process-section .step:hover .card::before {
  width: 100%;
}

.process-section .step:hover .card::after {
  animation: processCardShine 0.95s ease;
}

@keyframes processCardShine {
  from {
    left: -90%;
  }

  to {
    left: 135%;
  }
}

/* Heading movement */
.process-section .card h3 {
  position: relative;
  display: inline-block;

  transition:
    color 0.4s ease,
    transform 0.45s cubic-bezier(.16, 1, .3, 1);
}

.process-section .card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: var(--red);

  transition: width 0.5s ease;
}

.process-section .step:hover .card h3 {
  color: var(--red);
  transform: translateX(4px);
}

.process-section .step:hover .card h3::after {
  width: 60%;
}

.process-section .card p {
  transition:
    color 0.4s ease,
    transform 0.45s ease;
}

.process-section .step:hover .card p {
  color: #424b5d;
  transform: translateX(4px);
}

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

@media (max-width: 900px) {
  .timeline::before,
  .timeline-progress {
    left: calc(
      var(--media-w) +
      var(--gap) +
      (var(--dot-w) / 2) +
      4px
    );
  }

  .process-section .step,
  .process-section .step:nth-child(even) {
    transform:
      translateY(45px)
      scale(0.96);
  }

  .process-section .step.in-view {
    transform:
      translateY(0)
      scale(1);
  }
}

@media (max-width: 600px) {
  .timeline {
    padding-right: 10px;
    border-radius: 16px;
  }

  .timeline::before,
  .timeline-progress {
    top: 70px;
    bottom: 70px;
  }

  .process-section .card {
    border-radius: 12px;
  }

  .process-section .step:hover .card {
    transform: translateY(-4px);
  }

  .process-section .step:hover .photo-wrap {
    transform:
      translateY(-6px)
      scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-header > *,
  .process-section .step {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .process-section *,
  .process-section *::before,
  .process-section *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================
   SUPPLY PROCESS — EXACT CENTER TIMELINE FIX
========================================= */

.timeline{
  --media-w: 220px;
  --dot-w: 70px;
  --gap: 25px;

  width: 100%;
  max-width: 1120px;
  margin: 0 auto;

  padding: 20px 30px;
  position: relative;
}

/* each row */
.step{
  display: grid;
  grid-template-columns:
    var(--media-w)
    var(--dot-w)
    minmax(0, 1fr);

  column-gap: var(--gap);
  align-items: center;

  width: 100%;
  max-width: 1000px;

  margin: 0 auto 70px;
  position: relative;
}

/* image column */
.media{
  width: var(--media-w);
  justify-self: center;
  position: relative;
  z-index: 3;
}

/* dot column exact center */
.dot-col{
  width: var(--dot-w);
  height: 100%;

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

  position: relative;
  z-index: 5;
}

/* card */
.card{
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

/* static line exact dot center */
.timeline::before{
  content: "";
  position: absolute;

  left: calc(
    30px +
    var(--media-w) +
    var(--gap) +
    (var(--dot-w) / 2)
  );

  top: 95px;
  bottom: 95px;

  width: 3px;
  transform: translateX(-50%);

  background: #c8ccd4;
  border-radius: 20px;

  z-index: 1;
}

/* red progress line exact dot center */
.timeline-progress{
  position: absolute;

  left: calc(
    30px +
    var(--media-w) +
    var(--gap) +
    (var(--dot-w) / 2)
  );

  top: 95px;

  width: 3px;
  height: 0;

  transform: translateX(-50%);

  background: linear-gradient(
    180deg,
    #ef4a58,
    #c9202f,
    #8f111c
  );

  border-radius: 20px;
  z-index: 2;
}

/* dot above line */
.dot{
  position: relative;
  z-index: 6;
  background: var(--red);
}

/* image always left of line */
.photo-wrap{
  position: relative;
  z-index: 4;
}
@media (max-width: 900px){
  .timeline{
    --media-w: 150px;
    --dot-w: 50px;
    --gap: 18px;
    padding: 20px;
  }

  .timeline::before,
  .timeline-progress{
    left: calc(
      20px +
      var(--media-w) +
      var(--gap) +
      (var(--dot-w) / 2)
    );
  }
}
/* =========================================
   TIMELINE — EXACT DOT CENTRE LINE FIX
========================================= */

/* Old global lines remove */
.timeline::before,
.timeline-progress,
.timeline-progress::after {
  display: none !important;
}

/* Dot column */
.process-section .dot-col {
  position: relative;
  width: var(--dot-w);
  height: 100%;

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

  z-index: 4;
}

/* Line exact dot centre-la */
.process-section .dot-col::before {
  content: "";
  position: absolute;

  left: 50%;
  top: -50%;
  bottom: -50%;

  width: 3px;
  transform: translateX(-50%);

  background: #c9ced8;
  border-radius: 20px;

  z-index: 0;
}

/* First step-la line மேல போகக்கூடாது */
.process-section .step:first-child .dot-col::before {
  top: 50%;
}

/* Last step-la line கீழே போகக்கூடாது */
.process-section .step:last-child .dot-col::before {
  bottom: 50%;
}

/* Dot line மேல clear-ah தெரிய */
.process-section .dot {
  position: relative;
  z-index: 5;

  width: 18px;
  height: 18px;

  background: var(--red);
  border: 4px solid #ffffff;

  border-radius: 50%;

  box-shadow:
    0 0 0 5px rgba(201, 32, 47, 0.16),
    0 0 20px rgba(201, 32, 47, 0.35);
}
/* ============ Tokens ============ */
:root{
  --navy: #0f2038;
  --navy-2: #16304f;
  --red: #d81f2e;
  --red-dark: #8c0f1c;
  --red-grad: linear-gradient(135deg, #e11d2e, #9c0f1e);
  --bg: #eef0f3;
  --bg-2: #f7f8fa;
  --card-bg: #ffffff;
  --ink: #16233a;
  --muted: #5b6577;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-card: 0 10px 30px -12px rgba(15,32,56,.15);
  --font-display: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============ Section shell ============ */
.promise{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 500px at 100% -10%, #e7eaef 0%, transparent 60%),
    linear-gradient(180deg, #f2f3f6 0%, #eceef2 100%);
  padding-top: 64px;
}

.bg-dots{
  position:absolute;
  top:20px; left:20px;
  width:170px; height:170px;
  background-image: radial-gradient(#c9cfd8 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity:.7;
  pointer-events:none;
  mask-image: radial-gradient(circle, #000 40%, transparent 90%);
}

.bg-blob--right{
  position:absolute;
  top:-120px; right:-160px;
  width:520px; height:520px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(216,31,46,.06), transparent 70%);
  pointer-events:none;
}

.promise__inner{
  max-width:1360px;
  margin:0 auto;
  padding: 40px 40px 70px;
  position:relative;
  z-index:1;
}

/* ============ Header ============ */
.promise__header{
  text-align:center;
  max-width: 880px;
  margin: 0 auto 56px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--red);
  text-transform:uppercase;
  margin-bottom: 18px;
}
.eyebrow__line{
  width: 26px; height: 3px;
  background: var(--red);
  border-radius: 2px;
  display:inline-block;
}

.promise__title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.title-word{ display:inline-block; }
.title-word--dark{ color: var(--navy); margin-right: 14px; }
.title-word--red{
  background: var(--red-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.promise__subtitle{
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--navy-2);
  font-weight:500;
  margin: 0 0 14px;
}

.subtitle-rule{
  display:block;
  width: 56px; height: 3px;
  margin: 0 auto 26px;
  border-radius: 2px;
  background: var(--red-grad);
  position:relative;
}
.subtitle-rule::after{
  content:"";
  position:absolute; inset:0;
  border-radius:2px;
  background: rgba(255,255,255,.6);
  transform: scaleX(0);
  transform-origin:left;
  animation: rule-sweep 2.6s ease-in-out .9s infinite;
}
@keyframes rule-sweep{
  0%{ transform: scaleX(0); opacity:1;}
  55%{ transform: scaleX(1); opacity:.4;}
  100%{ transform: scaleX(1); opacity:0;}
}

.promise__desc{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
}

/* ============ Grid ============ */
.promise__grid{
  display:grid;
  grid-template-columns: 1fr minmax(300px, 420px) 1fr;
  gap: 34px;
  align-items:center;
  margin-bottom: 60px;
}

.cards{ display:flex; flex-direction:column; gap: 26px; }

.card{
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap: 6px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 42px -16px rgba(15,32,56,.24);
}

.card__icon{
  width: 62px; height:62px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, #fdeceb, #f7d9d8 70%);
  margin-bottom: 12px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.card__icon svg{ width: 30px; height: 30px; }
.card:hover .card__icon{ transform: rotate(-8deg) scale(1.08); }
.card:hover .card__icon--tick{ animation: tick-spin .7s ease; }
.card:hover .card__icon--headset{ animation: wiggle .55s ease; }
.card:hover .card__icon--shake{ animation: wiggle .55s ease; }
.card:hover .card__icon--shield{ animation: pop .5s ease; }

@keyframes tick-spin{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
@keyframes wiggle{
  0%,100%{ transform: rotate(0);}
  25%{ transform: rotate(-10deg);}
  75%{ transform: rotate(10deg);}
}
@keyframes pop{
  0%{ transform: scale(1);}
  50%{ transform: scale(1.18);}
  100%{ transform: scale(1.08) rotate(-8deg);}
}

.card h3{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.card__rule{
  width: 30px; height: 3px;
  background: var(--red);
  border-radius:2px;
  margin: 2px 0 6px;
}
.card p{
  margin:0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.65;
}

/* ============ Center visual ============ */
.visual{
  position:relative;
  width: min(100%, 420px);
  aspect-ratio: 1/1;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.visual__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.visual__ring--outer{
  inset: -6px;
  border: 1px solid rgba(15,32,56,.12);
}
.visual__ring--dashed{
  inset: -22px;
  border: 2px dashed rgba(216,31,46,.35);
  animation: spin 26s linear infinite;
}
@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.visual__frame{
  position:relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow:hidden;
  box-shadow:
    0 20px 50px -12px rgba(15,32,56,.35),
    0 0 0 10px #fff,
    0 0 0 11px rgba(15,32,56,.08);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.015); }
}

.visual__art{ display:block; width:100%; height:100%; }
.visual__img{ object-fit:cover; object-position:center; }

.art-part{
  opacity:0;
  transform: translateY(14px) scale(.97);
  transform-box: fill-box;
  transform-origin: center;
  animation: art-in .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--fd, 0s);
}
.visual.is-visible .art-part{ animation-play-state: running; }
@keyframes art-in{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.rebar-row{ animation: drift 5s ease-in-out infinite; }
.rebar-row:nth-child(2){ animation-delay: .3s; }
.rebar-row:nth-child(3){ animation-delay: .6s; }
.rebar-row:nth-child(4){ animation-delay: .9s; }
@keyframes drift{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(1.5px,-1.5px); }
}

.sweep{
  animation: sweep-move 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sweep-move{
  0%{ transform: translateX(0); }
  55%{ transform: translateX(760px); }
  100%{ transform: translateX(760px); }
}

/* pulsing corner dots */
.dot{
  position:absolute;
  width: 14px; height:14px;
  border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(216,31,46,.5);
  animation: ping 2.4s ease-out infinite;
}
.dot::after{
  content:"";
  position:absolute; inset:3px;
  border-radius:50%;
  background:#fff;
  opacity:.85;
}
.dot--tl{ top: 6%; left: 6%; animation-delay: 0s; }
.dot--tr{ top: 6%; right: 6%; animation-delay: .6s; }
.dot--bl{ bottom: 6%; left: 6%; animation-delay: 1.2s; }
.dot--br{ bottom: 6%; right: 6%; animation-delay: 1.8s; }

@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(216,31,46,.55); }
  70%{ box-shadow: 0 0 0 12px rgba(216,31,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(216,31,46,0); }
}

/* ============ Quote ============ */
.quote{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 26px;
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 0;
}
.quote__mark{
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--red);
  line-height:1;
  flex-shrink:0;
}
.quote p{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--navy);
  text-align:center;
  line-height:1.5;
  margin:0;
  padding: 0 6px;
  border-left: 2px solid #dfe2e8;
  border-right: 2px solid #dfe2e8;
  padding: 0 26px;
}

/* ============ Ribbon ============ */
.ribbon{
  background: linear-gradient(90deg, var(--red-dark), var(--red) 55%, #b8151f);
  background-size: 200% 100%;
  animation: ribbon-flow 10s ease-in-out infinite;
  position:relative;
}
@keyframes ribbon-flow{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

.ribbon__inner{
  max-width:1360px;
  margin:0 auto;
  padding: 20px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  flex-wrap:wrap;
}

.ribbon__list{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 26px;
  margin:0; padding:0;
  flex-wrap:wrap;
}
.ribbon__list li{
  display:flex;
  align-items:center;
  gap: 10px;
  color:#fff;
  font-family: var(--font-display);
  font-weight:600;
  font-size: .82rem;
  letter-spacing:.01em;
  white-space:nowrap;
  position:relative;
  padding-right: 26px;
}
.ribbon__list li:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height: 22px;
  background: rgba(255,255,255,.35);
}
.ribbon__list svg{
  width:20px; height:20px;
  flex-shrink:0;
  animation: float-icon 3.2s ease-in-out infinite;
}
.ribbon__list li:nth-child(2) svg{ animation-delay:.3s; }
.ribbon__list li:nth-child(3) svg{ animation-delay:.6s; }
.ribbon__list li:nth-child(4) svg{ animation-delay:.9s; }
@keyframes float-icon{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

.cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: var(--navy);
  color:#fff;
  border:none;
  border-radius: 10px;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: .92rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}
.cta::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%);
}
.cta:hover::before{ animation: shine 1s ease forwards; }
@keyframes shine{ to{ transform: translateX(120%); } }

.cta:hover{
  transform: translateY(-3px);
  background: #0a1729;
  box-shadow: 0 16px 30px -8px rgba(0,0,0,.55);
}
.cta__arrow{ width:18px; height:18px; transition: transform .3s ease; }
.cta:hover .cta__arrow{ transform: translateX(5px); }

/* ============ Scroll reveal ============ */
[data-reveal]{
  opacity:0;
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0s);
}
[data-reveal]:not([data-dir]){ transform: translateY(24px); }
[data-reveal][data-dir="left"]{ transform: translateX(-34px); }
[data-reveal][data-dir="right"]{ transform: translateX(34px); }
[data-reveal][data-dir="up"]{ transform: translateY(30px) scale(.94); }

[data-reveal].in-view{
  opacity:1;
  transform: translate(0,0) scale(1);
}

/* ============ Responsive ============ */
@media (max-width: 980px){
  .promise__grid{
    grid-template-columns: 1fr;
  }
  .visual{ order:-1; margin-bottom: 20px; width: min(100%,320px); }
  .cards--left, .cards--right{ flex-direction: row; }
  .cards{ flex-direction: row; gap: 18px; }
  .cards .card{ flex:1; }
}

@media (max-width: 720px){
  .promise__inner{ padding: 30px 20px 50px; }
  .cards{ flex-direction:column; }
  .quote{ flex-direction:column; gap: 10px; }
  .quote p{ border:none; padding:0; }
  .quote__mark{ font-size: 2.4rem; }
  .ribbon__inner{ justify-content:center; text-align:center; }
  .ribbon__list{ justify-content:center; }
  .cta{ width:100%; justify-content:center; }
}

@media (max-width: 460px){
  .cards--left, .cards--right{ flex-direction:column; }
}


:root{
  --navy:#16233f;
  --navy-2:#1c2d4f;
  --red:#c9202f;
  --red-dark:#a3121f;
  --text:#3a4356;
  --muted:#6b7385;
  --white:#ffffff;
  --card-shadow:0 10px 30px rgba(22,35,63,.08);
}

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

body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:#f5f6f8;
}

/* ===== SECTION ===== */
.testi-section{
  position:relative;
  overflow:hidden;
  padding:60px 24px 0;
  background:linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%);
}

.bg-deco{
  position:absolute;
  top:0;
  width:380px;
  height:auto;
  opacity:.09;
  filter:grayscale(1) contrast(1.1);
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.bg-left{ left:-60px; top:-20px; }
.bg-right{ right:-60px; top:-20px; transform:scaleX(-1); }

/* ===== HEADER ===== */
.testi-header{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

.stars{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--red);
  font-size:1.15rem;
}
.stars i{
  animation:twinkle 2.4s ease-in-out infinite;
}
.stars i:nth-child(1){animation-delay:0s;}
.stars i:nth-child(2){animation-delay:.15s;}
.stars i:nth-child(3){animation-delay:.3s;}
.stars i:nth-child(4){animation-delay:.45s;}
.stars i:nth-child(5){animation-delay:.6s;}

@keyframes twinkle{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:.7; }
}

.eyebrow-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:16px;
}
.eyebrow-line{
  width:50px;
  height:2px;
  background:var(--navy);
}
.eyebrow-text{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:2px;
  color:var(--navy);
}

.title{
  font-family:'Poppins', sans-serif;
  font-weight:800;
  font-size:2.7rem;
  line-height:1.28;
  color:var(--navy);
}
.title .red{ color:var(--red); }

.title-underline{
  display:block;
  width:70px;
  height:3px;
  background:var(--red);
  margin:18px auto;
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:center;
  animation:growLine .8s ease forwards .3s;
}
@keyframes growLine{
  to{ transform:scaleX(1); }
}

.subtext{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
  margin-top:6px;
}

/* =====================================================
   SERVICES PAGE
   RESPONSIVE PART 1
=====================================================*/

@media (max-width:768px){

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

.services-hero{
    min-height:560px;
}

.services-hero .hero-content{

    width:100%;
    padding:0 24px;

    align-items:center;
    text-align:center;
}

.services-hero .hero-content::before{
    display:none !important;
}

.services-hero .breadcrumb{
    justify-content:center;
    margin-bottom:22px;
}

.services-hero .hero-heading{
    align-items:center;
    margin-bottom:18px;
}

.services-hero .hero-heading .line{

    font-size:48px;
    line-height:.95;
    letter-spacing:-1px;
}

.services-hero .hero-heading::after{

    left:50%;
    transform:translateX(-50%);
}

.services-hero .hero-tagline{

    padding-left:0;
    margin-top:18px;

    max-width:420px;

    font-size:17px;
    line-height:1.7;
}

.services-hero .hero-tagline::before{
    display:none;
}

.services-scroll-indicator{
    display:none;
}

.services-hero .hero-img{

    object-position:65% center;
}

/* ================= CORE SERVICES ================= */

.core-services-premium{

    padding:70px 20px;
}

.core-services-header{

    margin-bottom:42px;
}

.core-services-heading{

    font-size:32px;
    line-height:1.25;
}

.core-services-description{

    font-size:15px;
}

.core-services-list{

    gap:28px;
}

.core-service-item,
.core-service-reverse{

    display:flex;
    flex-direction:column;

    border-radius:18px;

    overflow:hidden;
}

.core-service-image{

    min-height:270px;
}

.core-service-image img{

    transform:scale(1.05);
}

.core-service-content{

    padding:36px 24px;
}

.core-service-number{

    font-size:64px;
    right:18px !important;
    top:10px;
}

.core-service-icon{

    width:54px;
    height:54px;

    margin-bottom:18px;
}

.core-service-icon svg{

    width:24px;
    height:24px;
}

.core-service-content h3{

    font-size:26px;
    line-height:1.25;
}

.core-service-copy{

    font-size:14px;
    line-height:1.75;
}

.core-service-benefits{

    gap:8px;
}

.core-service-benefits span{

    font-size:12px;
}

.core-service-image-label{

    left:18px;
    bottom:18px;

    font-size:10px;
}

}


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

@media (max-width:480px){

.services-hero{

    min-height:500px;
}

.services-hero .hero-content{

    padding:0 18px;
}

.services-hero .hero-heading .line{

    font-size:38px;
}

.services-hero .hero-tagline{

    font-size:15px;
}

.core-services-premium{

    padding:60px 16px;
}

.core-services-heading{

    font-size:26px;
}

.core-service-image{

    min-height:220px;
}

.core-service-content{

    padding:30px 18px;
}

.core-service-number{

    font-size:52px;
}

.core-service-content h3{

    font-size:22px;
}

.core-service-copy{

    font-size:13px;
}

.core-service-benefits{

    flex-direction:column;
    align-items:flex-start;
}

}
/* =====================================================
   PRODUCTS SECTION
   RESPONSIVE PART 2
=====================================================*/

@media (max-width:768px){

.productsNavy{

    padding:70px 0;
}

.productsNavy__inner{

    width:100%;
    padding:0 20px;
}

.productsNavy__header{

    text-align:center;
    margin-bottom:32px;
}

.productsNavy__eyebrow{

    font-size:13px;
    letter-spacing:2px;
}

.productsNavy__title{

    font-size:30px;
    line-height:1.25;
}

.productsNavy__title span{

    display:block;
}

.productsNavy__desc{

    font-size:14px;
    line-height:1.7;

    max-width:500px;
    margin:18px auto 0;
}

/* Controls */

.productsNavy__controls{

    justify-content:center;
    margin-top:24px;
    gap:14px;
}

.productsNavy__btn{

    width:46px;
    height:46px;
}

/* Slider */

.productsNavy__viewport{

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

.productsNavy__viewport::-webkit-scrollbar{

    display:none;
}

.productsNavy__track{

    display:flex;

    gap:18px;

    width:max-content;

    transform:none !important;
}

.productsNavy__card{

    flex:0 0 calc(100vw - 70px);

    width:calc(100vw - 70px);

    max-width:360px;

    scroll-snap-align:center;
}

.productsNavy__image{

    height:240px;
}

.productsNavy__image img{

    height:100%;
    object-fit:cover;
}

.productsNavy__content{

    padding:22px;
}

.productsNavy__type{

    font-size:11px;
}

.productsNavy__content h3{

    font-size:22px;

    margin:10px 0 14px;
}

.productsNavy__more{

    font-size:13px;
}

.productsNavy__progress{

    display:none;
}

}

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

@media (max-width:480px){

.productsNavy{

    padding:60px 0;
}

.productsNavy__inner{

    padding:0 16px;
}

.productsNavy__title{

    font-size:24px;
}

.productsNavy__desc{

    font-size:13px;
}

.productsNavy__card{

    width:calc(100vw - 36px);

    flex-basis:calc(100vw - 36px);
}

.productsNavy__image{

    height:210px;
}

.productsNavy__content{

    padding:18px;
}

.productsNavy__content h3{

    font-size:20px;
}

.productsNavy__btn{

    width:42px;
    height:42px;
}

}

/* Touch devices */

@media (hover:none){

.productsNavy__card:hover{

    transform:none;
}

.productsNavy__image img{

    transform:none !important;
}

}
/* =========================================================
   SERVICES PAGE — RESPONSIVE PART 3
   SUPPLY PROCESS + FINAL GLOBAL FIXES
========================================================= */

/* ---------- GLOBAL SAFETY FIX ---------- */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.services-hero,
.core-services-premium,
.productsNavy,
.process-section{
    width:100%;
    max-width:100%;
}

img,
svg{
    max-width:100%;
}

/* =========================================================
   SUPPLY PROCESS — TABLET
========================================================= */

@media (max-width:900px){

    .process-section{
        max-width:100%;
        padding:70px 24px 85px;
    }

    .process-header{
        margin-bottom:48px;
    }

    .process-header .title{
        font-size:36px;
        line-height:1.25;
    }

    .process-header .subtext{
        max-width:620px;
        font-size:15px;
    }

    .timeline{
        --media-w:130px;
        --dot-w:46px;
        --gap:16px;

        max-height:none;
        padding:24px 18px 24px 4px;
    }

    .timeline::before,
    .timeline-progress{
        left:calc(
            var(--media-w) +
            var(--gap) +
            (var(--dot-w) / 2) +
            4px
        );
    }

    .process-section .step{
        grid-template-columns:
            var(--media-w)
            var(--dot-w)
            minmax(0,1fr);

        column-gap:var(--gap);
        margin-bottom:40px;
    }

    .media{
        width:var(--media-w);
        height:150px;
    }

    .photo-wrap{
        width:118px;
        height:136px;
    }

    .badge{
        width:58px;
        height:66px;
        font-size:17px;
    }

    .process-section .card{
        max-width:none;
        padding:22px 24px;
    }

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

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

/* =========================================================
   SUPPLY PROCESS — MOBILE REDESIGN
========================================================= */

@media (max-width:768px){

    .process-section{
        padding:60px 18px 72px;
    }

    .process-section::before{
        width:500px;
        height:500px;
        top:180px;
    }

    .process-header{
        margin-bottom:36px;
        padding:0 4px;
    }

    .process-header .eyebrow{
        font-size:13px;
        letter-spacing:1.4px;
        padding-bottom:11px;
    }

    .process-header .eyebrow::after{
        width:90px;
    }

    .process-header .title{
        font-size:30px;
        line-height:1.23;
        margin:16px 0 15px;
    }

    .process-header .title br{
        display:none;
    }

    .process-header .subtext{
        font-size:14px;
        line-height:1.7;
    }

    /* Remove desktop timeline structure */

    .timeline{
        max-height:none;
        overflow:visible;

        padding:0;
        border:0;
        border-radius:0;

        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
    }

    .timeline::before,
    .timeline-progress{
        display:none !important;
    }

    .process-section .step,
    .process-section .step:nth-child(even){
        display:flex;
        flex-direction:column;
        align-items:stretch;

        width:100%;
        margin:0 0 26px;

        opacity:1;
        filter:none;

        transform:none;
    }

    .process-section .step.in-view{
        opacity:1;
        filter:none;
        transform:none;
    }

    .media{
        position:relative;

        width:100%;
        height:220px;

        margin:0;
    }

    .photo-wrap{
        width:100%;
        height:220px;

        padding:0;
        overflow:hidden;

        border-radius:18px 18px 0 0;
        clip-path:none;

        box-shadow:none;
    }

    .photo-wrap img{
        width:100%;
        height:100%;

        object-fit:cover;
        clip-path:none;

        border-radius:18px 18px 0 0;

        transform:scale(1.03);
    }

    .process-section .photo-wrap::before{
        display:none;
    }

    .badge{
        width:56px;
        height:56px;

        right:18px;
        top:auto;
        bottom:-28px;

        border-radius:50%;
        clip-path:none;

        font-size:15px;

        transform:none;
    }

    .process-section .badge::before,
    .process-section .badge::after{
        border-radius:50%;
        clip-path:none;
    }

    .dot-col{
        display:none;
    }

    .process-section .card{
        width:100%;
        max-width:none;

        padding:38px 20px 24px;

        border-radius:0 0 18px 18px;
        border:1px solid rgba(22,35,63,.08);
        border-top:3px solid var(--red);
        border-left:1px solid rgba(22,35,63,.08);

        box-shadow:
            0 14px 30px rgba(22,35,63,.11);

        transform:none;
    }

    .process-section .card::before,
    .process-section .card::after{
        display:none;
    }

    .process-section .card h3{
        display:block;

        margin-bottom:9px;
        padding-right:48px;

        font-size:18px;
        line-height:1.35;
    }

    .process-section .card h3::after{
        display:none;
    }

    .process-section .card p{
        font-size:14px;
        line-height:1.65;
    }

    .process-section .step:hover .photo-wrap,
    .process-section .step:hover .badge,
    .process-section .step:hover .card,
    .process-section .step:hover .card h3,
    .process-section .step:hover .card p{
        transform:none;
    }
}

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

@media (max-width:480px){

    .process-section{
        padding:52px 14px 62px;
    }

    .process-header{
        margin-bottom:30px;
    }

    .process-header .eyebrow{
        font-size:12px;
    }

    .process-header .title{
        font-size:25px;
    }

    .process-header .subtext{
        font-size:13px;
    }

    .process-section .step{
        margin-bottom:22px;
    }

    .media,
    .photo-wrap{
        height:185px;
    }

    .badge{
        width:50px;
        height:50px;

        right:14px;
        bottom:-25px;

        font-size:13px;
    }

    .process-section .card{
        padding:34px 17px 20px;
        border-radius:0 0 15px 15px;
    }

    .photo-wrap,
    .photo-wrap img{
        border-radius:15px 15px 0 0;
    }

    .process-section .card h3{
        padding-right:42px;
        font-size:16px;
    }

    .process-section .card p{
        font-size:13px;
    }
}

/* =========================================================
   FINAL 320PX DEVICE FIX
========================================================= */

@media (max-width:360px){

    .services-hero .hero-content{
        padding-left:14px;
        padding-right:14px;
    }

    .services-hero .hero-heading .line{
        font-size:34px;
    }

    .core-services-premium{
        padding-left:12px;
        padding-right:12px;
    }

    .core-service-content,
    .core-service-reverse .core-service-content{
        padding-left:16px;
        padding-right:16px;
    }

    .productsNavy__inner{
        padding-left:12px;
        padding-right:12px;
    }

    .productsNavy__card{
        width:calc(100vw - 24px);
        flex-basis:calc(100vw - 24px);
    }

    .process-section{
        padding-left:10px;
        padding-right:10px;
    }
}

/* =========================================================
   TOUCH DEVICE FIXES
========================================================= */

@media (hover:none){

    .core-service-item:hover,
    .productsNavy__card:hover,
    .process-section .step:hover .card,
    .process-section .step:hover .photo-wrap,
    .process-section .step:hover .badge{
        transform:none;
    }

    .core-service-item:hover .core-service-image img{
        transform:scale(1.05);
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .process-header > *,
    .process-section .step{
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
    }

    .process-section *,
    .process-section *::before,
    .process-section *::after{
        animation:none !important;
        transition:none !important;
    }
}
/* ================= QUOTE POPUP ================= */

.quote-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);

    display:none;

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

    z-index:9999;
}

.quote-modal.active{
    display:flex;
}

.quote-box{
    width:650px;
    max-width:95%;
    background:#fff;
    border-radius:12px;
    padding:35px;
    position:relative;
}

.quote-close{
    position:absolute;
    right:18px;
    top:12px;
    font-size:32px;
    border:none;
    background:none;
    cursor:pointer;
}

.form-row{
    display:flex;
    gap:15px;
    margin-bottom:15px;
}

.form-row input{
    flex:1;
}

.quote-box input,
.quote-box textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:15px;
}

.quote-box textarea{
    height:140px;
    resize:none;
    margin-bottom:18px;
}

.btn-send{
    background:#c1272d;
    color:#fff;
    border:none;
    padding:14px 28px;
    border-radius:6px;
    cursor:pointer;
}