/**
* Template Name: UpConstruction
* Template URL: https://bootstrapmade.com/upconstruction-bootstrap-construction-website-template/
* Updated: May 10 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Lato", sans-serif;
  --heading-font: "Lato", sans-serif;
  --nav-font: "Lato", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. main:#364d59 */
  --default-color: #364d59;

  /* Heading Color - This color is used for titles, headings and secondary elements. main:#52565e */
  --heading-color: #52565e;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #183B6D;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: rgba(255, 255, 255, 0.55);

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #ffffff;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #183B6D;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #183B6D;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo img {
  max-height: 40px;
  margin-right: 15px; /* Ajusta el margen izquierdo */
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

/* Ajustes para Contenedor de Header */
.header .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px; /* Padding consistente para todos los dispositivos */
}

/* Media Queries Revisadas */
@media (max-width: 1300px) {
  .header .container-fluid {
    padding: 0 5px; /* Reducir el padding para dispositivos medianos */
  }

  .header .logo img {
    max-height: 35px; /* Ajustar el tamaño del logo */
  }

  .header nav a {
    font-size: 16px; /* Reducir el tamaño de la fuente de los enlaces para mejor adaptación */
  }
}

@media (max-width: 1200px) {
  .header .container-fluid {
    padding: 0 10px; /* Aún menos padding para dispositivos menores */
  }

  .header .logo img {
    max-height: 35px; /* Ajustar el tamaño del logo */
  }

  .header nav a {
    font-size: 15px; /* Reducir el tamaño de la fuente de los enlaces para mejor adaptación */
  }
}

@media (max-width: 992px) {
  .header .logo img {
    max-height: 30px;
  }

  .header nav a {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .header .logo img {
    max-height: 25px;
  }

  .header nav a {
    font-size: 12px;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(24, 59, 109, 1);
  --heading-color: #ffffff;
  --nav-color: #ffffff;
  --nav-hover-color: #ffffff;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    text-transform: none;
    font-size: 18px;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0%;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 100px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Adjustments for larger screens */
@media (min-width: 1920px) {
  .navmenu>ul>li {
    padding: 20px 18px;
  }

  .navmenu a,
  .navmenu a:focus {
    font-size: 22px;
  }
}

@media (min-width: 2560px) {
  .navmenu>ul>li {
    padding: 25px 22px;
  }

  .navmenu a,
  .navmenu a:focus {
    font-size: 24px;
  }
}

/* -------------------------- Mobile Navigation -------------------------- */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background: url("../img/footer/footer.jpg") top center no-repeat;
  background-size: cover;
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .container {
  position: relative;
}

.footer:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  font-size: 13px;
}

.custom-link {
  color: #ffffff; /* Cambia este valor al color que prefieras */
  text-decoration: none; /* Opcional: para quitar el subrayado */
}

.custom-link:hover {
  color: #183B6D; /* Color al pasar el cursor */
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--nav-hover-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Hace que ocupe toda la altura de la ventana */
  position: relative;
  display: flex;
  align-items: flex-end; /* Alinea verticalmente al final */
  justify-content: flex-start; /* Alinea horizontalmente al inicio */
  padding: 50px; /* Añade padding para separarlo del borde */
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 65%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 8vw; /* Tamaño de fuente en relación al ancho de la ventana */
  font-weight: 500;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .page-title h1 {
    font-size: 8vw; /* Ajusta el tamaño de fuente para pantallas más pequeñas */
  }
}

@media (max-width: 576px) {
  .page-title h1 {
    font-size: 10vw; /* Ajusta el tamaño de fuente para pantallas aún más pequeñas */
  }
}

@media (min-width: 1920px) {
  .page-title h1 {
    font-size: 7vw; /* Ajusta el tamaño de fuente para pantallas de 32 pulgadas */
  }
}

@media (min-width: 2560px) {
  .page-title h1 {
    font-size: 7vw; /* Ajusta el tamaño de fuente para pantallas de 32 pulgadas */
  }
}

/* Ajustes específicos para la clase project-title */
.project-title {
  font-size: 7vw; /* Tamaño base del título del proyecto */
  white-space: nowrap; /* Evita que el título se divida en varias líneas */
}

@media (min-width: 2560px) {
  .project-title {
    font-size: 4vw; /* Reduce el tamaño de fuente para pantallas de 32 pulgadas */
    margin-right: 10vw; /* Ajusta el margen derecho para alinear el título */
  }
}


.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 30px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

section,
.section-mg {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section-mg {
    scroll-margin-top: 76px;
  }
}

.custom-bg {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%); /* Cambia este color por el que desees */
}

section,
.projects {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .projects {
    scroll-margin-top: 76px;
  }
}

/* Estilo específico para la subpágina de contacto */
.contact-page {
  padding-top: 0; /* Elimina el padding superior */
  padding-bottom: 20px; /* Ajusta el padding inferior */
}

/* Estilo específico para el primer elemento después de la imagen */
.contact-page .first-element {
  padding-top: 20px; /* Ajusta el padding superior para mantener espacio entre la imagen y el primer elemento */
}

@media (max-width: 2560px) {
  .contact-page .first-element {
    padding-top: 30px; /* Ajuste de padding para pantallas medianas */
  }
}

@media (max-width: 1199px) {
  .contact-page .first-element {
    padding-top: 20px; /* Ajuste de padding para pantallas medianas */
  }
}

@media (max-width: 992px) {
  .contact-page .first-element {
    padding-top: 15px; /* Ajuste de padding para pantallas pequeñas */
  }
}

@media (max-width: 768px) {
  .contact-page .first-element {
    padding-top: 10px; /* Ajuste de padding para tablets */
  }
}

@media (max-width: 576px) {
  .contact-page .first-element {
    padding-top: 5px; /* Ajuste de padding para pantallas de móviles */
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
/* Estilo global de títulos */
.section-title {
  text-align: center;
  padding-bottom: 25px;
  position: relative;
}

.section-title h2 {
  font-size: clamp(20px, 3.5vw, 26px); /* Tamaño mínimo 24px, tamaño flexible 3.5vw, tamaño máximo 56px */
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: clamp(30px, 10vw, 60px); /* Ajusta la longitud de la línea de manera responsiva */
  height: clamp(3px, 0.5vw, 4px); /* Ajusta la altura de la línea de manera responsiva */
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 clamp(10px, 2vw, 15px) clamp(5px, 1vw, 10px) 0;
}

.section-title h2:after {
  margin: 0 0 clamp(5px, 1vw, 10px) clamp(10px, 2vw, 15px);
}

.section-title p {
  margin-bottom: 0;
  font-size: clamp(16px, 2vw, 24px); /* Tamaño mínimo 16px, tamaño flexible 2vw, tamaño máximo 32px */
}

/* Estilo básico para párrafos */

/* Texto responsivo content */
.content .responsive-text {
  font-size: clamp(16px, 1.5vw, 24px); /* Tamaño mínimo 16px, tamaño flexible 1.5vw, tamaño máximo 24px */
  text-align: justify;
}

/* Texto responsivo */
.responsive-text {
  font-size: clamp(16px, 2vw, 32px); /* Tamaño mínimo 16px, tamaño flexible 2vw, tamaño máximo 32px */
  text-align: center;
}

/* Texto más pequeño */
.small-text {
  font-size: clamp(12px, 1.5vw, 24px); /* Tamaño mínimo 12px, tamaño flexible 1.5vw, tamaño máximo 18px */
  text-align: justify;
}

/* Ajustes específicos para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
  .responsive-text {
    font-size: clamp(14px, 2.5vw, 28px); /* Tamaño mínimo 14px, tamaño flexible 2.5vw, tamaño máximo 28px */
  }
  .small-text {
    font-size: clamp(10px, 1.5vw, 16px); /* Tamaño mínimo 10px, tamaño flexible 1.5vw, tamaño máximo 16px */
  }
}

@media (max-width: 992px) {
  .responsive-text {
    font-size: clamp(12px, 3vw, 24px); /* Tamaño mínimo 12px, tamaño flexible 3vw, tamaño máximo 24px */
  }
  .small-text {
    font-size: clamp(8px, 1.5vw, 14px); /* Tamaño mínimo 8px, tamaño flexible 1.5vw, tamaño máximo 14px */
  }
}

@media (max-width: 768px) {
  .responsive-text {
    font-size: clamp(10px, 4vw, 20px); /* Tamaño mínimo 10px, tamaño flexible 4vw, tamaño máximo 20px */
  }
  .small-text {
    font-size: clamp(6px, 2.5vw, 12px); /* Tamaño mínimo 6px, tamaño flexible 2.5vw, tamaño máximo 12px */
  }
}

@media (max-width: 576px) {
  .responsive-text {
    font-size: clamp(8px, 5vw, 18px); /* Tamaño mínimo 8px, tamaño flexible 5vw, tamaño máximo 18px */
  }
  .small-text {
    font-size: clamp(4px, 3vw, 10px); /* Tamaño mínimo 4px, tamaño flexible 3vw, tamaño máximo 10px */
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: left;
  justify-content: left;
  overflow: hidden;
}

.hero .info {
  position: relative;
  inset: 0;
  z-index: 3;
  padding: 685px 0 60px 0;
}


@media (max-width: 768px),
(max-height: 480px) {
  .hero .info {
    padding: 100px 50px 60px 50px;
  }
}

/* .hero .info h2 {
  margin-bottom: 0;
  padding-bottom: 30px;
  font-size: 100px;
  font-weight: 700;
  position: absolute;
  bottom: 0;
  left: 150%;
} */

.hero .info h2 {
  margin-bottom: 0;
  padding-bottom: 30px;
  font-size: 7vw; /* Ajusta el tamaño del texto en función del ancho de la pantalla */
  font-weight: 700;
  position: absolute;
  bottom: 0;
  left: 3vw; /* Ajusta la posición a la izquierda en función del ancho de la pantalla */
}

.hero .info h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50vw; /* Ajusta el ancho de la línea en función del ancho de la pantalla */
  height: 4px;
  background: var(--accent-color);
  left: 0;
  right: 7;
  bottom: 7%;
  margin: auto;
}

@media (max-width: 1200px) {
  .hero .info h2 {
    font-size: 8vw; /* Ajusta el tamaño del texto en pantallas medianas */
    left: 3vw;
  }
}

@media (max-width: 1024px) {
  .hero .info h2 {
    font-size: 10vw; /* Ajusta el tamaño del texto en pantallas de tamaño mediano */
    left: 4vw;
  }
  .hero .info h2:after {
    width: 72vw; /* Ajusta el ancho de la línea para pantallas pequeñas */
  }
}

@media (max-width: 992px) {
  .hero .info h2 {
    font-size: 10vw; /* Ajusta el tamaño del texto en pantallas de tamaño mediano */
    left: 4vw;
  }
  .hero .info h2:after {
    width: 72vw; /* Ajusta el ancho de la línea para pantallas pequeñas */
  }
}

@media (max-width: 768px) {
  .hero .info h2 {
    font-size: 11vw; /* Ajusta el tamaño del texto en pantallas más pequeñas */
    left: 5vw;
  }
  .hero .info h2:after {
    width: 79vw; /* Ajusta el ancho de la línea para pantallas pequeñas */
  }
}

@media (max-width: 576px) {
  .hero .info h2 {
    font-size: 12vw; /* Ajusta el tamaño del texto en pantallas aún más pequeñas */
    left: 5vw;
  }
  .hero .info h2:after {
    width: 87vw; /* Ajusta el ancho de la línea para pantallas aún más pequeñas */
  }
}

@media (max-width: 480px) {
  .hero .info h2 {
    font-size: 12vw; /* Ajusta el tamaño del texto en pantallas muy pequeñas */
    left: 5vw;
  }
  .hero .info h2:after {
    width: 88vw; /* Ajusta el ancho de la línea para pantallas muy pequeñas */
  }
}

@media (min-width: 1440px) {
  .hero .info h2:after {
    width: 50vw; /* Ancho para pantallas muy grandes */
  }
}

@media (min-width: 1920px) {
  .hero .info h2 {
    font-size: 6vw; /* Reduce el tamaño del texto en pantallas de 32 pulgadas */
    left: 8vw;
    padding-bottom: 70px;
  }
  .hero .info h2:after {
    width: 43vw; /* Ancho para pantallas de 32 pulgadas */
    bottom: 15%;
  }
}

@media (min-width: 2560px) {
  .hero .info h2:after {
    width: 43vw; /* Ancho para pantallas aún más grandes */
  }
}


/* .hero .info .btn-get-started {
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--accent-color);
} */

.hero .info .btn-get-started:hover {
  background: var(--accent-color);
}

.hero .carousel {
  inset: 0;
  position: absolute;
  overflow: hidden;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition-duration: 0.4s;
}

.hero .carousel-item .video-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .carousel-item::before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 60%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-control-prev {
  justify-content: start;
}

@media (min-width: 640px) {
  .hero .carousel-control-prev {
    padding-left: 15px;
  }
}

.hero .carousel-control-next {
  justify-content: end;
}

@media (min-width: 640px) {
  .hero .carousel-control-next {
    padding-right: 15px;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 26px;
  line-height: 0;
  background: color-mix(in srgb, var(--default-color), transparent 80%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 3;
  transition: 0.3s;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

/*--------------------------------------------------------------
# Get Started Section
--------------------------------------------------------------*/
.get-started {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.get-started .content {
  padding: 30px 0;
}

.get-started .content h3 {
  font-size: 40px; /* 36px */
  font-weight: 600;
  margin-bottom: 25px;
  padding-bottom: 25px;
  position: relative;
}

.get-started .content h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

/* .get-started .content p {
  font-size: 18px; 14px
} */

.get-started .php-email-form {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 30px;
  height: 100%;
}

@media (max-width: 575px) {
  .get-started .php-email-form {
    padding: 20px;
  }
}

.get-started .php-email-form h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.get-started .php-email-form p {
  font-size: 14px;
  margin-bottom: 20px;
}

.get-started .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.get-started .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.get-started .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.get-started .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.get-started .php-email-form input[type=text],
.get-started .php-email-form input[type=email],
.get-started .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.get-started .php-email-form input[type=text]:focus,
.get-started .php-email-form input[type=email]:focus,
.get-started .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.get-started .php-email-form input[type=text]::placeholder,
.get-started .php-email-form input[type=email]::placeholder,
.get-started .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.get-started .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.get-started .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# SVG Map Section
--------------------------------------------------------------*/

/* Estilos para el iframe Map responsivo */
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background-color: color-mix(in srgb, var(--default-color), transparent 100%); /* Fondo por defecto */
  border-radius: 0px; /* Opcional: bordes redondeados */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  Opcional: sombra  */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .iframe-container {
    padding-bottom: 81%; /* Ajusta la relación de aspecto para pantallas más pequeñas */
  }
}

/* Ajustes específicos para iPad Mini (768px - 1024px) */
@media (min-width: 769px) and (max-width: 820px) {
  .iframe-container {
    padding-bottom: 70%; /* Ajusta la relación de aspecto para iPad Mini */
  }
}

/* Ajustes específicos para iPad Air (820px - 834px) */
@media (min-width: 821px) and (max-width: 834px) {
  .iframe-container {
    padding-bottom: 65%; /* Ajusta la relación de aspecto para iPad Air */
  }
}

/* Ajustes específicos para pantallas medianas (835px - 991px) */
@media (min-width: 835px) and (max-width: 991px) {
  .iframe-container {
    padding-bottom: 81%; /* Ajusta la relación de aspecto para pantallas medianas */
  }
}

/* Ajustes específicos para pantallas medianas grandes (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .iframe-container {
    padding-bottom: 82%; /* Ajusta la relación de aspecto para pantallas medianas grandes */
  }
}

/* Ajustes específicos para pantallas grandes (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .iframe-container {
    padding-bottom: 90%; /* Ajusta la relación de aspecto para pantallas grandes */
  }
}

/* Ajustes específicos para pantallas extra grandes (1440px en adelante) */
@media (min-width: 1440px) {
  .iframe-container {
    padding-bottom: 95%; /* Ajusta la relación de aspecto para pantallas extra grandes */
  }
}

/*--------------------------------------------------------------
# Mission & Vision Section
--------------------------------------------------------------*/
/* Estilo para la imagen */
.img-overlay {
  width: 100%;
  height: auto;
  opacity: 0.9; /* Añade opacidad a la imagen */
}

/* Contenedor del contenido superpuesto */
.overlay-content-mv {
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  color: #ffffff;
  z-index: 2;
}

/* Contenedor del contenido superpuesto para la misión */
.overlay-content-mission {
  left: 12%;
  width: 35%;
  text-align: left;
  transform: translateY(-80%); /* Asegura que esté alineado verticalmente */
}

/* Contenedor del contenido superpuesto para la visión */
.overlay-content-vision {
  right: -60%;
  width: 35%;
  text-align: right;
  transform: translateY(-160%); /* Asegura que esté alineado verticalmente */
}

/* Estilo del título superpuesto para la misión */
.overlay-title-mission {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  margin-bottom: 20px;
  color: #ffffff;
}

/* Estilo del título superpuesto para la visión */
.overlay-title-vision {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  margin-bottom: 20px;
  color: #ffffff;
}

/* Estilo del texto superpuesto para la misión */
.overlay-text-mission {
  font-size: clamp(0.7rem, 1vw, 0.1rem); /* Hacer el texto más pequeño */
  text-align: justify;
}

/* Estilo del texto superpuesto para la visión */
.overlay-text-vision {
  font-size: clamp(0.7rem, 1vw, 0.1rem); /* Hacer el texto más pequeño */
  text-align: justify;
}

/* Aplicar un fondo oscuro y opaco a la imagen para mejorar la visibilidad del texto */
.features-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.5); */
  z-index: 1;
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 344x882) */
@media (max-width: 344px) {
  .overlay-content-mv {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 10%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 10px;
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 10px;
  }
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 375x667) */
@media (max-width: 375px) {
  .overlay-content-mv {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 20%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 20px;
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 40px;
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 414x736) */
@media (max-width: 414px) {
  .overlay-content-mv {
    width: 85%;
    top: 8%;
    transform: translateY(-40%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 8%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.5rem, 2.2vw, 0.8rem);
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 480x800) */
@media (max-width: 480px) {
  .overlay-content-mv {
    width: 80%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.4rem, 2vw, 0.7rem);
  }
}

/* Ajustes específicos para pantallas medianas (por ejemplo, 768x1024) */
@media (max-width: 768px) {
  .overlay-content-mv {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grandes (por ejemplo, 820x1180) */
@media (max-width: 820px) {
  .overlay-content-mv {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 912x1368) */
@media (max-width: 912px) {
  .overlay-content-mv {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 1024x1366) */
@media (max-width: 1024px) {
  .overlay-content-mv {
    width: 97%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-mission, .overlay-content-vision {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-mission, .overlay-title-vision {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-mission, .overlay-text-vision {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/*--------------------------------------------------------------
# Megatrends Goals
--------------------------------------------------------------*/

/* Contenedor del contenido superpuesto */
.overlay-content {
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  color: #ffffff;
  z-index: 2;
}

/* ---------------- Megatrend AI ---------------- */

/* Contenedor del contenido superpuesto para la misión */
.overlay-content-megatrend1 {
  left: 12%;
  width: 75%;
  text-align: left;
  transform: translateY(-50%); /* Asegura que esté alineado verticalmente */
}

/* Estilo del título superpuesto para la misión */
.overlay-title-megatrend1 {
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  margin-bottom: 20px;
  color: #ffffff;
}

/* Estilo del texto superpuesto para la misión */
.overlay-text-megatrend1 {
  font-size: clamp(0.9rem, 1vw, 0.1rem); /* Hacer el texto más pequeño */
  text-align: justify;
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 320x1198) */
@media (max-width: 320px) {
  .overlay-content {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 10%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 10px;
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 10px;
  }
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 344x882) */
@media (max-width: 344px) {
  .overlay-content {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 10%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 10px;
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 10px;
  }
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 375x667) */
@media (max-width: 375px) {
  .overlay-content {
    width: 100%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 20%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 20px;
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 40px;
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 414x736) */
@media (max-width: 414px) {
  .overlay-content {
    width: 85%;
    top: 8%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 8%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.5rem, 2.2vw, 0.8rem);
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 480x800) */
@media (max-width: 480px) {
  .overlay-content {
    width: 80%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.4rem, 2vw, 0.7rem);
  }
}

/* Ajustes específicos para pantallas medianas (por ejemplo, 768x1024) */
@media (max-width: 768px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grandes (por ejemplo, 820x1180) */
@media (max-width: 820px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 912x1368) */
@media (max-width: 912px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 1024x1366) */
@media (max-width: 1024px) {
  .overlay-content {
    width: 97%;
    top: 15%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend1 {
    font-size: clamp(1.8rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend1 {
    font-size: clamp(0.7rem, 2vw, 0.75rem);
  }
}

/* ---------------- Megatrend Sustainable Technologies ---------------- */

/* Contenedor del contenido superpuesto para la visión */
.overlay-content-megatrend2 {
  right: -15%;
  width: 75%;
  text-align: right;
  transform: translateY(-60%); /* Asegura que esté alineado verticalmente */
}

/* Estilo del título superpuesto para la visión */
.overlay-title-megatrend2 {
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  margin-bottom: 20px;
  color: #ffffff;
}

/* Estilo del texto superpuesto para la visión */
.overlay-text-megatrend2 {
  font-size: clamp(0.9rem, 1vw, 0.1rem); /* Hacer el texto más pequeño */
  text-align: justify;
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 344x882) */
@media (max-width: 344px) {
  .overlay-content {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 10%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 10px;
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 10px;
  }
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 375x667) */
@media (max-width: 375px) {
  .overlay-content {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 20%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 20px;
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 40px;
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 414x736) */
@media (max-width: 414px) {
  .overlay-content {
    width: 85%;
    top: 8%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 8%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.5rem, 2.2vw, 0.8rem);
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 480x800) */
@media (max-width: 480px) {
  .overlay-content {
    width: 80%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.4rem, 2vw, 0.7rem);
  }
}

/* Ajustes específicos para pantallas medianas (por ejemplo, 768x1024) */
@media (max-width: 768px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grandes (por ejemplo, 820x1180) */
@media (max-width: 820px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 912x1368) */
@media (max-width: 912px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 1024x1366) */
@media (max-width: 1024px) {
  .overlay-content {
    width: 97%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend2 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend2 {
    font-size: clamp(1.8rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend2 {
    font-size: clamp(0.7rem, 2vw, 0.75rem);
  }
}

/* ---------------- Megatrend Disruption in supply Chain ---------------- */

/* Contenedor del contenido superpuesto para la misión */
.overlay-content-megatrend3 {
  left: 12%;
  width: 75%;
  text-align: left;
  transform: translateY(-50%); /* Asegura que esté alineado verticalmente */
}

/* Estilo del título superpuesto para la misión */
.overlay-title-megatrend3 {
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  margin-bottom: 20px;
  color: #ffffff;
}

/* Estilo del texto superpuesto para la misión */
.overlay-text-megatrend3 {
  font-size: clamp(0.9rem, 1vw, 0.1rem); /* Hacer el texto más pequeño */
  text-align: justify;
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 344x882) */
@media (max-width: 344px) {
  .overlay-content {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 10%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 10px;
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 10px;
  }
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, 375x667) */
@media (max-width: 375px) {
  .overlay-content {
    width: 90%;
    top: 10%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 20%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
    margin-bottom: 20px;
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.4rem, 2.5vw, 0.55rem);
    margin-bottom: 40px;
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 414x736) */
@media (max-width: 414px) {
  .overlay-content {
    width: 85%;
    top: 8%;
    transform: translateY(-40%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 8%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.5rem, 2.2vw, 0.8rem);
  }
}

/* Ajustes específicos para pantallas pequeñas (por ejemplo, 480x800) */
@media (max-width: 480px) {
  .overlay-content {
    width: 80%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.4rem, 2vw, 0.7rem);
  }
}

/* Ajustes específicos para pantallas medianas (por ejemplo, 768x1024) */
@media (max-width: 768px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grandes (por ejemplo, 820x1180) */
@media (max-width: 820px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 912x1368) */
@media (max-width: 912px) {
  .overlay-content {
    width: 100%;
    top: 5%;
    transform: translateY(-30%);
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 5%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.5rem, 2vw, 0.75rem);
  }
}

/* Ajustes específicos para pantallas grande (por ejemplo, 1024x1366) */
@media (max-width: 1024px) {
  .overlay-content {
    width: 100%;
    top: 30%;
    transform: translateY(-30%);
    left: 0%;
  }
  .overlay-content-megatrend3 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    top: 20%;
  }
  .overlay-title-megatrend3 {
    font-size: clamp(1.6rem, 3vw, 1.5rem);
  }
  .overlay-text-megatrend3 {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
  }
}

/*--------------------------------------------------------------
# Constructions/Sustainability Section (SDG'S)
--------------------------------------------------------------*/

/* ---------------- Section Style First SDG's ---------------- */
.card-item-sdg .card-bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-item-sdg .card-bg img {
  width: 100%;
  height: auto;
  display: block;
}

.card-item-sdg .overlay-content {
  position: absolute;
  top: 60%;
  left: 50%;
  width: clamp(50%, 80%, 90%); /* Ajusta el ancho responsivamente */
  transform: translate(-45%, -60%);
  color: #ffffff;
  text-align: center;
  padding: clamp(10px, 2vw, 20px); /* Ajusta el padding responsivamente */
}

.card-item-sdg .card-title {
  font-size: clamp(17px, 4vw, 30px); /* Ajusta el tamaño de la fuente responsivamente */
  font-weight: bold;
  margin-bottom: clamp(8px, 2vw, 45px); /* Ajusta el margen inferior responsivamente */
}

.card-item-sdg .card-body p {
  font-size: clamp(9px, 2vw, 16px); /* Ajusta el tamaño de la fuente responsivamente */
  line-height: 1.5;
  margin-bottom: 0px;
}

/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, teléfonos antiguos) */
@media (max-width: 400px) {
  .card-item-sdg .overlay-content {
    top: 65%;
    left: 45%;
    width: 100%;
    padding: 15px;
  }
  .card-item-sdg .card-title {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .card-item-sdg .card-body p {
    font-size: 6px;
  }
}

/* Ajustes específicos para pantallas medianas */
@media (min-width: 768px) and (max-width: 991px) {
  .card-item-sdg .overlay-content {
    width: 80%;
    padding: 20px;
  }
  .card-item-sdg .card-title {
    font-size: 30px;
    margin-bottom: 30px;
  }
  .card-item-sdg .card-body p {
    font-size: 15px;
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 1200px) {
  .card-item-sdg .overlay-content {
    width: 70%;
    padding: 25px;
  }
  .card-item-sdg .card-title {
    font-size: 34px;
    margin-bottom: 25px;
  }
  .card-item-sdg .card-body p {
    font-size: 20px;
  }
}

/* ---------------- Section Style rest SDG's ---------------- */
.constructions .card-item {
  border: 3px solid color-mix(in srgb, var(--default-color), transparent 85%);
  position: relative;
  border-radius: 0;
}

.constructions .card-item .card-bg {
  min-height: 300px;
  position: relative;
}

.constructions .card-item .card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.constructions .card-item .card-body {
  padding: 20px;
}

.constructions .card-item h4 {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
}

.constructions .card-item p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

/* Responsive adjustments */
@media (min-width: 1201px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.60rem;
  }

  .constructions .card-item .card-bg {
    min-height: 330px;
  }

}

@media (max-width: 1200px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.50rem;
  }

  .constructions .card-item .card-bg {
    min-height: 150px;
  }

}

@media (max-width: 1024px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.40rem;
  }

  .constructions .card-item .card-bg {
    min-height: 600px;
  }
}

@media (max-width: 992px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.40rem;
  }

  .constructions .card-item .card-bg {
    min-height: 200px;
  }
}

@media (max-width: 912px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.40rem;
  }

  .constructions .card-item .card-bg {
    min-height: 900px;
  }
}

@media (max-width: 820px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.40rem;
  }

  .constructions .card-item .card-bg {
    min-height: 900px;
  }
}

@media (max-width: 768px) {
  .constructions .card-item {
    margin: 4px;
  }

  .constructions .card-item .card-body {
    padding: 1rem;
  }

  .constructions .card-item h4 {
    font-size: 1.40rem;
  }

  .constructions .card-item .card-bg {
    min-height: 900px;
  }
}

@media (max-width: 576px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 0.75rem;
  }

  .constructions .card-item h4 {
    font-size: 1.25rem;
  }

  .constructions .card-item .card-bg {
    min-height: 450px;
  }
}

@media (max-width: 540px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 0.75rem;
  }

  .constructions .card-item h4 {
    font-size: 1.25rem;
  }

  .constructions .card-item .card-bg {
    min-height: 500px;
  }
}

@media (max-width: 414px) {
  .constructions .card-item {
    margin: 0px;
  }

  .constructions .card-item .card-body {
    padding: 0.75rem;
  }

  .constructions .card-item h4 {
    font-size: 1.25rem;
  }

  .constructions .card-item .card-bg {
    min-height: 480px;
  }

}

@media (max-width: 375px) {
  .constructions .card-item {
    margin: 8px;
  }

  .constructions .card-item .card-body {
    padding: 0.75rem;
  }

  .constructions .card-item h4 {
    font-size: 1.25rem;
  }

  .constructions .card-item .card-bg {
    min-height: 430px;
  }

}

@media (max-width: 360px) {
  .constructions .card-item {
    margin: 8px;
  }

  .constructions .card-item .card-body {
    padding: 0.75rem;
  }

  .constructions .card-item h4 {
    font-size: 1.15rem;
  }

  .constructions .card-item .card-bg {
    min-height: 360px;
  }

}

/*--------------------------------------------------------------
# SGD's Section homepage
--------------------------------------------------------------*/
.services {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item {
  padding: 0px;  /* 40px, 20px */
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 100%);
  /* background-color: var(--contrast-color); */
  height: 100%;
  margin-bottom: 0px; /* Ajusta según sea necesario */
}

.services .service-item img {
  margin: 0;
  display: block;
  width: 100%;
  height: auto;
}

.services .col-lg-4,
.services .col-md-6 {
  padding: 0 0px;
}

@media (min-width: 1200px) {
  .services .col-lg-4,
  .services .col-md-6 {
    max-width: 100%; /* Ajusta el tamaño de las columnas para pantallas grandes */
  }
}

@media (max-width: 992px) {
  .services .col-lg-4,
  .services .col-md-6 {
    max-width: 45%; /* Ajusta el tamaño de las columnas para pantallas medianas */
  }
}

@media (max-width: 768px) {
  .services .col-lg-4,
  .services .col-md-6 {
    max-width: 90%; /* Ajusta el tamaño de las columnas para pantallas pequeñas */
  }
}

.services .service-item .icon i {
  color: var(--heading-color);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services .service-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--heading-color), transparent 95%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.services .service-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.services .service-item:hover .icon i {
  color: var(--heading-color);
}

.services .service-item:hover .icon:before {
  background: var(--accent-color);
}

.services .service-item:hover h3 {
  border-color: var(--accent-color);
  color: var(--heading-color);
}

.services .service-item:hover .readmore {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services .features-image {
  position: relative;
  min-height: 400px;
}

.alt-services .features-image img {
  width: 100%;
  height: 100%; /* Ajusta la altura de la imagen para cubrir todo el contenedor */
  object-fit: cover; /* Cubre todo el contenedor manteniendo la proporción */
}


/* Ajustes específicos para pantallas muy pequeñas (por ejemplo, teléfonos antiguos) */
@media (max-width: 400px) {
  .alt-services .features-image img {
    object-fit: cover; /* Asegura que la imagen mantenga su proporción */
  }
}

/* Ajustes específicos para pantallas pequeñas */
@media (min-width: 401px) and (max-width: 600px) {
  .alt-services .features-image img {
    object-fit: cover; /* Asegura que la imagen mantenga su proporción */
  }
}

/* Ajustes específicos para pantallas medianas pequeñas */
@media (min-width: 601px) and (max-width: 768px) {
  .alt-services .features-image {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta cualquier parte que sobresalga */
  }
}

/* Ajustes específicos para pantallas medianas */
@media (min-width: 769px) and (max-width: 991px) {
  .alt-services .features-image img {
    object-fit: contain; /* Cubre todo el contenedor manteniendo la proporción */
  }
}

/* Ajustes específicos para pantallas medianas grandes */
@media (min-width: 992px) and (max-width: 1199px) {
  .alt-services .features-image img {
    object-fit: cover; /* Cubre todo el contenedor manteniendo la proporción */
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 1200px) {
  .alt-services .features-image img {
    object-fit: cover; /* Cubre todo el contenedor manteniendo la proporción */
  }
}

/* Ajustes específicos para pantallas muy grandes */
@media (min-width: 1600px) {
  .alt-services .features-image img {
    object-fit: cover; /* Cubre todo el contenedor manteniendo la proporción */
  }
}

/*--------------------------------------------------------------
# Alt Services Certifications Section
--------------------------------------------------------------*/

.features-image-iso img {
  width: 100%;
  height: 100%; /* Ajusta la altura de la imagen para cubrir todo el contenedor */
}

/* Ajustes específicos para móviles */
@media (max-width: 400px) {
  .features-image-iso img {
    height: 250px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas pequeñas */
@media (min-width: 401px) and (max-width: 600px) {
  .features-image-iso img {
    height: 330px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  .features-image-iso img {
    height: 400px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas medianas */
@media (min-width: 769px) and (max-width: 991px) {
  .features-image-iso img {
    height: 500px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 992px) and (max-width: 1199px) {
  .features-image-iso img {
    height: 380px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 1200px) {
  .features-image-iso img {
    height: 530px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/*--------------------------------------------------------------
# CEO Img Message Section
--------------------------------------------------------------*/
.ceo-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* Añade margen inferior si es necesario */
}

/* Ajustes específicos para móviles */
@media (max-width: 400px) {
  .ceo-image img {
    height: 300px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas pequeñas */
@media (min-width: 401px) and (max-width: 600px) {
  .ceo-image img {
    height: 350px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  .ceo-image img {
    height: 400px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas medianas */
@media (min-width: 769px) and (max-width: 991px) {
  .ceo-image img {
    height: 500px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 992px) and (max-width: 1199px) {
  .ceo-image img {
    height: 600px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 1200px) {
  .ceo-image img {
    height: 800px;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
  }
}

/* alt services section */
.alt-services h1 {
  font-size: clamp(1.9rem, 4vw, 3.5rem); /* Tamaño de fuente responsivo */
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 6px;
  position: relative;
}

.alt-services h1:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: clamp(60px, 30%, 125px); /* Ancho de la línea responsivo */
  height: 4px;
  left: 0;
  bottom: 0;
}

/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 400px) {
  .alt-services h1:after {
    width: 65px;
    height: 3px;
    bottom: 2px;
  }
}

@media (min-width: 401px) and (max-width: 768px) {
  .alt-services h1:after {
    width: 65px;
    height: 3px;
    bottom: 2px;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .alt-services h1:after {
    width: 70px;
    height: 3px;
    bottom: 2px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .alt-services h1:after {
    width: 100px;
    height: 4px;
    bottom: 2px;
  }
}

/* Media query específica para iPad Pro (1024 x 1366) */
@media (min-width: 1024px) and (max-width: 1366px) {
  .alt-services h1:after {
    width: 88px;
    height: 4px;
    bottom: 2px;
  }
}

@media (min-width: 1201px) {
  .alt-services h1:after {
    width: 120px;
    height: 4px;
    bottom:  2px;
  }
}
/* Fin media queries h1:after */

.alt-services h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.alt-services h3:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  left: 0;
  bottom: 0;
}

.alt-services .icon-box {
  margin-top: 50px;
}

.alt-services .icon-box i {
  color: var(--accent-color);
  background-color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
  font-size: 28px;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  line-height: 0;
  box-shadow: 0px 2px 30px color-mix(in srgb, var(--default-color), transparent 100%);
  transition: 0.3s;
}

.alt-services .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.alt-services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}

.alt-services .icon-box h4 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.alt-services .icon-box h4 a:hover {
  color: var(--accent-color);
}

.alt-services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.nav-tabs .nav-item {
  flex: 1;
  text-align: center;
}

.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  color: var(--heading-color);
  padding: 15px 0;
  transition: 0.3s;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
  border: 0;
  border-bottom: 4px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.features {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten en múltiples filas si es necesario */
}

.features .nav-link {
  flex: 1 1 auto; /* Los elementos pueden crecer y encogerse según el espacio */
  min-width: 150px; /* Ancho mínimo para mantener la legibilidad */
}

.features .nav-link i {
  padding-right: 15px;
  font-size: 48px;
}

.features .nav-link h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 575px) {
  .features .nav-link h4 {
    font-size: 16px;
  }
}

.features .nav-link:hover {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.features .nav-link.active {
  background-color: var(--background-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane h3 {
  color: var(--heading-color);
  font-weight: 700;
  font-size: 32px;
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.features .tab-pane h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-top: 10px;
}

.features .tab-pane ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
.projects .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.projects .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.projects .portfolio-filters li:hover,
.projects .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.projects .portfolio-filters li:first-child {
  margin-left: 0;
}

.projects .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .projects .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.projects .portfolio-content {
  position: relative;
  overflow: hidden;
}

.projects .portfolio-content img {
  transition: 0.3s;
}

.projects .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.projects .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.projects .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.projects .portfolio-content .portfolio-info .preview-link,
.projects .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.projects .portfolio-content .portfolio-info .preview-link:hover,
.projects .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.projects .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.projects .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.projects .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
/* Ajusta el tamaño de la imagen testimonial */
.testimonials .testimonial-item .testimonial-img {
  width: 200%; /* Ocupa todo el ancho disponible del contenedor */
  height: auto; /* Mantiene la proporción correcta de la imagen */
  max-width:400px; /* Establece un tamaño máximo para que no se agrande demasiado */
  border-radius: 20px; /* Mantiene el borde redondeado */
  margin: 0 auto; /* Centra la imagen */
  display: block; /* Asegura que la imagen esté alineada correctamente */
}

/* Estilos generales del contenedor */
.testimonials .testimonial-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px; /* Ajusta el relleno del contenedor */
}

/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 767px) {
  .testimonials .testimonial-item .testimonial-img {
    max-width: 200px; /* Reduce el tamaño de la imagen en pantallas pequeñas */
  }

  .testimonials .testimonial-item {
    padding: 20px; /* Ajusta el relleno en dispositivos pequeños */
  }
}

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-blog-posts .post-item {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: 0.3s;
}

.recent-blog-posts .post-item .post-img img {
  transition: 0.5s;
}

.recent-blog-posts .post-item .post-date {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.recent-blog-posts .post-item .post-content {
  padding: 30px;
}

.recent-blog-posts .post-item .post-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.recent-blog-posts .post-item .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.recent-blog-posts .post-item .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.recent-blog-posts .post-item hr {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 20px 0;
}

.recent-blog-posts .post-item .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.recent-blog-posts .post-item .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.recent-blog-posts .post-item:hover .post-title,
.recent-blog-posts .post-item:hover .readmore {
  color: var(--accent-color);
}

.recent-blog-posts .post-item:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .inner-title {
  font-size: clamp(34px, 4.75vw, 76px); /* Tamaño mínimo 24px, tamaño flexible 4.75vw, tamaño máximo 76px */
  font-weight: 700;
  margin: 15px 0; /* Reduce el margen superior e inferior */
  position: relative; /* Añade esta línea para permitir que el pseudo-elemento :after se posicione correctamente */
}

@media (min-width: 991px) {
  .about .inner-title {
    max-width: 65%;
    margin: 0 0 30px 0; /* Ajusta el margen inferior para pantallas más grandes */
  }
}

.about .inner-title:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: clamp(30px, 32%, 200px); /* Ancho de la línea responsivo */
  height: 4px;
  left: 0;
  bottom: -10px; /* Ajusta este valor para mayor espacio */
}

/* Media queries para ajustar el ancho de la línea en diferentes pantallas */

/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 400px) {
  .about .inner-title:after {
    width: 70px;
    height: 3px;
    bottom: -5px;
  }
}

@media (min-width: 401px) and (max-width: 768px) {
  .about .inner-title:after {
    width: 72px;
    height: 3px;
    bottom: -5px;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .about .inner-title:after {
    width: 80px;
    height: 3px;
    bottom: -5px;
  }
}

/* Media query específica para iPad Pro (1024 x 1366) */
@media (min-width: 1024px) and (max-width: 1366px) {
  .about .inner-title:after {
    width: 120px;
    height: 4px;
    bottom: -5px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .about .inner-title:after {
    width: 100px;
    height: 4px;
    bottom: -5px;
  }
}

@media (min-width: 1201px) {
  .about .inner-title:after {
    width: 150px;
    height: 4px;
    bottom: -5px;
  }
}

/* about our-story */
.about .our-story {
  padding: 20px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
  .about .our-story {
    padding-right: 20%;
  }
}

.about .our-story h4 {
  text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 24px); /* Tamaño mínimo 16px, tamaño flexible 1.5vw, tamaño máximo 24px */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.about .our-story h3 {
  font-size: clamp(20px, 2.25vw, 36px); /* Tamaño mínimo 20px, tamaño flexible 2.25vw, tamaño máximo 36px */
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .our-story p:last-child {
  margin-bottom: 0;
}

.about ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.about ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  line-height: 1.2;
  color: var(--accent-color);
}

.about .watch-video i {
  font-size: 2rem;
  transition: 0.3s;
  color: var(--accent-color);
}

.about .watch-video a {
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-left: 8px;
  transition: 0.3s;
}

.about .watch-video:hover a {
  color: var(--accent-color);
}

.about .about-img {
  min-height: 200px;
  position: relative;
}

@media (min-width: 992px) {
  .about .about-img {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 600px;
  }
}

/* Ajustes de la imagen */
.about .about-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  position: relative;
}

/* Ajustes para pantallas grandes */
@media (min-width: 1200px) {
  .about .about-img img {
    height: 1000px; /* Aumenta la altura para pantallas grandes */
  }
}

@media (min-width: 992px) {
  .about .about-img img {
    height: 800px; /* Aumenta la altura para pantallas medianas */
  }
}

@media (max-width: 991px) {
  .about .about-img img {
    height: auto; /* Mantiene la altura automática para pantallas pequeñas */
  }
}

/*--------------------------------------------------------------
# Gifs Icon Services Section
--------------------------------------------------------------*/

.gif-icon {
  width: 100px; /* Ajusta el ancho del GIF según sea necesario */
  height: 100px; /* Ajusta la altura del GIF según sea necesario */
  margin-right: 25px; /* Añade un margen derecho si es necesario */
}

/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter .stats-item {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 100%);
  padding: 30px;
}

.stats-counter .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}

.stats-counter .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  /* display: block; */
  font-weight: 600;
}

/* .stats-counter .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
} */


 
/* Estilo para el subtítulo */
.stats-subtitle {
  text-align: justify;
  margin: 0;
  padding: 0;
  font-family: var(--heading-font);
  font-size: clamp(16px, 2vw, 30px); /* Tamaño mínimo 16px, tamaño flexible 2vw, tamaño máximo 24px */
}

/* Estilo para el párrafo */
.stats-paragraph {
  margin: 0;
  padding: 0;
  text-align: justify;
  font-size: clamp(14px, 1.5vw, 20px); /* Tamaño mínimo 14px, tamaño flexible 1.5vw, tamaño máximo 20px */
}

/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 1200px) {
  .stats-paragraph {
    font-size: clamp(12px, 1vw, 18px); /* Ajuste para pantallas medianas */
  }
}

@media (max-width: 992px) {
  .stats-paragraph {
    font-size: clamp(11px, 1vw, 16px); /* Ajuste para pantallas pequeñas */
  }
}

@media (max-width: 768px) {
  .stats-paragraph {
    font-size: clamp(10px, 2.5vw, 14px); /* Ajuste para tablets */
  }
}

@media (max-width: 576px) {
  .stats-paragraph {
    font-size: clamp(8px, 3vw, 12px); /* Ajuste para pantallas de móviles */
  }
}

/* Ajustes específicos para pantallas grandes */
@media (min-width: 1920px) {
  .stats-paragraph {
    font-size: clamp(14px, 1.5vw, 20px); /* Ajuste para pantallas grandes */
  }
}

@media (min-width: 2560px) {
  .stats-paragraph {
    font-size: clamp(16px, 1.5vw, 20px); /* Ajuste para pantallas muy grandes */
  }
}

/*--------------------------------------------------------------
# Alt Services 2 Section
--------------------------------------------------------------*/

.alt-services-2 .features-image {
  position: relative;
  min-height: 400px;
}

.alt-services-2 .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.alt-services-2 h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.alt-services-2 .icon-box {
  margin-top: 30px;
}

.alt-services-2 .icon-box i {
  color: var(--accent-color);
  margin-right: 15px;
  font-size: 24px;
  line-height: 1.2;
}

/* revisar */
container section-title
.alt-services-2 .icon-box h4 {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;
}

.alt-services-2 .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .row {
  display: flex;
  justify-content: center; /* Centra horizontalmente todos los miembros del equipo */
  align-items: center; /* Alinea verticalmente */
  flex-wrap: wrap; /* Asegura que los elementos se envuelvan en pantallas pequeñas */
  gap: 30px; /* Ajusta este valor para controlar la separación */
}

.team .member {
  position: relative;
  text-align: center; /* Centra el texto dentro de cada miembro */
}

.team .member .member-img {
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1024px) {
  .team .member .member-img {
    margin: 0 60px;
  }
}

.team .member .member-img img {
  position: relative;
  z-index: 1;
}

.team .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.team .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.team .member .member-img .social a:hover {
  color: var(--accent-color);
}

.team .member .member-info {
  margin-top: 30px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.team .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.team .member .member-info p {
  margin-bottom: 0;
  font-size: 15px;
}

.team .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards h3 {
  font-size: 20px;
  font-weight: 700;
}

.features-cards p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.features-cards ul li {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-top: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.features-cards ul li i {
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 6px;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Project Details Section
--------------------------------------------------------------*/
.project-details .portfolio-details-slider img {
  width: 100%;
}

.project-details .swiper-wrapper {
  height: auto;
}

.project-details .swiper-button-prev,
.project-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.project-details .swiper-button-prev:after,
.project-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.project-details .swiper-button-prev:hover:after,
.project-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .project-details .swiper-button-prev,
  .project-details .swiper-button-next {
    display: none;
  }
}

.project-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.project-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.project-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.project-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.project-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.project-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.project-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.project-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.project-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.project-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/* ------------------ projects / expertise "after" ------------------ */

/* Estilo para el título con una línea debajo */
.portfolio-description h1 {
  font-size: clamp(1.9rem, 4vw, 3.5rem); /* Tamaño de fuente responsivo */
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-description h1:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: clamp(60px, 30%, 100px); /* Ancho de la línea responsivo */
  height: 4px;
  left: 0;
  bottom: 0;
}

.project-details .portfolio-description h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem); /* Tamaño de fuente responsivo */
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-description h2:after {
  content: "";
  background: var(--accent-color);
  position: absolute;
  display: block;
  width: clamp(60px, 30%, 70px); /* Ancho de la línea responsivo */
  height: 4px;
  left: 0;
  bottom: 0;
}

.project-details .portfolio-description p {
  padding: 0;
}

.project-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.project-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.project-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.project-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.project-details .portfolio-description .testimonial-item .quote-icon-left,
.project-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.project-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.project-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.project-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
}

.blog-posts .post-img img {
  transition: 0.5s;
}

.blog-posts .post-date {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.blog-posts .post-content {
  padding: 30px;
}

.blog-posts .post-title {
  font-size: 20px;
  color: var(--heading-color);
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.blog-posts .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.blog-posts .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts p {
  margin-top: 20px;
}

.blog-posts hr {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-bottom: 15px;
}

.blog-posts .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.blog-posts article:hover .post-title,
.blog-posts article:hover .readmore {
  color: var(--accent-color);
}

.blog-posts article:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Pagination 2 Section
--------------------------------------------------------------*/
.pagination-2 {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pagination-2 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-2 li {
  margin: 0 5px;
  transition: 0.3s;
}

.pagination-2 li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-2 li.active,
.pagination-2 li:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pagination-2 li.active a,
.pagination-2 li:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding-top: 10px;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog-comments .reply-form p {
  font-size: 14px;
}

.blog-comments .reply-form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-comments .reply-form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
/* .starter-section {
  /* Add your styles here
} */

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}