/**
* Template Name: HeroBiz
* Template URL: https://bootstrapmade.com/herobiz-bootstrap-business-template/
* Updated: Jun 02 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: "Raleway", sans-serif, "Roboto", 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";
  --heading-font: "Source Sans Pro", sans-serif;
  --nav-font: "Poppins", sans-serif;
  --cacts: "Cactus Classical Serif", serif;
  --popins: "Poppins", sans-serif;
  --head2: "Montserrat", serif;
  --head1: "Raleway", sans-serif;
  --contact: "Roboto", 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";
}

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

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

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

  /* 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: #F10F49;00927C*/
  /*--accent-color: #F10F49;*/
  --accent-color: #82351F;

  /* 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;

  --secondary-color: #ffc107;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #393939;

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

  /* 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: #485664;*/
  --nav-dropdown-color: #757575;


  /* 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: #c59700;
}

/* Template Custom Colors */
:root {
  --footer-background-color: #393939;
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  /*font-family: var(--default-font);*/
  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(--head1);
  font-weight: 200px !important;
}

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

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-width: 150px;
  object-fit: contain;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 32px;
  font-weight: 300;
  margin: 0;
  color: var(--accent-color);
}

.header .logo span {
  color: var(--accent-color);
  font-weight: 400;
  font-size: 34px;
  margin-left: 2px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--background-color);
  background-color: #393939;
  /*border: 2px solid #f10f49;*/
  border: 2px solid #393939;
  font-size: 12px;
  padding: 8px 8px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;

}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: #393939;
  border: 2px solid #c59700;
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

@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;
    margin-right: 20px;

    /* Añade espacio a la derecha de cada elemento de la lista */
  }



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

  /* Border from Y to X */
  .navmenu a:before,
  .navmenu a:after {
    position: absolute;
    opacity: 0.5;
    height: 70%;
    width: 1px;
    content: '';
    background: #c5970079;
    transition: all 0.3s;
  }

  .navmenu a:before {
    left: 0px;
    top: 15%;
  }

  .navmenu a:after {
    right: 0px;
    bottom: 15%;
  }

  .navmenu a:hover:before,
  .navmenu a:hover:after {
    opacity: 1;
    height: 2px;
    width: 100%;
  }
}

.text-justify {
  text-align: justify;
}

/* 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);
    font-size: 16px;
    padding: 0 2px;
    font-family: var(--nav-font);
    /*font-weight: lighter;*
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .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;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-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);
  }*

}*/
/* 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;
    animation: bounce-in-right 2s ease-in;

  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 60px 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;
    animation: bounce-in-right 2s ease-in;
    text-align: center;
    list-style: none;

  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--background-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 25px;
    font-weight: 500;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    white-space: nowrap;
    transition: 0.3s;
    margin: 0 15px;
    /* Espacio entre elementos */
    justify-content: center;
    letter-spacing: 1px;
    line-height: 2;

  }

  .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 li {
    position: relative;
    margin: 0 15px;
    /* Espacio entre elementos */
  }

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



  .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.874);
    transition: 0.3s;
  }

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

  .ic-bi-circle {
    animation: rotate-in-center 2s;
  }

  /**
 * ----------------------------------------
 * animation bounce-in-right
 * ----------------------------------------
 */
  @-webkit-keyframes bounce-in-right {
    0% {
      -webkit-transform: translateX(600px);
      transform: translateX(600px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    38% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
    }

    55% {
      -webkit-transform: translateX(68px);
      transform: translateX(68px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    72% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    81% {
      -webkit-transform: translateX(32px);
      transform: translateX(32px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    90% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    95% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }

  @keyframes bounce-in-right {
    0% {
      -webkit-transform: translateX(600px);
      transform: translateX(600px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    38% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
    }

    55% {
      -webkit-transform: translateX(68px);
      transform: translateX(68px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    72% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    81% {
      -webkit-transform: translateX(32px);
      transform: translateX(32px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    90% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    95% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-9-9 15:54:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation rotate-in-center
 * ----------------------------------------
 */
  @-webkit-keyframes rotate-in-center {
    0% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
      opacity: 0;
    }

    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rotate-in-center {
    0% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
      opacity: 0;
    }

    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--footer-background-color);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  background-color: color-mix(in srgb, var(--background-color), white 5%);
  padding-top: 50px;
}

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

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

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

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

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

.footer h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.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;
  font-family: var(--default-font);
}

.footer .copyright {
  padding: 30px 0;
}

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

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

.footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--contrast-color);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: var(--accent-color);
  text-decoration: none;
}

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

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# 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(--contrast-color);
  line-height: 0;
}

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



/*--------------------------------------------------------------
# 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: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 300;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.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 70%);
}

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

@media (max-width: 1199px) {

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

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 15px;
}

.section-title h3 {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 50vh;
  position: relative;
  padding: 10px 0 60px 0;
  display: flex;
  align-items: center;
  /*background: url("../img/hero-bg.png") center center;*/
  background-size: cover;
}

.hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.6;
  /* Spacing between lines */
  letter-spacing: 2px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.hero h1 span {
  color: var(--accent-color);
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  /* Spacing between lines */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--nav-font);
  margin: 0 auto;
  width: 200px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.5px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 25px;
  transition: visibility 0s 2s, opacity 0.5s ease-in-out;
  /* Retraso de 2s en la visibilidad */
  animation: pulse 2s infinite;

}


@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
    /* Aumenta el tamaño ligeramente */
  }

  100% {
    transform: scale(1);
  }
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}


.hero .animated {
  margin-bottom: 60px;
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (min-width: 992px) {
  .hero .animated {
    max-width: 45%;
  }

  svg {
    height: 65vh;
  }

  #hero .container {
    flex-direction: column;
  }

  #hero #text-container {
    margin-top: 20px;
    /* Optional: add some space between SVG and text */
  }
}

@media (max-width: 991px) {
  .hero .animated {
    max-width: 60%;
  }

  /* Especificidad para el SVG dentro de #hero */
  #hero svg {
    height: 40vh;
  }

  #hero .container {
    flex-direction: column;
  }

  #hero #text-container {
    margin-top: 20px;
    /* Optional: add some space between SVG and text */
  }
}

@media (max-width: 575px) {
  .hero .animated {
    max-width: 80%;
  }

}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started {
    font-size: 13px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  height: 100%;
}

.featured-services .service-item .icon {
  margin-bottom: 10px;
}

.featured-services .service-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: 0.3s;
}

.featured-services .service-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.featured-services .service-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

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

.featured-services .service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.featured-services .service-item:hover h4 a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-img {
  position: relative;
  margin: 60px 0 0 60px;
}

.about .about-img:before {
  position: absolute;
  inset: -60px 0 0 -60px;
  content: "";
  background: url("../img/about-bg.png") top left;
  background-repeat: no-repeat;
  z-index: 1;
}

.about .about-img img {
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .about .about-img {
    margin: 0;
  }

  .about .about-img:before {
    inset: -30px 0 0 -30px;
  }
}

.about h3 {
  font-weight: 300;
  font-size: 32px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .about h3 {
    font-size: 28px;
  }
}

.about .nav-pills {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.about .nav-pills li+li {
  margin-left: 40px;
}

.about .nav-link {
  background: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--default-color);
  padding: 12px 0;
  margin-bottom: -2px;
  border-radius: 0;
}

.about .nav-link.active {
  color: var(--accent-color);
  background: none;
  border-bottom: 3px solid var(--accent-color);
}

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

.about .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: var(--default-color);
}

.about .tab-content i {
  font-size: 22px;
  line-height: 0;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 100%;
  transition: 0.3s;
  /*opacity: 0.5; efecto de mouse sobre encima y obtienes el color
  filter: grayscale(100);*/
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 0;
}

.call-to-action .container {
  padding: 80px;
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 15px;
}

@media (max-width: 992px) {
  .call-to-action .container {
    padding: 60px;
  }
}

.call-to-action .content h3 {
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  /* Centra el texto horizontalmente */
  margin: 0 auto;
  /* Centra el elemento si tiene un ancho específico */
  margin-bottom: 40px;
  /* Añade espacio en la parte inferior */
  /* Añade la animación */
  animation: slide-in-fwd-top 1s ease-out forwards;
  /* 1s es la duración, puedes ajustarla */
}


.call-to-action .content h3 em {
  font-style: normal;
  position: relative;
  z-index: 1;
}

.call-to-action .content h3 em:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--accent-color), transparent 30%);
  z-index: -1;
}

.call-to-action .content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-weight: 400;
  font-size: 18px;
}

.call-to-action .content .cta-btn {
  color: var(--contrast-color);
  font-weight: 500;
  font-size: 16px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin-top: 10px;
  background: var(--accent-color);
}

.call-to-action .content .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

.call-to-action .img {
  position: relative;
}

.call-to-action .img:before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--contrast-color), transparent 20%);
  border-radius: 15px;
  transform: rotate(6deg);
  z-index: 2;
}

.call-to-action .img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  border-radius: 15px;
  transform: rotate(12deg);
  z-index: 1;
}

.call-to-action .img img {
  position: relative;
  z-index: 3;
  border-radius: 15px;
  z-index: 3;
}


/**
 * ----------------------------------------
 * animation slide-in-fwd-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
    transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
    transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

/*--------------------------------------------------------------
# Onfocus Section
--------------------------------------------------------------*/
.onfocus {
  --default-color: #fff;
  --background-color: #000000;
  --heading-color: #fff;
  padding: 0;
  margin-top: 60px;
}

.onfocus .video-play {
  min-height: 400px;
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/onfocus-video-bg.jpg") center center;
  background-size: cover;
}

.onfocus .content {
  background: linear-gradient(color-mix(in srgb, var(--background-color), transparent 90%), color-mix(in srgb, var(--background-color), transparent 75%)), url("../img/onfocus-content-bg.jpg") center center;
  background-size: cover;
  padding: 40px;
}

@media (min-width: 768px) {
  .onfocus .content {
    padding: 80px;
  }
}

.onfocus .content h3 {
  font-weight: 600;
  font-size: 32px;
}

.onfocus .content ul {
  list-style: none;
  padding: 0;
}

.onfocus .content ul li {
  padding-bottom: 10px;
}

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

.onfocus .content p:last-child {
  margin-bottom: 0;
}

.onfocus .content .read-more {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: -nline-flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-color);
  background: var(--accent-color);
}

.onfocus .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.onfocus .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
  padding-right: 19px;
}

.onfocus .content .read-more:hover i {
  margin-left: 10px;
}

.onfocus .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.onfocus .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.onfocus .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.onfocus .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.onfocus .play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

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

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  border: 0;
  padding: 25px 20px;
  background-color: white;
  color: var(--color-secondary);
  box-shadow: 5px 5px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 0s;
  cursor: pointer;
  height: 100%;
}

.features .nav-link i {
  font-size: 32px;
  line-height: 0;
}

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

.features .nav-link:hover {
  color: var(--accent-color);
}

.features .nav-link:hover,
.features .nav-link.active {
  transition: 0.3s;
  background: var(--accent-color);
  color: var(--contrast-color) !important;
  border-color: var(--accent-color);
}

.features .nav-link:hover h4,
.features .nav-link.active h4 {
  color: var(--contrast-color);
}

.features .nav-link:hover i,
.features .nav-link.active i {
  color: var(--contrast-color) !important;
}

.tab-content p {
  color: rgb(114, 114, 114);
}

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

.features .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.features .tab-pane h3 {
  font-weight: 600;
  font-size: 28px;
}

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

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

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

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

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .img {
  border-radius: 8px;
  overflow: hidden;
}

.services .container {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 15px;
}

.services .img img {
  transition: 0.6s;
}

.services .details {
  padding: 50px 30px;
  margin: -100px 30px 0 30px;
  transition: all ease-in-out 0.3s;
  position: relative;
  background: color-mix(in srgb, var(--contrast-color), transparent 5%);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px color-mix(in srgb, var(--default-color), transparent 92%);
}

.services .details .icon {
  margin: 0;
  width: 72px;
  height: 72px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 6px solid var(--contrast-color);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
}

.services .details h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.service-content {
  margin-top: 20px;
  display: none;
}

.service-content.active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -webkit-animation: slide-in-right 0.5s forwards;
  animation: slide-in-right 0.5s forwards;
  opacity: 1;
}


.services-points {
  display: flex;
  flex-direction: row;
  gap: 50px;
  margin-top: 20px;
}

.service-point {
  display: flex;
  align-items: center;
  gap: 15px;
}

.icon-circle {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Centra verticalmente */
  border-radius: 20%;
  border: 2px solid black;
  transition: ease-in-out 0.3s;

}

.icon-circle i {
  font-size: 24px;
  color: black;
}

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

.services .service-item:hover .details .icon {
  background: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

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

.services .service-item:hover .img img {
  transform: scale(1.2);
}

.service-item:hover .image-container {
  /*new*/
  opacity: 0.5;
}

@media (max-width: 992px) {
  .services-points {
    flex-direction: column;
  }
}

/*Animacion*/
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
  }
}


/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  overflow: hidden;
}

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

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
  color: #6c757d;

}

.pruebaP {
  /* Initial styles for the paragraph */
  display: inline-block;
  transition: all 0.6s ease;
  /* Smooth transition for better visual effect */


}

.pruebaP:hover {
  /*animation:heartbeat 4s forwards;*/
  /*animation:text-pop-up-right .5s cubic-bezier(.25,.46,.45,.94) both*/
  animation: wobble-hor-bottom .8s both
}

/* ----------------------------------------------
 * Generated by Animista on 2024-6-14 14:22:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes text-pop-up-right {
  0% {
    transform: translateX(0);
    transform-origin: 50% 50%;
    text-shadow: none
  }

  100% {
    transform: translateX(50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc, 0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc, 0 50px 30px rgba(0, 0, 0, .3)
  }
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out
  }

  10% {
    transform: scale(.91);
    animation-timing-function: ease-in
  }

  17% {
    transform: scale(.98);
    animation-timing-function: ease-out
  }

  33% {
    transform: scale(.87);
    animation-timing-function: ease-in
  }

  45% {
    transform: scale(1);
    animation-timing-function: ease-out
  }
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1)
  }

  30% {
    transform: scale3d(1.25, .75, 1)
  }

  40% {
    transform: scale3d(.75, 1.25, 1)
  }

  50% {
    transform: scale3d(1.15, .85, 1)
  }

  65% {
    transform: scale3d(.95, 1.05, 1)
  }

  75% {
    transform: scale3d(1.05, .95, 1)
  }

  100% {
    transform: scale3d(1, 1, 1)
  }
}

@keyframes flip-2-hor-top-1 {
  0% {
    transform: translateY(0) rotateX(0);
    transform-origin: 50% 0
  }

  100% {
    transform: translateY(-100%) rotateX(-180deg);
    transform-origin: 50% 100%
  }
}

@keyframes wobble-hor-bottom {

  0%,
  100% {
    transform: translateX(0);
    transform-origin: 50% 50%
  }

  15% {
    transform: translateX(-30px) rotate(-6deg)
  }

  30% {
    transform: translateX(15px) rotate(6deg)
  }

  45% {
    transform: translateX(-15px) rotate(-3.6deg)
  }

  60% {
    transform: translateX(9px) rotate(2.4deg)
  }

  75% {
    transform: translateX(-6px) rotate(-1.2deg)
  }
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

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

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

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

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

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

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

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
  /* Habilita flexbox en el contenedor de contenido */

}

/*new*/
.portfolio-item {
  height: 300px;
  /* Fija la altura del contenedor */
  background-color: white;
  /* Color de fondo blanco */
  justify-content: center;
  align-items: center;
  display: flex;
  /* Habilita flexbox en el contenedor de contenido */

}

.portfolio .portfolio-content img {
  transition: 0.3s;
  /*new*/
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Asegura que la imagen se ajuste correctamente dentro del contenedor */
}

.portfolio .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;

}

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

.portfolio .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);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .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;
}

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

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

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

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


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info {
  padding: 40px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 92%);
  overflow: hidden;
  z-index: 1;
}

.contact .info h3 {
  text-align: center;
  font-weight: 400;
  font-size: 24px;
  font-family: var(--contact);

}

.contact .info p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 30px;
  font-size: 15px;
}

.contact .info-item+.info-item {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease-in-out;
  margin-right: 20px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .php-email-form {
  width: 100%;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

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

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

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

.contact .php-email-form .loading {
  display: none;
  text-align: center;
  padding: 15px;
}

.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 input[type=tel],
.contact .php-email-form textarea {

  /* transition: transform 0.5s ease-out, opacity 0.5s ease-out;*/
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  resize: none;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form input[type=tel]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* Sombra 3D */
  transform: translateY(-3px);
  /* Eleva el campo */
  outline: none;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form input[type=tel] {
  height: 48px;
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
  height: 100px;
}

.contact .php-email-form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 13px 50px;
  transition: 0.4s;
  border-radius: 4px;
  margin-left: 16px;
}

.contact .php-email-form button:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

.custom-tel {
  appearance: none;
  /* Elimina los estilos nativos específicos */
  -webkit-appearance: none;
  /* Para navegadores webkit (como Safari y Chrome) */
}

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

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

/* Efecto vibración */



@media (max-width: 992px) {
  .contact .php-email-form button[type=submit] {
    padding: 10px 10px;
  }

  .contact-form {
    width: 100%;
  }
}

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

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

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

.portfolio-details .swiper-button-prev:after,
.portfolio-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;
}

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

@media (max-width: 575px) {

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

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

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

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

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

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

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

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

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

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

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

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

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

.portfolio-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;
}

.portfolio-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;
}

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

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

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

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

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

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

/*--------------------------------------------------------------
# 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);
}



/*--------------------------------------------------------------
# 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);
}



/*--------------------------------------------------------------
# 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;
}

/* Adela */

.hidden {
  display: none;
}

.rounded-image {
  border-radius: 15px;
  /* Ajusta este valor para el grado de redondeo deseado */
}

#lottie-animation {
  width: 400px;
  /* Ajusta el ancho según sea necesario */
  height: 400px;
  /* Ajusta la altura según sea necesario */
}

.back {
  background-color: #dbdbdb;
  border-radius: 15px;
}

/*Animaton in text*/


h1 {
  animation: fadeIn 2s ease-out 1s forwards;
  opacity: 0;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

p#title {
  /*animation: slideIn 2s ease-out 2s forwards;*/
  animation: fadeInUp 1s ease-out 2s forwards;
  /* Entrance animation */
  transform: translateY(20px);
  opacity: 0;
}

.image-container {
  max-width: 100%;
  /* Asegura que la imagen no sea más ancha que el contenedor */
  max-height: 100%;
  /* Asegura que la imagen no sea más alta que el contenedor */
  position: absolute;
  top: 50%;
  left: 50%;
  /*transform: translate(-50%, -50%);*/
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.hover-image {
  width: 100%;
  height: auto;
}

.justified-text p {
  text-align: justify;
}

.items-contact {
  justify-content: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Media query para ajustar el tamaño en dispositivos más pequeños */
@media (max-width: 768px) {
  .image-container {
    top: 20%;
  }

  .services .details {
    padding: 50px 10px;
    margin: -100px 10px 0 10px;
  }

  .logo-part {
    max-width: 50px !important;
    ;
  }

}

.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.float-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #c59700;
  bottom: 96px;
  left: 16px;
  position: fixed;
  /*visibility: hidden;*/
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  /* Asegura que la imagen no sea más ancha que el contenedor */
  max-height: 100%;
  /* A*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra ligera */
  /* transition: transform 0.3s ease;*/
  animation: bounce 2s infinite;
}

.float-button i {
  color: #ffffff;
  font-size: 18px;
  /* transition: transform 0.3s ease, color 0.3s ease;*/
}


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

.scroll-top,
.float-button {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease-in-out;
}

.whatsapp-float,
.float-button {
  background-color: #25d366;
  color: #ffffff;
}

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

/*Backgrouf*/
body {
  margin: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#logo {
  margin: auto;
  position: absolute;
  z-index: 2;
}

#cnv {
  position: fixed;
  z-index: 1;
}

/*SVG*/


svg {
  height: 70vh;

}

#webdev-animation {

  * {
    transform-box: fill-box;
  }

  #in-browser {
    opacity: 0;
    transform-origin: center bottom;

    #hero,
    #Logo,
    #menu,
    #h1 {
      opacity: 0;
      transform-origin: left top;
    }

    #body_text * {
      opacity: 0;
      transform-origin: left top;
    }

    #image {
      opacity: 0;
      transform-origin: center center;
    }
  }

  #Code * {
    transform-origin: left center;
    /* or transform-origin: 50% */
  }

}

.info-link {

  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, background-color 0.3s ease;
  padding: 10px;
  border-radius: 8px;
}

.info-link:hover {
  transform: scale(1.05);
  background-color: rgba(197, 151, 0, 0.1);

}

.info-link i {

  transition: color 0.3s ease;
}

.info-link:hover i {
  color: rgb(197, 151, 0);
}

.info-link p,
.info-link h4 {

  transition: color 0.3s ease;
}

.info-link:hover p,
.info-link:hover h4 {
  color: #c59700;
}


/*Form*/
/* Contenedor del formulario */

.contact-form {
  position: relative;
  padding: 20px;
  width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Opcional: sombra */
  z-index: 10;

}

.hide {
  opacity: 0;
  animation: slide-out-left 1s;
  z-index: 1;

}

.show {
  opacity: 1;
  animation: slide-in-right 1s;


}


/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }

}

/* Keyframes for the fadeInUp animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

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

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

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/*Form Contact*/
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  /* Ajusta el espacio superior si es necesario */
}

.text-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/*End form Contact*/


/*Slide-clients*/
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

}

.swiper-slide img {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.swiper {
  max-width: 80%;
  margin: 0 auto;

}

.logo-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-part {
  max-width: 100px;
}

.clients-h4 {
  text-align: center;
  justify-content: center;
  justify-items: center;
  display: flex;
  align-items: center;
}




.counter {
  color: #c59700;
  font-size: 100px;
  font-family: "Playfair Display", serif;
  /* Asegúrate de incluir una fuente de respaldo como 'serif' */
}