/**
* Template Name: Impact
* Template URL: https://bootstrapmade.com/impact-bootstrap-business-website-template/
* Updated: Jun 14 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: "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: "Montserrat",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
  
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #222222; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #172a28; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #078427; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements 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 */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #f89340; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #01433c; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #f85a40; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}


/* 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: "Roboto", sans-serif;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #008342;
  --heading-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: color-mix(in srgb, var(--accent-color) 90%, black 10%);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

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

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

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

.header .logo span {
  font-size: 32px;
  margin-left: 2px;
  color: var(--nav-hover-color);
}

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

/*--------------------------------------------------------------
# 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);
    font-size: 15px;
    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;
  }

  .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(--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-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 color-mix(in srgb, var(--default-color), transparent 85%);
  }

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    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;
  }
}

/* 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: var(--accent-color);
  --default-color: #fff;
  --heading-color: #fff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.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-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.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: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--default-color);
  border-color: var(--default-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(--default-color);
}

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

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

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

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

/*--------------------------------------------------------------
# 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: 44px;
  height: 44px;
  border-radius: 50px;
  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);
}

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

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

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

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

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












/*--------------------------------------------------------------





/*--------------------------------------------------------------
# Hero Section - Full Width & Optimized UX/UI
--------------------------------------------------------------*/
.hero {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  overflow: hidden;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


/* Hero Typography - Permanent Marker font like header */
.custom-heading {
  font-family: 'Permanent Marker', cursive;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.9);
  color: #ffffff;
  margin-bottom: 0;
  letter-spacing: 2px;
  white-space: nowrap;
  z-index: 3;
  text-transform: uppercase;
}

.custom-heading .maipo-orange {
  color: #f89340;
  display: inline;
}

.hero .hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
  color: #f0f0f0;
  margin-top: 2rem;
  margin-bottom: 0;
  letter-spacing: 0.8px;
  max-width: 800px;
}

/* Hero Buttons */
.hero .hero-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  padding: 18px 55px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  border: none;
  min-width: 260px;
}

.hero .hero-btn i {
  font-size: 1.2rem;
}

.hero .btn-primary {
  background-color: var(--accent-color);
  animation: pulse-hero 2.5s infinite;
}

.hero .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 35px rgba(7, 132, 39, 0.6);
}

.hero .btn-outline-light {
  border: 3px solid #ffffff;
  background: transparent;
  color: #ffffff;
}

.hero .btn-outline-light:hover {
  background-color: #ffffff;
  color: var(--accent-color);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 35px rgba(255, 255, 255, 0.5);
}

@keyframes pulse-hero {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 10px 35px rgba(7, 132, 39, 0.7);
  }
}

/* Hero Content Container */
.hero-titulo {
  width: 100%;
  max-width: 100%;
  z-index: 10;
  padding: 0 30px;
}

/* Responsive - Large Tablet */
@media (max-width: 1200px) {
  .custom-heading {
    font-size: 3.5rem;
  }

  .hero .hero-subtitle {
    font-size: 1.6rem;
  }
}

/* Responsive - Tablet */
@media (max-width: 992px) {
  .custom-heading {
    font-size: 2.8rem;
  }

  .hero .hero-subtitle {
    font-size: 1.3rem;
  }

  .hero .hero-btn {
    font-size: 1.1rem;
    padding: 15px 45px;
    min-width: 220px;
  }
}

/* Responsive - Mobile */
@media (max-width: 992px) {
  .hero-titulo {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px 20px !important;
    border-radius: 20px;
    margin: 0 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  }
}

@media (max-width: 640px) {
  .custom-heading {
    font-size: 2rem;
    white-space: normal;
    text-align: center;
    letter-spacing: 1px;
  }

  .hero .hero-subtitle {
    font-size: 1.1rem;
  }

  .hero .hero-btn {
    font-size: 1rem;
    padding: 14px 35px;
    min-width: 200px;
  }

  .hero .hero-btn i {
    font-size: 1rem;
  }

  .hero-titulo {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 35px 15px !important;
    border-radius: 15px;
    margin: 0 10px;
  }
}


.hero-content {
  position: relative;
  z-index: 3;
  color: var(--default-color);
}

@media (max-width: 992px) {
  .hero {
    padding-top: 100px;
    margin-top: 100px;
  }
  
}

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: none;
  z-index: 0;
}

.video-hero{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}







@media (max-width: 992px) {
  .video-hero {
    visibility: hidden;
    display: none;
  }
  
}



.iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  margin-top: -12%;
  padding-bottom: 80%;
  overflow: hidden;
  display: none;
  z-index: 2;
}



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





@media (max-width: 992px) {
  .iframe-container {
    display: block;
  }
  .responsive-iframe {
    display: block;
  }
}

@media (max-width: 512px) {
  .iframe-container {
    margin-top: -7%;

  }
}
@media (max-width: 440px) {
  .iframe-container {
    height: 20%;

  }
}
.hero-titulo{
  top: -100px;
}

@media (max-width: 992px) {
  .hero-titulo{
    top: 0;
  }
}


.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero h2 .accent {
  color: var(--contrast-color);
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 500;
  font-size: 18px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 50px;
  transition: 0.3s;
  border: 2px solid var(--border-color);
  animation: palpitar 2.0s infinite; /* Aplica la animación */
}

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

@media (max-width: 640px) {
  .hero h2 {
    font-size: 36px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero .btn-get-started {
    font-size: 14px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}


.hero .icon-boxes {
  width: 100%;
  padding-top: 70px;
  padding-bottom: 40px;
  z-index: 4;
}
@media (max-width: 992px) {
  .hero .icon-boxes {
    top: 0;
  }
}

@media (max-width: 440px) {
  .hero .icon-boxes {
    margin-top: -60px;
  }
   .hero-titulo{
    margin-top: -30px;
  }
}





.hero .icon-box {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color), white 4%);
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  text-align: center;
  height: 100%;
}

.hero .icon-box .title {
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 22px;
}

.hero .icon-box .title a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.hero .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 48px;
  line-height: 1;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero .icon-box:hover {
  background-color: color-mix(in srgb, var(--accent-color), white 30%);
}

.hero .icon-box:hover .title a,
.hero .icon-box:hover .icon {
  color: var(--contrast-color);
}

.service-icon {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

/* Ajustes para la sección de iconos */
.icon-box {
  padding: 25px;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color), white 4%);
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  text-align: center;
}

.icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  font-size: 48px;
}

.icon-box .title {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 24px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .icon-box {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .icon-box .icon {
    font-size: 36px;
  }
  .icon-box .title {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .col-6 {
    width: 50%;
  }
}

@media (max-width: 420px) {
  .icon-box .icon {
    font-size: 24px;
  }
  .icon-box .title {
    font-size: 18px;
  }
}








/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

@media (max-width: 992px) {
  #about{
    margin-top: 0;
  } 
}

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

.about .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

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

.about .content ul li {
  padding: 0 0 10px 30px;
  position: relative;
}

.about .content ul i {
  position: absolute;
  font-size: 20px;
  left: 0;
  top: -3px;
  color: var(--accent-color);
}

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

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

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

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

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

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

.video-box {
  position: relative;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

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

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

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

.custom-img {
  width: 100px;  /* Ajusta este valor según el tamaño deseado */
  height: 100px; /* Ajusta este valor según el tamaño deseado */
  object-fit: cover; /* Mantiene las proporciones y recorta el exceso si es necesario */
}


/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  padding: 60px 0;
}

.stats .stats-item {
  padding: 10px;
}

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

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 40px;
  display: block;
  font-weight: 700;
  line-height: 40px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --default-color: #ffffff;
  --contrast-color: #ffffff;
}

.call-to-action .container {
  padding-top: 80px;
  padding-bottom: 80px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  clip-path: inset(0 round 15px);
}

.call-to-action .container img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 15px;
  overflow: hidden;
}

.call-to-action .container:before {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container .content {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.call-to-action p {
  color: var(--default-color);
  margin-bottom: 20px;
}

.call-to-action .play-btn {
  width: 94px;
  height: 94px;
  margin-bottom: 20px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 60%) 52%);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.call-to-action .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 20%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.call-to-action .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 var(--default-color);
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.call-to-action .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 var(--default-color);
  z-index: 200;
  animation: none;
  border-radius: 0;
}

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

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

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

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

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
/* Nuestras Instalaciones - Facilities */
.facility-item {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.facility-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(7, 132, 39, 0.05), transparent);
  transition: left 0.5s ease;
}

.facility-item:hover::before {
  left: 100%;
}

.facility-item:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 12px 35px rgba(7, 132, 39, 0.15);
}

.facility-item img {
  transition: transform 0.4s ease;
  filter: grayscale(20%);
}

.facility-item:hover img {
  transform: scale(1.1) rotate(5deg);
  filter: grayscale(0%);
}

.facility-item h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.facility-item:hover h4 {
  color: var(--accent-color);
}

.facility-item p {
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
}

/* Nuestros Servicios - Service Items */
.services .service-item {
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 15px;
  padding: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.services .service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), #f89340);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.services .service-item:hover::before {
  transform: scaleX(1);
}

.services .service-item:hover {
  transform: translateY(-10px);
  border-color: var(--accent-color);
  box-shadow: 0 15px 40px rgba(7, 132, 39, 0.2);
}

.services .service-item img {
  transition: all 0.4s ease;
  filter: brightness(0.95);
}

.services .service-item:hover img {
  transform: scale(1.15);
  filter: brightness(1) drop-shadow(0 5px 15px rgba(7, 132, 39, 0.3));
}

.services .service-item h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--heading-color);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

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

.services .service-item p {
  font-family: 'Roboto', sans-serif;
  line-height: 1.7;
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 20px;
}

.services .service-item .btn {
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.services .service-item .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 132, 39, 0.4);
}


/* Gallery Section - Enhanced UX/UI */
#gallery .img-fluid {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#gallery .img-fluid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(7, 132, 39, 0.7), rgba(248, 147, 64, 0.7));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

#gallery .img-fluid:hover::before {
  opacity: 1;
}

#gallery .img-fluid:hover {
  transform: scale(1.05) translateY(-5px);
  border-color: var(--accent-color);
  box-shadow: 0 15px 40px rgba(7, 132, 39, 0.25);
  border-radius: 10px;
  z-index: 10;
}

#gallery .h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--heading-color);
  font-size: 2.5rem;
}

#gallery .lead {
  font-family: 'Roboto', sans-serif;
  color: #666;
  font-size: 1.1rem;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-container {
  background-color: var(--accent-color);
  height: 100%;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.contact .info-item {
  width: 100%;
  margin-bottom: 24px;
  padding: 24px;
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--contrast-color), transparent 90%);
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

.contact .info-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.contact .info-item i {
  font-size: 22px;
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--contrast-color), transparent 80%);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  margin-right: 18px;
  flex-shrink: 0;
}

.contact .info-item h3 {
  color: var(--contrast-color);
  font-size: 19px;
  padding: 0;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.contact .info-item:hover i {
  background: var(--contrast-color);
  color: var(--accent-color);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contact .contact-form {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 100%;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.contact .contact-form:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.contact .contact-form h2 {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.5px;
}

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

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

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

.contact .contact-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 .contact-form input[type=text],
.contact .contact-form input[type=email],
.contact .contact-form textarea {
  font-size: 15px;
  padding: 14px 18px;
  box-shadow: none;
  border-radius: 8px;
  color: var(--default-color);
  background-color: #f8f9fa;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
  font-family: var(--default-font);
}

.contact .contact-form input[type=text]:focus,
.contact .contact-form input[type=email]:focus,
.contact .contact-form textarea:focus {
  border-color: var(--accent-color);
  background-color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(7, 132, 39, 0.1);
}

.contact .contact-form input[type=text]::placeholder,
.contact .contact-form input[type=email]::placeholder,
.contact .contact-form textarea::placeholder {
  color: #999999;
  font-weight: 400;
}

.contact .contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact .contact-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 14px 40px;
  transition: all 0.4s ease;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(7, 132, 39, 0.3);
  margin-top: 10px;
}

.contact .contact-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 132, 39, 0.4);
}

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

  100% {
    transform: rotate(360deg);
  }
}
.loading {
  display: none;
}

/*--------------------------------------------------------------
# Bootstrap Overrides - Colores Verdes
--------------------------------------------------------------*/
/* Botones primarios con color verde */
.btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--contrast-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: color-mix(in srgb, var(--accent-color), black 15%) !important;
  border-color: color-mix(in srgb, var(--accent-color), black 15%) !important;
  color: var(--contrast-color) !important;
}

/* Fondo primario (usado en stats section) */
.bg-primary {
  background-color: var(--accent-color) !important;
}

/* Badge primario */
.badge.bg-primary {
  background-color: var(--accent-color) !important;
}

/* Iconos primarios */
.text-primary {
  color: var(--accent-color) !important;
}