/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

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

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
}

.contact-selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 20px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  /* text-transform: capitalize; */
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #fe3f40;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button a {
  display: inline-block;
  background-color: #fe3f40;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #fe3f40;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* Language selector flags */
.header-area .main-nav .nav li.language-selector-menu .btn-group a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.language-flag {
  width: 16px;
  height: 11px;
  display: inline-block;
  border-radius: 2px;
  overflow: hidden;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fe3f40!important;
}

.background-header .nav li a.active {
  color: #fe3f40!important;
}

.header-area {
  background-color: #fafafa;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #03a4ed;
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.logo h4 span {
  color: #fe3f40;
}

.background-header .main-nav .logo h4 {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fe3f40!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fe3f40!important;
  opacity: 1;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  background-color: #03a4ed;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #fe3f40!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #fe3f40;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

/* Escalado sección #items */
#items .feature-box-content span {
  font-size: 21px !important;
}

#items .feature-box-icon i {
  font-size: 120% !important;
  margin-right: 7px;
}

/* Alineación más consistente (icono + texto) */
#items .feature-box-left-icon-middle {
  align-items: center !important;
}

#items .feature-box-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#items .feature-box-content {
  display: flex !important;
  align-items: center !important;
}

/* Evitar efectos de d-block en el span */
#items .feature-box-content span {
  display: inline-block !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  #items {
    display: none !important;
  }
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #fe3f40!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: visible !important;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 0 !important;
    top: 100% !important;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 0 !important;
    top: 100% !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #fe3f40!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fe3f40;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fe3f40;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 126px 0px 80px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/baner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 193px;
  height: 467px;
}

.main-banner:before {
  content: '';
  background-image: url(../images/baner-dec-right.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 98px;
  height: 290px;
}

.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #fe3f40;
  margin-bottom: 15px;
}

.main-banner .left-content h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
  /* dar profundidad al título */
  text-shadow: 5px 6px 10px rgba(0, 0, 0, 0.38);
}

.dark-mode .main-banner .left-content h2 {
  text-shadow: 5px 6px 10px rgba(0, 0, 0, 0.98);
}

.main-banner .left-content h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
  /* dar profundidad al título */
  text-shadow: 5px 6px 10px rgba(0, 0, 0, 0.38);
}

.main-banner .left-content h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: #fe3f40;
}

.main-banner .left-content p {
  margin: 20px 0px;
}

.main-banner .left-content .banner-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  background-color: transparent;
  border: 1px solid #03a4ed;
  box-shadow: 5px 9px 25px 4px rgba(0, 0, 0, 0.31);
  font-size: 21px;
  font-weight: 500;
  color: #03a4ed;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  outline: none;
}

.main-banner .left-content .banner-contact-link:hover {
  color: #03a4ed;
  background-color: rgba(3, 164, 237, 0.08);
}

.main-banner .left-content .banner-contact-link .banner-contact-icon {
  margin-left: 6px;
  font-size: 1.2em;
}

.dark-mode .main-banner .left-content .banner-contact-link {
  /* Estilo como el ejemplo: botón con degradado leve */
  background: linear-gradient(90deg, rgba(11, 61, 122, 0.95) 0%, rgba(3, 164, 237, 0.55) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.dark-mode .main-banner .left-content .banner-contact-link:hover {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(11, 61, 122, 1) 0%, rgba(3, 164, 237, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.24);
}

.dark-mode .main-banner .left-content .banner-contact-link .banner-contact-icon {
  color: #ffffff;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.main-banner .left-content form {
  margin-top: 30px;
  width: 470px;
  height: 66px;
  position: relative;
}

.main-banner .left-content form button {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #fe3f40;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
}

.main-banner .left-content form input {
  width: 470px;
  height: 66px;
  background-color: #03a4ed;
  border-radius: 33px;
  border: none;
  outline: none;
  padding: 0px 25px;
  color: #fff;
  letter-spacing: 0.25px;
  font-size: 15px;
  font-weight: 300;
}

.main-banner .left-content form input::placeholder {
  color: #fff;
}



/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/



.about-us {
  color: #2d2d2d;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.82), 0 3px 14px rgba(0, 0, 0, 0.35);
  background: transparent;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 8%,
    #000 18%,
    #000 82%,
    rgba(0, 0, 0, 0.45) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 8%,
    #000 18%,
    #000 82%,
    rgba(0, 0, 0, 0.45) 92%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  padding: 30px 0px 30px 0px;
}

.about-us::before {
  content: "";
  position: absolute;
  left: -50vw;
  top: 50%;
  width: min(210vw, 210vh);
  aspect-ratio: 1 / 1;
  background-image: url("../images/background-moles11.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  animation: about-bg-rotate 50s linear infinite;
  transform-origin: center center;
  z-index: 0;
  pointer-events: none;
}

@keyframes about-bg-rotate {
  from {
    transform: translate(0, -50%) rotate(0deg);
  }
  to {
    transform: translate(0, -50%) rotate(360deg);
  }
}

/* Rectangulo azul integrado para toda la seccion about */
.about-us .container {
  border-radius: 7px;
  padding: 24px 46px 10px 46px;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 97vw;
  max-width: 97vw;
  margin-left: auto;
  margin-right: auto;
}

.about-us .container::before {
  content: "";
  position: absolute;
  background: none;
  background-image: none;
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-us .container::before {
    transform: none;
  }
}

.about-us .container > .row {
  position: relative;
  z-index: 1;
}

.about-us .about-intro-pill {
  display: inline-block;
  background: #c4c9d1;
  color: #fff;
  text-shadow: none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.2rem;
  border-radius: 9999px;
  align-self: flex-start;
  margin-bottom: 1rem;
}

.about-tech-separator {
  position: relative;
  width: 97vw;
  max-width: 97vw;
  margin: 18px auto 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-tech-separator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(36, 48, 75, 0.25) 12%, rgba(36, 48, 75, 0.25) 88%, transparent 100%);
}

.about-tech-separator .about-tech-separator-btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(36, 48, 75, 0.25);
  background: #ffffff;
  color: #24304b;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  transition: all 0.2s ease;
}

.about-tech-separator .about-tech-separator-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  transform: translateY(-1px);
}

.technologies {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 97vw;
  max-width: 97vw;
  margin-top: 70px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 46px 28px;
  min-height: clamp(520px, 62vh, 720px);
  background: transparent;
  border-radius: 7px;
  border: none;
  box-shadow: none;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.technologies * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.technologies img {
  -webkit-user-drag: none;
}

/* Capas: z-1 fondo ya en .technologies, z-2 logos a altura completa, z-3 texto */
.technologies .technologies-top {
  position: relative;
  z-index: 3;
  pointer-events: none;
  padding: 0;
  flex-shrink: 0;
}

.technologies .technologies-top a,
.technologies .technologies-top button {
  pointer-events: auto;
}

/* Modo claro: halo claro sobre logos para texto oscuro */
.technologies .technologies-top h3,
.technologies .technologies-top h4 {
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.92),
    0 2px 12px rgba(255, 255, 255, 0.7);
}

.technologies .technologies-header {
  text-align: center;
  margin: 0 0 14px;
  padding: 0;
}

.technologies .technologies-header h3 {
  margin: 0;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.4;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 2px 10px rgba(0, 0, 0, 0.88),
    0 8px 28px rgba(0, 0, 0, 0.92),
    0 12px 40px rgba(0, 0, 0, 0.75);
  font-size: 3rem;
}

.technologies .technologies-intro {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto 0;
  padding: 0;
}

.technologies .technologies-intro h4 {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 3px 14px rgba(0, 0, 0, 0.92),
    0 0 26px rgba(0, 0, 0, 0.82),
    0 10px 38px rgba(0, 0, 0, 0.92);
}

.technologies .technologies-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  /* Arriba: mismo fundido que antes. Abajo: fundido más largo y suave (evita corte brusco). */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 10%,
    #000 22%,
    #000 55%,
    rgba(0, 0, 0, 0.88) 64%,
    rgba(0, 0, 0, 0.62) 74%,
    rgba(0, 0, 0, 0.38) 84%,
    rgba(0, 0, 0, 0.16) 92%,
    rgba(0, 0, 0, 0.05) 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 10%,
    #000 22%,
    #000 55%,
    rgba(0, 0, 0, 0.88) 64%,
    rgba(0, 0, 0, 0.62) 74%,
    rgba(0, 0, 0, 0.38) 84%,
    rgba(0, 0, 0, 0.16) 92%,
    rgba(0, 0, 0, 0.05) 97%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.technologies .technologies-columns-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.technologies .technologies-column {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

@keyframes technologies-marquee-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}

.technologies .technologies-column-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  animation: technologies-marquee-up 38s linear infinite;
  will-change: transform;
}

.technologies .technologies-column:nth-child(1) .technologies-column-track {
  animation-duration: 36s;
}

.technologies .technologies-column:nth-child(2) .technologies-column-track {
  animation-duration: 44s;
}

.technologies .technologies-column:nth-child(3) .technologies-column-track {
  animation-duration: 32s;
}

.technologies .technologies-column:nth-child(4) .technologies-column-track {
  animation-duration: 48s;
}

.technologies .technologies-column:nth-child(5) .technologies-column-track {
  animation-duration: 40s;
}

.technologies .technologies-column:nth-child(6) .technologies-column-track {
  animation-duration: 34s;
}

.technologies .technology-item {
  width: 100%;
  height: 120px;
  min-height: 120px;
  border-radius: 12px;
  background: #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.technologies .technology-item img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Pantallas grandes: ~15% más altura que el clamp base */
@media (min-width: 1200px) {
  .technologies {
    min-height: clamp(650px, 71.3vh, 828px);
  }
}

@media (max-width: 1199px) {
  .technologies .technologies-columns-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .about-us {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .about-tech-separator {
    margin: 12px auto 8px;
  }

  .about-tech-separator .about-tech-separator-btn {
    padding: 7px 14px;
    font-size: 0.88rem;
  }

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

  .technologies .technologies-stage {
    padding: 0 0 16px;
  }

  .technologies {
    min-height: clamp(460px, 70vh, 620px);
  }
}

@media (max-width: 576px) {
  .technologies .technologies-columns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* En mobile queremos solo 2 columnas visibles (evita nuevas "filas" y líneas horizontales). */
  .technologies .technologies-column:nth-child(n + 3) {
    display: none;
  }

  .technologies .technology-item {
    height: 110px;
    min-height: 110px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .technologies .technologies-column-track {
    animation: none;
  }
}

.about-us .about-intro-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: inherit;
  text-shadow: inherit;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.about-us .about-intro-heading-highlight,
.contact-us .about-intro-heading-highlight {
  display: inline;
  background-image: linear-gradient(#58bdf7, #58bdf7);
  background-size: 100% 8px;
  background-position: 0 80%;
  background-repeat: no-repeat;
}

.about-us .about-intro-accent {
  display: block;
  width: 60px;
  height: 3px;
  background: transparent;
  margin-bottom: 1rem;
}

.about-us .about-intro-desc {
  color: inherit;
  text-shadow: inherit;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.95;
}

/* Nuevo maquetado simplificado de about */
.about-us .about-card {
  width: 97vw;
  max-width: 97vw;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.about-us .about-card > .row {
  width: 100%;
}

.about-us .about-intro {
  max-width: 95%;
  margin-top: -8px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: 14px 0 10px 3vw;
}

/* Decoracion de fondo en about sin afectar el alto del recuadro */
.about-us .about-intro .left-image-rotate {
  display: none;
}

.about-us .about-intro .left-image-rotate img {
  display: none;
}

.about-us .about-intro > *:not(.left-image-rotate) {
  position: relative;
  z-index: 1;
}

.about-us .about-features {
  margin: 0;
}

.about-us .about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.about-us .about-feature-item .icon {
  color: inherit;
  font-size: 2rem;
  line-height: 1;
  margin-top: 3px;
}

.about-us .about-feature-item h3 {
  margin: 0;
}

.about-us .about-feature-item .right-text h4 {
  color: inherit;
  text-shadow: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.1;
}

.about-us .about-feature-item .right-text p {
  color: inherit;
  text-shadow: inherit;
  margin: 0;
  line-height: 1.4;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  margin-top: 120px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 100px 0 70px 0;
  position: relative;
  overflow: hidden;
}

.our-services .container {
  width: 97vw;
  max-width: 97vw;
  margin-left: auto;
  margin-right: auto;
}

.our-services .section-heading h2,
.our-services .section-heading h2 em,
.our-services .section-heading h2 span {
  font-size: clamp(2.3rem, 3.2vw, 3.2rem);
  line-height: 1.15;
  text-shadow:
    0 3px 2px rgba(0, 0, 0, 0.0),
    0 10px 28px rgba(0, 0, 0, 0.3);
}

.our-services .section-heading p {
  font-size: clamp(1.25rem, 1.5vw, 1.6rem);
  line-height: 1.55;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.34),
    0 8px 22px rgba(0, 0, 0, 0.24);
}

.our-services::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/background-dots-world.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  filter: blur(0px);
  pointer-events: none;
  z-index: 0;
}

.our-services > .container {
  position: relative;
  z-index: 1;
}

.our-services .section-heading p {
  margin-top: 14px;
  margin-bottom: 28px;
}

.our-services .services-cards-row {
  row-gap: 20px;
}

.our-services .service-card {
  height: 100%;
  padding: 24px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px 20px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.our-services .service-card h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 8px 0;
}

.our-services .service-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e5e7eb;
  flex-shrink: 0;
}

.our-services .service-card-num i {
  font-size: 1.1rem;
  font-weight: 900;
  color: #374151;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.our-services .service-card p {
  margin: 0;
  line-height: 1.5;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  margin-top: 70px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Desktop: formulario centrado en altura respecto al texto; ligero margen para bajarlo un poco */
@media (min-width: 992px) {
  .contact-us .container > .row {
    align-items: center;
  }

  .contact-us form#contact {
    margin-top: 1rem;
  }
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #24304b;
  font-size: clamp(1.41rem, 2.76vw, 2.61rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}

.contact-us .section-heading p {
  margin-top: 0;
  margin-bottom: 1.9rem;
  color: #6b7280;
  font-size: clamp(0.85rem, 0.93vw, 1.08rem);
  line-height: 1.65;
  font-weight: 400;
}

.phone-info {
  margin-top: 1.6rem;
}

.email-info {
  margin-top: 1.05rem;
}

.phone-info h4 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  color: #24304b;
  margin: 0;
}

.email-info h4 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  color: #24304b;
  margin: 0;
}

.phone-info h4 > span,
.email-info h4 > span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.42rem;
}

.phone-info h4 span i,
.email-info h4 span i {
  width: 1.9rem;
  text-align: center;
  color: #111827;
  font-size: 1.55rem;
  line-height: 1;
}

.email-info .contact-email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
}

.email-info .contact-email-copy:focus-visible {
  outline: 2px solid #03a4ed;
  outline-offset: 2px;
  border-radius: 4px;
}

.phone-info h4 .contact-selectable,
.email-info h4 .contact-selectable {
  color: #374151;
  font-size: clamp(1.35rem, 1.75vw, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

form#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

form#contact .contact-dec img {
  max-width: 178px;
}

form#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 12px;
}

form#contact fieldset.contact-field {
  position: relative;
}

form#contact input {
  width: 100%;
  height: 56px;
  border-radius: 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #334155;
  outline: none;
  font-size: 1.05rem;
  font-weight: 400;
  color: #374151;
  padding: 0 2.2rem 0 0;
  margin-bottom: 22px;
}

form#contact input::placeholder {
  color: #6b7280;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 150px;
  height: 150px;
  border-radius: 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #334155;
  outline: none;
  font-size: 1.05rem;
  font-weight: 400;
  color: #374151;
  padding: 14px 2.2rem 14px 0;
  margin-bottom: 24px;
  resize: vertical;
}

form#contact textarea::placeholder {
  color: #6b7280;
}

form#contact .contact-field-icon {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #334155;
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
}

form#contact fieldset.contact-field--textarea .contact-field-icon {
  top: 22px;
  transform: none;
}

form#contact button {
  display: inline-block;
  background-color: #25324f;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  text-transform: none;
  padding: 12px 30px;
  border-radius: 6px;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 8px 18px rgba(21, 32, 55, 0.28);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

form#contact button:hover {
  background-color: #1d2740;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.14),
    0 10px 22px rgba(21, 32, 55, 0.32);
}

form#contact button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.1);
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer p {
  text-align: center;
  margin: 30px 0px 45px 0px;
}

footer p a {
  color: #fe3f40;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1645px) {
  form#contact .contact-dec {
    display: none;
  }
  .items-block {
    padding: 30px 0 10px 0;
  }
}

@media (max-width: 992px) {
  .items-block {
    padding: 30px 0 10px 0;
  }
  .main-banner {
    padding-top: 2em;
  }
  .main-banner .left-content {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .main-banner:after {
    top: 76px;
    z-index: -1;
  }
  .main-banner .left-content form,
  .main-banner .left-content form input {
    width: 100%!important;
  }
  .about-us {
    position: relative;
    background-image: none;
    padding: 0px;
  }
  .about-us .container {
    border-radius: 10px;
    padding: 2.5rem 26px 2.5rem 26px;
  }
  .about-us .about-card {
    min-height: auto;
    display: block;
  }
  .about-us .about-intro {
    max-width: 100%;
  }
  .technologies {
    border-radius: 10px;
    padding: 0 26px 2.5rem 26px;
  }
  .about-us .about-feature-item .icon {
    color: inherit;
    font-size: 2rem;
    line-height: 1;
    margin-top: 3px;
  }
  .about-us .about-feature-item .right-text h4 {
    font-size: 1.3rem;
  }
  .our-services .service-card h4 {
    font-size: 1.3rem;
  }

  .our-services .service-card-num {
    width: 2.25rem;
    height: 2.25rem;
  }

  .our-services .service-card-num i {
    font-size: 0.95rem;
  }
  .about-us .about-feature-item .right-text p {
    line-height: 1.5;
  }
  .our-services {
    margin-top: 70px;
  }
  .our-services .section-heading h2,
  .our-services .section-heading p {
    margin-right: 0px;
    text-align: center;
  }
  .our-services .service-card {
    padding: 20px;
  }
  .contact-us {
    margin-top: 60px;
    padding: 60px 0px 10px;
  }
  .contact-us .section-heading {
    text-align: center;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 30px;
  }
  form#contact .contact-dec {
    display: none;
  }
  footer p {
    margin: 15px 0px 30px 0px;
  }
}

@media (max-width: 767px) {
  .main-banner {
    padding-bottom: 20px;
  }

  .phone-info h4 span {
    display: block;
    margin-top: 15px;
  }

  .email-info h4 > span {
    justify-content: center;
    width: 100%;
  }

  .email-info h4 .contact-selectable {
    text-align: center;
  }
}

/* 
---------------------------------------------
Dark mode toggle
--------------------------------------------- 
*/

.theme-toggle-item {
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-right: 10px;
}

.theme-toggle-item button {
  border: none;
  background: transparent;
  color: #2a2a2a;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-item button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .theme-toggle-item button {
  color: #f5f5f5;
}

.dark-mode .theme-toggle-item button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* 
---------------------------------------------
Dark mode styles
--------------------------------------------- 
*/

.dark-mode {
  background-color: #181d24;
  color: #e5e7eb;
}

.dark-mode p {
  color: #e5e7eb;
}

.dark-mode .header-area {
  background-color: #181d24;
}

.dark-mode .background-header {
  background-color: #181d24 !important;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .header-area .main-nav .nav li a,
.dark-mode .background-header .main-nav .nav li a {
  color: #f1f5f9 !important;
}

.dark-mode .header-area .main-nav .nav li:hover a,
.dark-mode .header-area .main-nav .nav li a.active,
.dark-mode .background-header .main-nav .nav li:hover a,
.dark-mode .background-header .nav li a.active {
  color: #38bdf8 !important;
}

/* Mantener el texto del botón Contacto siempre claro también en dark mode */
.dark-mode .header-area .main-nav .nav li .main-red-button a {
  color: #ffffff !important;
}

.dark-mode .header-area .main-nav .nav li .main-red-button a:hover {
  color: #ffffff !important;
}

.dark-mode .main-banner .left-content h2 {
  color: #f1f5f9;
}

.dark-mode .main-banner .left-content h6,
.dark-mode .main-banner .left-content p {
  color: #e2e8f0;
}

/* Títulos de sección (services.title, etc.) */
.dark-mode .section-heading h2,
.dark-mode .section-heading h2 em,
.dark-mode .section-heading h2 span,
.dark-mode .our-services .section-heading h2 {
  color: #f1f5f9 !important;
}

.dark-mode .section-heading p,
.dark-mode .our-services .section-heading p,
.dark-mode .our-services .service-card h4,
.dark-mode .our-services .service-card p {
  color: #e2e8f0;
}

.dark-mode .our-services .section-heading h2,
.dark-mode .our-services .section-heading h2 em,
.dark-mode .our-services .section-heading h2 span {
  text-shadow:
    0 0 65px rgba(0, 0, 0, 0.92),
    0 16px 38px rgba(0, 0, 0, 0.78);
}

.dark-mode .our-services .section-heading p {
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.84),
    0 12px 30px rgba(0, 0, 0, 0.68);
}

.dark-mode .about-us {
  /* Mantener completamente transparente el fondo detrás del PNG */
  background-color: transparent;
  color: #e5e7eb;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85), 0 3px 14px rgba(0, 0, 0, 0.65);
}

.dark-mode .about-us .about-intro-pill {
  background: #4b5563;
  color: #f8fafc;
  border-color: #4b5563;
}

.dark-mode .about-tech-separator::before {
  background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.28) 12%, rgba(148, 163, 184, 0.28) 88%, transparent 100%);
}

.dark-mode .about-tech-separator .about-tech-separator-btn {
  background: #25324f;
  color: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.dark-mode .about-tech-separator .about-tech-separator-btn:hover {
  background: #1d2740;
  color: #ffffff;
}

.dark-mode .technologies {
  background: transparent;
  border: none;
  box-shadow: none;
}

.dark-mode .technologies .technologies-intro h4 {
  color: #ffffff;
}

.dark-mode .our-services {
  background-color: transparent;
}

.dark-mode .our-services::before {
  background-image: url("../images/background-dots-world-clear.png");
  background-blend-mode: normal;
  filter: blur(2px);
}

.dark-mode .our-services .service-card {
  background: #1f2937;
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.dark-mode .our-services .service-card-num {
  background: #cbd5e1;
}

.dark-mode .our-services .service-card-num i {
  color: #1f2937;
}

.dark-mode .contact-us {
  background-color: #181d24;
}

.dark-mode .contact-us .phone-info h4,
.dark-mode .contact-us .email-info h4,
.dark-mode .contact-us .phone-info h4 .contact-selectable,
.dark-mode .contact-us .email-info h4 .contact-selectable {
  color: #e5e7eb;
}

.dark-mode .contact-us .phone-info h4 span i,
.dark-mode .contact-us .email-info h4 span i {
  color: #f8fafc;
}

.dark-mode form#contact {
  background-color: #181d24;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
}

.dark-mode form#contact input,
.dark-mode form#contact textarea {
  color: #e5e7eb;
}

/* Mantener colores en autofill (Chrome/Edge) */
.dark-mode form#contact input:-webkit-autofill,
.dark-mode form#contact input:-webkit-autofill:hover,
.dark-mode form#contact input:-webkit-autofill:focus,
.dark-mode form#contact textarea:-webkit-autofill,
.dark-mode form#contact textarea:-webkit-autofill:hover,
.dark-mode form#contact textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #e5e7eb;
  caret-color: #e5e7eb;
  -webkit-box-shadow: 0 0 0px 1000px #7f7f7f inset;
  box-shadow: 0 0 0px 1000px #7f7f7f inset;
  transition: background-color 9999s ease-out 0s;
}

.dark-mode form#contact input::placeholder,
.dark-mode form#contact textarea::placeholder {
  color: #caced5;
}

.dark-mode footer p,
.dark-mode footer p a {
  color: #9ca3af;
}

.dark-mode .main-banner:before,
.dark-mode .main-banner:after {
  opacity: 0.2;
}

@media (max-width: 767px) {
  .dark-mode .header-area .main-nav .nav {
    background-color: #181d24;
  }
  .dark-mode .header-area .main-nav .nav li {
    background: #181d24;
    border-bottom-color: #1e293b;
  }
  .dark-mode .header-area .main-nav .nav li a {
    background: #181d24 !important;
    color: #f1f5f9 !important;
  }
  .dark-mode .header-area .main-nav .nav li a:hover {
    background: #1e293b !important;
    color: #38bdf8 !important;
  }

  /* Botón hamburguesa (mobile) en dark mode: líneas blancas */
  .dark-mode .header-area .main-nav .menu-trigger span,
  .dark-mode .header-area .main-nav .menu-trigger span:before,
  .dark-mode .header-area .main-nav .menu-trigger span:after {
    background-color: #ffffff !important;
  }

  /* En estado "active" queremos que la línea central siga oculta */
  .dark-mode .header-area .main-nav .menu-trigger.active span {
    background-color: transparent !important;
  }

  .items-block {
    padding: 30px 0 10px 0;
  }
}