/* =========================================================
   ING THEDY
   STYLES.CSS COMPLETO Y CORREGIDO
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --blue: #063f91;
  --blue-2: #0b5bd3;
  --blue-soft: #eef5ff;

  --dark: #071224;
  --dark-2: #050b16;

  --text: #0d1526;
  --muted: #5d6878;

  --light: #f4f8ff;
  --line: #dbe4f0;

  --white: #ffffff;

  --shadow:
    0 18px 50px rgba(8, 28, 60, 0.14);

  --shadow-soft:
    0 12px 32px rgba(8, 28, 60, 0.08);

  --radius: 22px;
}


/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

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

  color: var(--text);

  background: var(--white);

  overflow-x: hidden;
}


img {
  max-width: 100%;

  display: block;
}


a {
  color: inherit;

  text-decoration: none;
}


button {
  font-family: inherit;
}


.container {
  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin-left: auto;
  margin-right: auto;
}


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

header {
  position: sticky;

  top: 0;

  z-index: 100;

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

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    var(--line);

  transition:
    box-shadow 0.25s ease;
}


.header-scroll {
  box-shadow:
    0 12px 30px
    rgba(8, 28, 60, 0.10);
}


/* =========================================================
   NAV
========================================================= */

.nav {
  min-height: 86px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
  display: flex;

  align-items: center;

  gap: 13px;

  font-weight: 800;

  font-size: 34px;

  letter-spacing: -1px;

  flex-shrink: 0;
}


.logo-img {
  width: 58px;

  height: 58px;

  object-fit: contain;

  flex-shrink: 0;
}


.logo span {
  line-height: 1;
}


.logo small {
  display: block;

  margin-top: 3px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.8px;

  line-height: 1.2;
}


/* =========================================================
   MENÚ PRINCIPAL
========================================================= */

nav ul {
  list-style: none;

  display: flex;

  align-items: center;

  gap: 36px;

  padding: 0;

  margin: 0;

  font-size: 14px;

  font-weight: 700;
}


nav a {
  position: relative;

  display: block;

  padding: 8px 0;
}


nav a::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -7px;

  width: 0;

  height: 3px;

  background:
    var(--blue-2);

  border-radius:
    999px;

  transition:
    width 0.25s ease;
}


nav a.active,
nav a:hover {
  color:
    var(--blue);
}


nav a.active::after,
nav a:hover::after {
  width: 100%;
}


/* =========================================================
   BOTONES GENERALES
========================================================= */

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    15px 24px;

  border-radius:
    13px;

  border:
    1px solid transparent;

  font-size:
    14px;

  font-weight:
    800;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}


.btn-primary {
  color:
    var(--white);

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue-2)
    );

  box-shadow:
    0 14px 30px
    rgba(6, 63, 145, 0.22);
}


.btn-primary:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 20px 40px
    rgba(6, 63, 145, 0.28);
}


.btn-outline {
  color:
    var(--blue);

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

  border-color:
    var(--blue);
}


.btn-outline:hover {
  color:
    var(--white);

  background:
    var(--blue);

  transform:
    translateY(-2px);
}


/* =========================================================
   SECCIONES GENERALES
========================================================= */

section {
  padding:
    82px 0;
}


.section-label {
  margin-bottom:
    12px;

  color:
    var(--blue);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.7px;

  text-transform:
    uppercase;
}


.section-title {
  margin: 0;

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

  line-height:
    1.08;

  letter-spacing:
    -1.5px;
}


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

section.hero {
  position: relative;

  min-height: 680px;

  padding: 0;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:
    var(--dark);
}


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

.hero-carousel {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  overflow: hidden;
}


/* =========================================================
   SLIDES
========================================================= */

.hero-slide {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 1s ease,
    visibility 1s ease;
}


.hero-slide.active {
  opacity: 1;

  visibility: visible;
}


/* =========================================================
   IMÁGENES Y VIDEOS DEL CARRUSEL
========================================================= */

.hero-slide img,
.hero-slide video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}

.hero-video {
  background: #071224;
}

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

.hero::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,

      rgba(244, 248, 255, 0.97) 0%,

      rgba(244, 248, 255, 0.88) 28%,

      rgba(244, 248, 255, 0.48) 48%,

      rgba(244, 248, 255, 0.12) 68%,

      rgba(244, 248, 255, 0.02) 100%
    );

  pointer-events: none;
}


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

.blueprint {
  position: absolute;

  inset:
    0 auto 0 0;

  width:
    44%;

  z-index:
    2;

  opacity:
    0.20;

  background-image:

    linear-gradient(
      rgba(6, 63, 145, 0.35)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(6, 63, 145, 0.35)
      1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      #000,
      transparent
    );

  pointer-events: none;
}


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

.hero > .container {
  position: relative;

  z-index: 4;
}


.hero-content {
  position: relative;

  width:
    min(
      590px,
      100%
    );

  padding:
    90px 0 150px;
}


.hero h1 {
  margin:
    0 0 28px;

  font-size:
    clamp(
      46px,
      5.2vw,
      76px
    );

  line-height:
    0.99;

  letter-spacing:
    -3px;

  color:
    var(--text);
}


.hero p {
  max-width:
    480px;

  margin:
    0 0 32px;

  padding-left:
    22px;

  border-left:
    5px solid
    var(--blue-2);

  font-size:
    20px;

  line-height:
    1.55;

  color:
    #263247;
}


.hero-actions {
  display: flex;

  gap:
    16px;

  flex-wrap:
    wrap;
}


/* =========================================================
   FLECHAS DEL CARRUSEL
========================================================= */

.carousel-btn {
  position: absolute;

  top: 50%;

  transform:
    translateY(-50%);

  z-index: 7;

  width:
    50px;

  height:
    50px;

  display: flex;

  align-items: center;

  justify-content: center;

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

  border-radius:
    50%;

  background:
    rgba(7, 18, 36, 0.38);

  backdrop-filter:
    blur(8px);

  color:
    var(--white);

  font-size:
    32px;

  line-height:
    1;

  cursor:
    pointer;

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


.carousel-btn:hover {
  background:
    var(--blue);

  border-color:
    var(--blue);

  transform:
    translateY(-50%)
    scale(1.08);
}


.carousel-prev {
  left:
    25px;
}


.carousel-next {
  right:
    25px;
}


/* =========================================================
   INDICADORES DEL CARRUSEL
========================================================= */

.carousel-dots {
  position: absolute;

  left: 50%;

  bottom:
    35px;

  transform:
    translateX(-50%);

  z-index:
    7;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.carousel-dot {
  width:
    10px;

  height:
    10px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

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

  cursor:
    pointer;

  transition:
    width 0.3s ease,
    background 0.3s ease;
}


.carousel-dot:hover {
  background:
    var(--white);
}


.carousel-dot.active {
  width:
    30px;

  border-radius:
    20px;

  background:
    var(--blue-2);
}


/* =========================================================
   BARRA DE VALORES
========================================================= */

.value-bar {
  position: relative;

  z-index:
    10;

  margin-top:
    -74px;
}


.value-card {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  overflow:
    hidden;

  background:
    var(--white);

  border:
    1px solid
    rgba(
      219,
      228,
      240,
      0.8
    );

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);
}


.value-item {
  padding:
    30px 22px;

  text-align:
    center;

  font-weight:
    800;

  border-right:
    1px solid
    var(--line);
}


.value-item:last-child {
  border-right:
    0;
}


.icon {
  display:
    block;

  margin-bottom:
    12px;

  font-size:
    38px;
}


/* =========================================================
   TRAYECTORIA
========================================================= */

.trayectoria {
  padding:
    90px 0;

  background:
    var(--white);
}


.trayectoria-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1.2fr;

  gap:
    60px;

  align-items:
    start;
}


.trayectoria-texto {
  color:
    var(--muted);

  font-size:
    18px;

  line-height:
    1.75;
}


.trayectoria-texto p {
  margin-top:
    0;
}


.trayectoria-texto p:last-child {
  margin-bottom:
    0;
}


/* =========================================================
   SERVICIOS
========================================================= */

#servicios {
  background:
    var(--white);
}


.services-grid {
  margin-top:
    34px;

  display:
    grid;

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

  gap:
    24px;
}


/* =========================================================
   TARJETAS SERVICIOS
========================================================= */

.service-card {
  overflow:
    hidden;

  background:
    var(--white);

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  box-shadow:
    var(--shadow-soft);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


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

  box-shadow:
    var(--shadow);
}


/* =========================================================
   IMÁGENES DE SERVICIOS

   IMPORTANTE:
   AHORA .service-img ES UNA ETIQUETA <img>
========================================================= */

.service-img {
  width:
    100%;

  height:
    210px;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  background:
    #e9eef5;
}


/* =========================================================
   TEXTO SERVICIOS
========================================================= */

.service-body {
  padding:
    22px;
}


.service-body h3 {
  margin:
    0 0 8px;

  font-size:
    20px;

  line-height:
    1.25;
}


.service-body p {
  margin:
    0;

  color:
    var(--muted);

  line-height:
    1.55;
}


/* =========================================================
   PROYECTOS
========================================================= */

.projects {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5f8fc 100%
    );
}


.project-layout {
  display:
    grid;

  grid-template-columns:
    280px 1fr;

  gap:
    36px;

  align-items:
    center;
}


.project-gallery {
  display:
    grid;

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

  gap:
    14px;
}


/* =========================================================
   TARJETAS PROYECTOS
========================================================= */

.project-card {
  position:
    relative;

  min-height:
    270px;

  overflow:
    hidden;

  border-radius:
    18px;

  background-color:
    #dfe6ef;

  background-position:
    center;

  background-size:
    cover;

  background-repeat:
    no-repeat;

  box-shadow:
    0 16px 40px
    rgba(8, 28, 60, 0.14);

  transition:
    transform 0.25s ease;
}


.project-card:hover {
  transform:
    scale(1.025);
}


.project-card::after {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(5, 14, 28, 0.88)
    );
}


/* =========================================================
   INFORMACIÓN PROYECTOS
========================================================= */

.project-info {
  position:
    absolute;

  left:
    18px;

  right:
    18px;

  bottom:
    18px;

  z-index:
    2;

  color:
    var(--white);
}


.project-info strong {
  display:
    block;

  margin-bottom:
    4px;

  font-size:
    16px;

  line-height:
    1.3;
}


.project-info span {
  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-size:
    13px;

  line-height:
    1.4;
}


/* =========================================================
   CONTACTO
========================================================= */

.cta {
  padding: 80px 0;
  background:
    linear-gradient(
      135deg,
      #071224 0%,
      #0b1d36 100%
    );
  color: var(--white);
  overflow: hidden;
}


/* GRILLA CONTACTO */

.cta-grid {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.8fr)
    minmax(0, 1.2fr);
  gap: 70px;
  align-items: center;
}


/* ÁREA DEL VIDEO */

.cta-video-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cta-video-area::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(11, 91, 211, 0.18);
  filter: blur(70px);
  pointer-events: none;
}


/* CONTENEDOR DEL VIDEO VERTICAL */

.cta-video-wrapper {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.cta-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #000;
}


/* CONTENIDO DE CONTACTO */

.cta-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 650px;
}

.cta-label {
  color: #6ca8ff;
}

.cta h2 {
  margin: 0 0 16px;
  font-size:
    clamp(
      38px,
      5vw,
      58px
    );
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--white);
}

.cta p {
  margin: 0;
  color:
    rgba(
      255,
      255,
      255,
      0.75
    );
  font-size: 21px;
  line-height: 1.55;
}


/* DATOS DE CONTACTO */

.contact-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 32px;
  color:
    rgba(
      255,
      255,
      255,
      0.90
    );
  font-size: 16px;
  font-weight: 700;
}

.contact-row span {
  display: block;
}


/* =========================================================
   FORMULARIO OPCIONAL
========================================================= */

form {
  display:
    grid;

  gap:
    14px;
}


input,
textarea,
select {
  width:
    100%;

  padding:
    15px 16px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  font:
    inherit;

  outline:
    none;

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


input:focus,
textarea:focus,
select:focus {
  border-color:
    var(--blue-2);

  box-shadow:
    0 0 0 4px
    rgba(11, 91, 211, 0.12);
}


textarea {
  min-height:
    130px;

  resize:
    vertical;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
  padding:
    26px 0;

  background:
    var(--dark-2);

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

  font-size:
    14px;
}


/* =========================================================
   ANIMACIONES JAVASCRIPT
========================================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(28px);

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


.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   MENÚ MOBILE
========================================================= */

.menu-mobile-btn {
  display:
    none;

  width:
    44px;

  height:
    44px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    var(--white);

  color:
    var(--text);

  font-size:
    24px;

  font-weight:
    800;

  cursor:
    pointer;
}


/* =========================================================
   AVISOS
========================================================= */

.aviso-web {
  position:
    fixed;

  left:
    50%;

  bottom:
    28px;

  z-index:
    200;

  padding:
    14px 22px;

  border-radius:
    14px;

  color:
    var(--white);

  font-weight:
    700;

  opacity:
    0;

  transform:
    translateX(-50%)
    translateY(30px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  box-shadow:
    0 16px 40px
    rgba(0, 0, 0, 0.20);
}


.aviso-web.mostrar {
  opacity:
    1;

  transform:
    translateX(-50%)
    translateY(0);
}


.aviso-web.ok {
  background:
    var(--blue);
}


.aviso-web.error {
  background:
    #b42318;
}


/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 920px) {


  /* HEADER */

  .nav {
    min-height:
      80px;
  }


  /* MENÚ MOBILE */

  nav {
    position:
      fixed;

    top:
      80px;

    left:
      0;

    right:
      0;

    background:
      var(--white);

    border-bottom:
      1px solid
      var(--line);

    box-shadow:
      0 20px 40px
      rgba(8, 28, 60, 0.12);

    transform:
      translateY(-130%);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      visibility 0.3s ease;
  }


  nav.nav-open {
    transform:
      translateY(0);

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;
  }


  nav ul {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    padding:
      18px 28px;
  }


  nav li {
    border-bottom:
      1px solid
      #edf2f7;
  }


  nav li:last-child {
    border-bottom:
      0;
  }


  nav a {
    padding:
      16px 0;
  }


  nav a::after {
    display:
      none;
  }


  .menu-mobile-btn {
    display:
      flex;
  }


  /* HERO */

  section.hero {
    min-height:
      620px;
  }


  .hero::before {
    background:
      linear-gradient(
        90deg,

        rgba(244, 248, 255, 0.96) 0%,

        rgba(244, 248, 255, 0.85) 55%,

        rgba(244, 248, 255, 0.22) 100%
      );
  }


  .hero-content {
    max-width:
      560px;
  }


  .hero h1 {
    font-size:
      clamp(
        42px,
        7vw,
        64px
      );
  }


  /* VALUE BAR */

  .value-card {
    grid-template-columns:
      1fr;
  }


  .value-item {
    border-right:
      0;

    border-bottom:
      1px solid
      var(--line);
  }


  .value-item:last-child {
    border-bottom:
      0;
  }


  /* TRAYECTORIA */

  .trayectoria-grid {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }


  /* SERVICIOS */

  .services-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* PROYECTOS */

  .project-layout {
    grid-template-columns:
      1fr;
  }


  .project-gallery {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* CONTACTO */

  .cta {
    padding: 70px 0;
  }

  .cta-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .cta-video-wrapper {
    width: min(100%, 300px);
  }

  .cta-content {
    max-width: none;
    text-align: center;
    align-items: center;
  }

  .contact-row {
    align-items: center;
  }

}



/* =========================================================
   CELULARES
========================================================= */

@media (max-width: 560px) {


  .container {
    width:
      min(
        calc(100% - 28px),
        1180px
      );
  }


  /* LOGO */

  .logo {
    gap:
      9px;

    font-size:
      24px;
  }


  .logo-img {
    width:
      44px;

    height:
      44px;
  }


  .logo small {
    max-width:
      225px;

    font-size:
      8px;

    letter-spacing:
      0.4px;
  }


  /* HERO */

  section.hero {
    min-height:
      610px;
  }


  .hero-content {
    width:
      100%;

    padding:
      70px 15px 130px 0;
  }


  .hero h1 {
    margin-bottom:
      24px;

    font-size:
      clamp(
        39px,
        12vw,
        54px
      );

    line-height:
      1;

    letter-spacing:
      -2px;
  }


  .hero p {
    max-width:
      390px;

    font-size:
      17px;
  }


  .hero-actions {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .hero-actions .btn {
    width:
      auto;
  }


  /* FLECHAS */

  .carousel-btn {
    width:
      40px;

    height:
      40px;

    font-size:
      26px;
  }


  .carousel-prev {
    left:
      9px;
  }


  .carousel-next {
    right:
      9px;
  }


  .carousel-dots {
    bottom:
      22px;
  }


  /* VALUE */

  .value-bar {
    margin-top:
      -45px;
  }


  .value-item {
    padding:
      24px 18px;
  }


  /* SECCIONES */

  section {
    padding:
      65px 0;
  }


  .trayectoria {
    padding:
      75px 0;
  }


  /* SERVICIOS */

  .services-grid {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .service-img {
    height:
      210px;
  }


  /* PROYECTOS */

  .project-gallery {
    grid-template-columns:
      1fr;
  }


  .project-card {
    min-height:
      300px;
  }


  /* CONTACTO */

  .cta {
    padding: 55px 0;
  }

  .cta-grid {
    gap: 35px;
  }

  .cta-video-wrapper {
    width: min(82vw, 280px);
    border-radius: 20px;
  }

  .cta-content {
    text-align: center;
    align-items: center;
  }

  .contact-row {
    margin-top: 25px;
    gap: 12px;
    font-size: 14px;
    align-items: center;
  }

  .cta h2 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .cta p {
    font-size: 18px;
  }

}

/* =========================================================
   ACCESIBILIDAD:
   REDUCE ANIMACIONES SI EL USUARIO LO PREFIERE
========================================================= */

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

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}


/* =========================================================
   TARJETAS DE SERVICIOS COMO ENLACES
========================================================= */

a.service-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.service-card-link {
  cursor: pointer;
}

.service-card-link:focus-visible {
  outline: 3px solid var(--blue-2);
  outline-offset: 4px;
}

.service-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
}

.service-more span {
  transition: transform 0.2s ease;
}

.service-card-link:hover .service-more span {
  transform: translateX(4px);
}