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

	Theme Name: legal
	Theme URI: http://themeforest.net/user/zytheme
	Description: legal is a pixel perfect creative html5 legal landing page  based on designed with great attention to details, flexibility and performance. It is ultra professional, smooth and sleek, with a clean modern layout.
	Author: zytheme
	Author URI: http://themeforest.net/user/zytheme
	Version: 1.0

-----------------------------------------------------------------------------------*/
/*!
// Contents
// ------------------------------------------------>

 1.  Global Styles
 2.  Typography
 3.	 Color
 4.	 Align
 5.	 Grid
 6.	 Blockquotes
 7.	 Background
 8.	 Breadcrumbs
 9.	 Buttons
 10. Forms
 11. Icons
 12. List
 13. Media
 14. Tabs
 15. Accordions
 16. Page Title
 17. Pagination
 18. Alerts
 19. Backtop
 20. Range
 21. Icon Box
 22. Misc
 23. Modals
 24. Animation
 25. Tables
 26. Heading
 27. Loading
 28. Header
 29. Menu
 30. Hero
 31. Team
 32. Testimonial
 33. Portfolio
 34. Feature
 35. Call To Action
 36. Counter
 36-37. Servicios
 37. Pricing Tables
 38. Blog
 39. Shop
 40. Contact
 41. Sidebar
 42. Footer
 43. 404
 44. Soon
 45. Maintenance
 46. Clients
 47. Process
 48. Skills
 49. Video
 50. Newsletter
 51. Timeline
 52. Carousel
 53. Divider
 54. Banner
 55. Number
 56. Pie Charts
 57. Side Nav
 58. Landing
 59. Layout Boxed
 60. Layout Bordered
 61. Layout Split

/*------------------------------------*\
    #GLOBAL STYLES
\*------------------------------------*/
/*
WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use 
the custom.css file to add your styles. You can copy a style from this file and paste it in 
custom.css and it will override the style in this file. You have been warned! :)
*/
body,
html {
  overflow-x: hidden;
}

html {
  font-size: 13px;
}

body {
  background-color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  line-height: 1.5;
  margin: 0;
}

.wrapper {
  background-color: #f9f9f9;
}

* {
  outline: none;
}

::-moz-selection {
  text-shadow: none;
}

::selection {
  background-color: #106B40;
  color: #ffffff;
  text-shadow: none;
}

a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #106B40;
}

a:hover {
  color: #cd974e;
  text-decoration: none;
}

a:focus {
  color: #cd974e;
  outline: none;
  text-decoration: none;
}

a:active {
  color: #cd974e;
  outline: none;
  text-decoration: none;
}

textarea {
  resize: none;
}

button.btn {
  margin-bottom: 0;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn.active.focus {
  outline: none;
}

.modal-backdrop {
  z-index: 1020;
  background-color: rgba(34, 34, 34, 0.95);
}

.fullscreen {
  height: 100vh !important;
}

/* Custom, iPhone Retina */
/* Small Devices, Tablets */
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  .fullscreen {
    height: auto !important;
  }
}

/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/
/* Heading Text */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #363636;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  margin: 0 0 28px;
  line-height: 1;
}

.h1,
h1 {
  font-size: 52px;
}

.h2,
h2 {
  font-size: 42px;
}

.h3,
h3 {
  font-size: 38px;
}

.h4,
h4 {
  font-size: 32px;
}

.h5,
h5 {
  font-size: 24px;
}

.h6,
h6 {
  font-size: 18px;
}

p {
  color: #999999;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
}

.lead {
  font-size: 16px;
  line-height: 1.8;
}

/* Aligning Text */
.text--left {
  text-align: left !important;
}

.text--right {
  text-align: right !important;
}

.text--center {
  text-align: center !important;
}

.text--just {
  text-align: justify !important;
}

.align--top {
  vertical-align: top;
}

.align--bottom {
  vertical-align: bottom;
}

.align--middle {
  vertical-align: middle;
}

.align--baseline {
  vertical-align: baseline;
}

/* Weight Text */
.bold {
  font-weight: bold;
}

.regular {
  font-weight: normal;
}

.italic {
  font-style: italic;
}

.break-word {
  word-wrap: break-word;
}

.no-wrap {
  white-space: nowrap;
}

/* Text Color */
.text-white {
  color: #ffffff !important;
}

.text-gray {
  color: #f8f8f8 !important;
}

.text-black {
  color: #363636;
}

.text-theme {
  color: #106B40;
}

.text--capitalize {
  text-transform: capitalize !important;
}

.text--uppercase {
  text-transform: uppercase !important;
}

.font-heading {
  font-family: 'Merriweather', serif;
}

.font-body {
  font-family: 'Open Sans', sans-serif;
}

.font-18 {
  font-size: 24px;
}

.font-16 {
  font-size: 16px;
}

.font-20 {
  font-size: 20px;
}

.font-40 {
  font-size: 40px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  text-center-xs {
    text-align: center !important;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  text-center-sm {
    text-align: center !important;
  }
}

.higlighted-style1 {
  background-color: #106B40;
  color: #fff;
  padding: 5px 0;
}

.higlighted-style2 {
  background-color: #363636;
  color: #fff;
  padding: 5px 0;
}

.higlighted-style3 {
  background-color: #f8f8f8;
  color: #106B40;
  padding: 5px 0;
}

/*------------------------------------*\
    #COLORS
\*------------------------------------*/
.color-heading {
  color: #363636 !important;
}

.color-theme {
  color: #106B40 !important;
}

.color-white {
  color: #ffffff !important;
}

.color-gray {
  color: #f8f8f8 !important;
}

/*------------------------------------*\
    #Align
\*------------------------------------*/
address,
blockquote,
dd,
dl,
fieldset,
form,
ol,
p,
pre,
table,
ul {
  margin-bottom: 20px;
}

section {
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
}

/* All margin */
.m-0 {
  margin: 0 !important;
}

.m-xs {
  margin: 10px;
}

.m-sm {
  margin: 20px;
}

.m-md {
  margin: 40px;
}

.m-lg {
  margin: 80px;
}

/* top margin */
.mt-0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: 10px;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mt-90 {
  margin-top: 90px !important;
}

.mt-100 {
  margin-top: 100px !important;
}

.mt-150 {
  margin-top: 150px;
}

/* bottom margin */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

.mb-150 {
  margin-bottom: 150px !important;
}

/* right margin */
.mr-0 {
  margin-right: 0;
}

.mr-30 {
  margin-right: 30px !important;
}

.mr-50 {
  margin-right: 50px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-150 {
  margin-right: 150px;
}

/* left margin */
.ml-0 {
  margin-left: 0;
}

.ml-xs {
  margin-left: 10px;
}

.ml-sm {
  margin-left: 20px;
}

.ml-md {
  margin-left: 40px;
}

.ml-lg {
  margin-left: 80px;
}

.ml-30 {
  margin-left: 30px !important;
}

.ml-50 {
  margin-left: 50px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-150 {
  margin-left: 150px;
}

/* All padding */
.p-0 {
  padding: 0 !important;
}

.p-xs {
  padding: 10px;
}

.p-sm {
  padding: 20px;
}

.p-md {
  padding: 40px;
}

.p-lg {
  padding: 80px;
}

/* top padding */
.pt-0 {
  padding-top: 0 !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

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

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px !important;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px !important;
}

.pt-150 {
  padding-top: 150px !important;
}

/* bottom padding */
.pb-0 {
  padding-bottom: 0 !important;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px !important;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px !important;
}

/* right padding */
.pr-0 {
  padding-right: 0;
}

.pr-xs {
  padding-right: 10px;
}

.pr-sm {
  padding-right: 20px;
}

.pr-md {
  padding-right: 40px;
}

.pr-lg {
  padding-right: 80px;
}

.pr-15 {
  padding-right: 15px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.pr-50 {
  padding-right: 50px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-100 {
  padding-right: 100px !important;
}

.pr-150 {
  padding-right: 150px;
}

/* left padding */
.pl-0 {
  padding-left: 0 !important;
}

.pl-30 {
  padding-left: 30px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-100 {
  padding-left: 100px !important;
}

.pl-150 {
  padding-left: 150px;
}

/* Postions */
.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.static {
  position: static;
}

/* Zindex*/
.zindex-1 {
  z-index: 1;
}

.zindex-2 {
  z-index: 2;
}

.zindex-3 {
  z-index: 3;
}

/* Borders */
.border-all {
  border: 1px solid #106B40;
}

.border-top {
  border-top: 1px solid #106B40;
}

.border-bottom {
  border-bottom: 1px solid #106B40;
}

.border-right {
  border-right: 1px solid #106B40;
}

.border-left {
  border-left: 1px solid #106B40;
}

/* Display */
.inline {
  display: inline;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.hide {
  display: none;
}

.flex {
  display: flex;
}

@media only screen and (max-width: 767px) {
  section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .text-center-xs {
    text-align: center !important;
  }

  .pull-none-xs {
    float: none !important;
    text-align: center !important;
  }

  .mb-15-xs {
    margin-bottom: 15px;
  }

  .mb-30-xs {
    margin-bottom: 30px !important;
  }

  .mb-50-xs {
    margin-bottom: 50px;
  }

  .mb-60-xs {
    margin-bottom: 60px !important;
  }

  .p-none-xs {
    padding-right: 0;
    padding-left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .text-center-sm {
    text-align: center !important;
  }

  .mb-0-sm {
    margin-bottom: 0;
  }

  .mb-15-sm {
    margin-bottom: 15px;
  }

  .mb-30-sm {
    margin-bottom: 30px !important;
  }

  .mb-50-sm {
    margin-bottom: 50px;
  }

  .mb-60-sm {
    margin-bottom: 60px;
  }

  .pb-15-sm {
    padding-bottom: 15px;
  }

  .pb-30-sm {
    padding-bottom: 30px;
  }

  .pb-50-sm {
    padding-bottom: 50px;
  }

  .pb-60-sm {
    padding-bottom: 60px;
  }

  .p-none-sm {
    padding-right: 0;
    padding-left: 0;
  }

  .pull-none-sm {
    float: none !important;
    text-align: center !important;
  }
}

.border-b {
  border-bottom: 1px solid #f8f8f8;
}

/*------------------------------------*\
    #Grid
\*------------------------------------*/
.row-no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.col-lg-5ths,
.col-md-5ths,
.col-sm-5ths,
.col-xs-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}

.col-content {
  padding: 120px 100px 90px 120px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .col-content {
    padding: 40px !important;
  }
}

/* Small Devices, Tablets */
.col-img {
  height: 833px !important;
  padding: 60px;
  overflow: hidden;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .col-img {
    height: auto;
    min-height: 600px;
  }
}

/* Postion Helpers */
.pos-fixed {
  position: fixed;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.pos-static {
  position: static;
}

.pos-top {
  top: 0;
}

.pos-bottom {
  bottom: 0;
}

.pos-right {
  right: 0;
}

.pos-left {
  left: 0;
}

.pos-vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: perspective(1px) translateY(-50%);
  -moz-transform: perspective(1px) translateY(-50%);
  -o-transform: perspective(1px) translateY(-50%);
  transform: perspective(1px) translateY(-50%);
}

.height-700 {
  height: 700px !important;
}

.height-500 {
  height: 500px !important;
}

.height-800 {
  height: 800px !important;
}

@media only screen and (min-width: 992px) {

  .hidden-lg,
  .hidden-md {
    display: none;
  }
}

/*------------------------------------*\
    #BACKGROUNDS
\*------------------------------------*/
.bg-theme {
  background-color: #106B40 !important;
}

.bg-gray {
  background-color: #f8f8f8 !important;
}

.bg-white {
  background-color: #106B40 !important;
}

.bg-dark {
  background-color: #363636 !important;
}
.full-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(30%); /* Reduce el brillo sin afectar opacidad */
  z-index: -1; /* Coloca el video detrás de otros elementos */
}
/* Background video */
.bg-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

.bg-overlay:before {
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.bg-overlay-light:before {
  background-color: #ffffff;
  opacity: 0.8;
}

.bg-overlay-dark:before {
  background-color: #333333;
  opacity: 0.7;
}

.bg-overlay-theme:before {
  background-color: #106B40;
  opacity: 0.7;
}

.bg-parallex {
  background-attachment: fixed;
}

.bg-ytvideo.bg-overlay:before {
  z-index: 1;
  opacity: .7;
}

/* Background Color Palettes */
.bg-purple {
  color: #ffffff;
  background-color: #cc66cc !important;
}

.bg-sun-flower {
  color: #ffffff;
  background-color: #f1c40f !important;
}

.bg-orange {
  color: #ffffff;
  background-color: #f39c12 !important;
}

.bg-carrot {
  color: #ffffff;
  background-color: #e67e22 !important;
}

.bg-pumpkin {
  color: #ffffff;
  background-color: #d35400 !important;
}

.bg-alizarin {
  color: #ffffff;
  background-color: #e74c3c !important;
}

.bg-pomegranate {
  color: #ffffff;
  background-color: #c0392b !important;
}

.bg-turquoise {
  color: #ffffff;
  background-color: #1abc9c !important;
}

.bg-green-sea {
  color: #ffffff;
  background-color: #16a085 !important;
}

.bg-emerald {
  color: #ffffff;
  background-color: #2ecc71 !important;
}

.bg-nephritis {
  color: #ffffff;
  background-color: #27ae60 !important;
}

.bg-peter-river {
  color: #ffffff;
  background-color: #3498db !important;
}

.bg-belize-hole {
  color: #ffffff;
  background-color: #2980b9 !important;
}

.bg-amethyst {
  color: #ffffff;
  background-color: #9b59b6 !important;
}

.bg-wisteria {
  color: #ffffff;
  background-color: #8e44ad !important;
}

.bg-wet-asphalt {
  color: #ffffff;
  background-color: #34495e !important;
}

.bg-wet-asphalt {
  color: #ffffff;
  background-color: #34495e !important;
}

.bg-midnight-blue {
  color: #ffffff;
  background-color: #2c3e50 !important;
}

.bg-clouds {
  color: #454545;
  background-color: #ecf0f1 !important;
}

.bg-silver {
  color: #ffffff;
  background-color: #bdc3c7 !important;
}

.bg-concrete {
  color: #ffffff;
  background-color: #859596 !important;
}

.bg-asbestos {
  color: #ffffff;
  background-color: #7f8c8d !important;
}

.bg-asbestos {
  color: #ffffff;
  background-color: #7f8c8d !important;
}

.bg-graphite {
  color: #ffffff;
  background-color: #454545 !important;
}

.bg-gray-0 {
  background-color: #EEEEEE !important;
  color: #454545;
}

.bg-gray-1 {
  background-color: #ECECEC !important;
  color: #454545;
}

.bg-gray-2 {
  background-color: #BDC3C7 !important;
  color: #454545;
}

.bg-gray-3 {
  background-color: #DADFE1 !important;
  color: #454545;
}

.bg-gray-5 {
  background-color: #ECF0F1 !important;
  color: #454545;
}

.bg-gray-4 {
  background-color: #F2F1EF !important;
  color: #454545;
}

.bg-gray-6 {
  background-color: #D2D7D3 !important;
  color: #454545;
}

.bg-gray-7 {
  background-color: #E6E6E6 !important;
  color: #454545;
}

.bg-orange-1 {
  background-color: #F9690E !important;
  color: #ffffff;
}

.bg-orange-2 {
  background-color: #D35400 !important;
  color: #ffffff;
}

.bg-orange-3 {
  background-color: #F89406 !important;
  color: #ffffff;
}

/* Background Video */
.bg-ytvideo {
  position: absolute !important;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 0 !important;
}
.bg-video {
  width: 100%;
  overflow: hidden;
  behavior: url(https://landing.zytheme.com/PIE.htc);
  transform: translateZ(0);
  display: block;
  border-radius: 0;
}

.bg-video iframe {
  display: block;
  position: absolute;
  z-index: -2;
}

.bg-video .bg-player {
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: url(polina.html) no-repeat;
  min-height: 500px;
}

.bg-video .vidbg {
  min-width: 100%;
  min-height: 100%;
}

.bg-vyoutube {
  z-index: 550;
  text-align: center;
  height: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
.btn {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-radius: 6px;
  padding: 0;
  line-height: 53px;
  width: 210px;
  height: 53px;
}

.btn.active,
.btn:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Button Primary */
.btn--primary {
  background-color: #106B40;
  color: #ffffff;
}

.btn--primary:active,
.btn--primary:focus,
.btn--primary:hover {
  background-color: #363636;
  color: #ffffff;
}

.bg-dark .btn--primary:active,
.bg-dark .btn--primary:focus,
.bg-dark .btn--primary:hover {
  background-color: #dbb683;
  color: #ffffff;
}

/* Button Secondary*/
.btn--secondary {
  background-color: #363636;
  color: #ffffff;
  border: 2px solid #363636;
}

.btn--secondary:active,
.btn--secondary:focus,
.btn--secondary:hover {
  background-color: #106B40;
  color: #ffffff;
  border-color: #106B40;
}

/* Button White */
.btn--white {
  background-color: #ffffff;
  color: #363636;
  border: 1px solid #ffffff;
  border-radius: 4px;
}

.btn--white:active,
.btn--white:focus,
.btn--white:hover {
  background-color: #106B40;
  color: #ffffff;
  border-color: #106B40;
}

/* Button Block */
.btn--block {
  width: 100%;
}

.btn--auto {
  width: auto;
}

/* Button Rounded */
.btn--rounded {
  border-radius: 50px;
}

/* Button Bordered */
.btn--bordered {
  background-color: transparent;
}

.btn--bordered.btn--primary {
  color: #106B40;
  border-color: #106B40;
}

.btn--bordered.btn--primary:active,
.btn--bordered.btn--primary:focus,
.btn--bordered.btn--primary:hover {
  color: #ffffff;
  background-color: #106B40;
  border-color: #106B40;
}

.btn--bordered.btn--secondary {
  color: #363636;
  border-color: #363636;
}

.btn--bordered.btn--secondary:active,
.btn--bordered.btn--secondary:focus,
.btn--bordered.btn--secondary:hover {
  color: #ffffff;
  background-color: #363636;
  border-color: #363636;
}

.btn--bordered.btn--white {
  color: #ffffff;
  border-color: #ffffff;
}

.btn--bordered.btn--white:active,
.btn--bordered.btn--white:focus,
.btn--bordered.btn--white:hover {
  color: #106B40;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn--white.btn--secondary {
  color: #363636;
  border-color: #ffffff;
  background-color: #ffffff;
}

.btn--white.btn--secondary:active,
.btn--white.btn--secondary:focus,
.btn--white.btn--secondary:hover {
  color: #ffffff;
  background-color: #106B40;
  border-color: #106B40;
}

.bg-theme .btn--primary,
.bg-overlay-theme .btn--primary {
  background-color: #ffffff;
  color: #106B40;
}

.bg-theme .btn--primary:hover,
.bg-overlay-theme .btn--primary:hover {
  background-color: #363636;
  color: #ffffff;
}

.portfolio-filter li a.active-filter,
.portfolio-filter li a:hover {
  color: #106B40;
}

.navbar-toggle {
  border-color: #106B40;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  margin-top: 0px;
}

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
.form-control {
  color: #999999;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 45px;
  height: 45px;
  text-transform: capitalize;
  border: none;
  background: #f5f5f5;
  padding-left: 24px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 6px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control:focus {
  border-color: #106B40;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Placeholder */
.form-control::-webkit-input-placeholder {
  color: #999999;
}

.form-control:-moz-placeholder {
  color: #ffffff;
}

.form-control::-moz-placeholder {
  color: #999999;
}

.form-control:-ms-input-placeholder {
  color: #999999;
}

.input-group {
  border-radius: 25px;
  border: 1px solid #ffffff;
  background-color: transparent;
  overflow: hidden;
  padding: 3px;
}

.input-group .btn {
  width: 160px;
}

.input-group .input-group-btn {
  border-radius: 50px;
  overflow: hidden;
}

/*------------------------------------*\
    #PAGE-TTILE
\*------------------------------------*/
.page-title {
  padding: 0;
}

.page-title .title {
  padding: 243px 0 163px;
}

.page-title .title--heading {
  margin-bottom: 0;
}

.page-title .title--heading h1 {
  color: #ffffff;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  /*  text-transform: capitalize; */
  margin-bottom: 22px;
}

.page-title .breadcrumb,
.page-title .breadcrumb a {
  color: #eeeeee;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.page-title .breadcrumb .active {
  color: #106B40;
}

.page-title .breadcrumb a:hover {
  color: #106B40;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .page-title .title {
    padding: 120px 0 80px;
  }

  .page-title .title--heading h1 {
    font-size: 40px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-title .title {
    padding: 150px 0 100px;
  }

  .page-title .title--heading h1 {
    font-size: 60px;
  }
}

/*------------------------------------*\
    #PAGINATION
\*------------------------------------*/
.pagination {
  margin: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.pagination>li {
  margin-right: 5px;
  display: inline-block;
}

.pagination>li>a,
.pagination>li>span {
  background-color: transparent;
  color: #363636;
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
  border: 2px solid #e0e0e0;
  text-transform: uppercase;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 25px;
  text-align: center;
}

.pagination>.active>a,
.pagination>li:hover>a {
  background-color: #363636 !important;
  color: #ffffff;
  border-color: #363636 !important;
}

/*------------------------------------*\
    #BREADCRUMB
\*------------------------------------*/
/* Breadcrumb Style 1 */
.breadcrumb {
  background-color: transparent;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  color: #e5e4e4;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
}

.breadcrumb>li+li:before,
.breadcrumb>li a {
  color: #e5e4e4;
}

.breadcrumb>.active {
  color: #f8f8f8;
}

.breadcrumb-2>li+li:before {
  content: "\f101";
  font-family: fontawesome;
}

.breadcrumb-3>li+li:before {
  content: "\f105";
  font-family: fontawesome;
}

.breadcrumb>li a:hover {
  color: #106B40;
}

/*------------------------------------*\
    #Heading
\*------------------------------------*/
.heading .heading--title {
  font-family: 'Merriweather', serif;
  color: #000000;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  text-transform: capitalize;
  padding-bottom: 0;
  font-weight: bold;
}
.heading--title-5 {
  font-family: 'Merriweather', serif;
  color: #ffffff !important;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  text-transform: capitalize;
  padding-bottom: 0;
  font-weight: bold;
}

.heading .heading--divider {
  position: relative;
  margin-bottom: 43px;
  height: 1px;
}

.heading .heading--divider:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 50px;
  height: 1px;
  background-color: #106B40;
}

.heading .heading--center:after {
  left: 50%;
  margin-left: -25px;
}

.heading .heading--desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 35px;
  color: black;
  
}

.heading .heading--title+.heading--desc {
  margin-top: 26px;
}

.heading .heading--title+.heading--divider {
  margin-top: 35px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .heading .heading--title {
    font-size: 30px;
  }
}

/* Small Devices, Tablets */
/*------------------------------------*\
    #LOADING-SECTION
\*------------------------------------*/
.preloader {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  background-color: #ffffff;
  overflow: hidden;
}
/*HIDEN*/
/* Efecto de desaparición con animación */
.hidden {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none; /* Evita que siga interactuable cuando está oculto */
}

/* Cuando el navbar y el logo están visibles */
.header .navbar, .header .logo {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/*FLECHA HACIA ARRIBA*/
/* Flecha de scroll */
.scroll-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  color: white; /* Color de la flecha */
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 50%; /* Hace que sea circular */
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0; /* Inicialmente oculta */
  pointer-events: none; /* Evita que sea clickeable si está oculta */
  z-index: 1000;
}

.scroll-top img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Asegura que la imagen tenga forma circular */
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
}

/* Cuando la flecha es visible */
.scroll-top.show {
  opacity: 1;
  pointer-events: auto;
}



/*------------------------------------*\
    #HEADER
\*------------------------------------*/
.header {
  height: 50px;
}

.header-transparent {
  background: transparent;
}

.header-transparent+.mtop-100,
.header-transparent+.page-title {
  position: relative;
  margin-top: -100px;
}
/* Mantener el fondo degradado mientras se oculta */
/* Oculta solo el contenido del menú y el logo, pero deja el navbar con su fondo */
.navbar-hidden #navbar-collapse-1,
.navbar-hidden .logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Asegura que el navbar siempre tenga su fondo degradado */
.header .navbar {
    background: linear-gradient(to bottom, rgba(15, 107, 68, 1), rgba(15, 107, 68, 0.7), rgba(15, 107, 68, 0.3), rgba(15, 107, 68, 0));
    transition: background 0.3s ease;
}
/*------------------------------------*\
    #Menu
\*------------------------------------*/
.header .navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

.header .navbar {
  margin-bottom: 0;
  border-radius: 0;
  min-height: 50px;
  border: none;
  background: linear-gradient(to bottom, rgba(15, 107, 68, 1), rgba(15, 107, 68, 0.7), rgba(15, 107, 68, 0.3), rgba(15, 107, 68, 0));
  transition: background 0.3s ease;
}
.header::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, rgba(15, 107, 68, 1), rgba(15, 107, 68, 0.7), rgba(15, 107, 68, 0.3), rgba(15, 107, 68, 0));
}
.next-section {
  background: linear-gradient(to top, #0d4c2a, rgba(0, 51, 0, 0.7), rgba(0, 51, 0, 0));
  padding-top: 50px; /* Ajusta según sea necesario */
}


.header .navbar.affix {
  top: 0;
}

.header-bordered .navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header .navbar .logo {
  max-width: 100%;
  height: auto;
  line-height: 100px;
}

.navbar-nav:not(.nav-pos-right) {
  margin-right: 200px;
}

.nav-bordered-right {
  margin-right: 30px;
}

.nav-bordered-right+.module:first-of-type:before {
  position: relative;
  margin-left: 12px;
}

.nav-bordered-right+.module:first-of-type:before {
  position: absolute;
  top: 50%;
  margin-top: -13px;
  left: -46px;
  content: "";
  width: 2px;
  height: 26px;
  background-color: #c9c9c9;
}

.affix .nav-bordered-right+.module:first-of-type:before {
  background-color: #c9c9c9;
}

.navbar-nav>li {
  margin-right: 32px;
}

.navbar-nav>li>a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 100px;
  color: #ffffff;
  padding: 0;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
  background-color: transparent;
  border: none;
}

.navbar-nav>li.active>ul {
  margin-top: 0;
}

.navbar-nav>li>a:focus,
.navbar-nav>li>a:hover {
  background-color: transparent;
  color: #ffffff;
}

/* Menu Level #1 */
.navbar-nav>li>a:before {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 3px;
  background: transparent;
  content: '';
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.navbar-nav>li>a:hover::before,
.navbar-nav>li.active>a:before {
  background-color: #ffffff;
  width: 100%;
}

.transparent-header .navbar {
  background-color: transparent;
  height: 101px;
}

/* Header Light */
.header-light {
  background-color: #ffffff;
}

.header-light .navbar .logo-dark {
  display: inline-block;
}

.header-light .navbar .logo-light {
  display: none;
}

.header-light .navbar .navbar-nav>li>a:hover::before,
.header-light .navbar .navbar-nav>li.active>a:before {
  background-color: #222222;
}

/* Header Fixed */
.header-fixed .affix {
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
  -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
  display: block;
}

.header-fixed:not(.header-light) .navbar .logo-dark {
  display: none;
}

.header-fixed .navbar.affix {
  background: linear-gradient(to bottom, rgba(15, 107, 68, 1), rgba(15, 107, 68, 0.7), rgba(15, 107, 68, 0.3), rgba(15, 107, 68, 0)) !important;
  box-shadow: none !important; /* Evita que se genere una línea de sombra */
}




/* Estilo para el navbar antes de hacer scroll */
.header .navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: none !important;
}

/* Estilo cuando el navbar está fijo y no tiene el estado de "affix" */
.header-fixed .navbar {
  border-bottom: 3px solid rgba(16, 107, 64, 0);
  /* Línea inferior transparente en estado fijo sin "affix" */
}



.header-fixed .navbar.affix .logo-dark {
  display: inline-block;
}

.header-fixed .navbar.affix .logo-light {
  display: none;
}

.header-fixed .navbar.affix .module .module-icon i,
.header-fixed .navbar.affix .navbar-nav>li>a {
  color: #222222;
}

.header-fixed .navbar.affix .navbar-nav>li>a:hover::before,
.header-fixed .navbar.affix .navbar-nav>li.active>a:before {
  background-color: #222222;
}

/* Header Centered */
.header-centered {
  height: 255px;
}

.header-centered .navbar-collapse {
  padding-right: 260px;
  padding-left: 260px;
}

.header-centered .navbar {
  top: 155px;
}

.header-centered .navbar.affix {
  top: 0;
}

.header-centered .logo-centered {
  padding-top: 50px;
  padding-bottom: 25px;
}

/* Header With Top Bar */
.header-topbar {
  height: 155px;
}

.header-topbar .navbar {
  top: 55px;
}

.header-topbar .navbar.affix {
  top: 0;
}

/* Header #3 */
.header-3 .navbar-nav {
  margin-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.header-3 .navbar+.module:first-of-type:before {
  position: relative;
  margin-left: 12px;
}

/* Header #5 */
.header-5 .container-fluid {
  padding-right: 0;
}

.header-5 .module {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.header-5 .module .module-icon {
  margin-left: 25px;
  margin-right: 25px;
}

/* Header #5 */
.header-6 .container-fluid {
  padding-right: 0;
}

.header-6 .navbar {
  min-height: 79px;
}

.header-6 .navbar .logo {
  height: 79px;
  line-height: 79px;
}

.header-6 .module .module-icon {
  line-height: 79px;
}

.header-6 .module .module-label {
  top: 24px;
  right: 17px;
  left: auto;
}

.header-6 .navbar-nav>li {
  margin-right: 0;
}

.header-6 .navbar-nav>li>a {
  padding-right: 32px;
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  line-height: 79px;
}

.header-6 .navbar-nav>li>.menu-item:before {
  display: none;
}

.header-6 .navbar-nav>li.active,
.header-6 .navbar-nav>li:hover {
  background-color: rgba(34, 34, 34, 0.5);
}

.header-6 .module {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.header-6 .module .module-icon {
  margin-left: 32px;
  margin-right: 32px;
}

/* Header Centered */
.header-7 {
  height: 305px;
}

.header-7 .navbar {
  top: 205px;
}

.header-7 .navbar.affix {
  top: 0;
}

/* Header #13 */
.header-13 .logo {
  position: absolute;
  left: 50%;
  margin-left: -51px;
}

/* Header #10 */
.header-10 .nav-bordered-right+.module:first-of-type:before {
  background-color: #464d52;
}

/* Header #16 */
.header-16 .navbar {
  top: 30px;
}

.header-16 .navbar.affix {
  top: 0;
}

/* Header #17 */
.header-centered.header-17 {
  height: 265px;
}

.header-centered.header-17 .navbar {
  top: 165px;
}

.header-17 .navbar.affix {
  top: 0;
}

/* Header Half */
.header-half .navbar-nav>li>.menu-item:before {
  bottom: 36px;
}

/* Container Bordered */
.container-bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  height: 100px;
}

/* Navbar Dark */
.header-transparent.header-light .navbar.affix {
  background-color: transparent;
}

.navbar.navbar--dark .logo-dark {
  display: inline-block !important;
}

.navbar.navbar--dark .logo-light {
  display: none;
}

.navbar.navbar--dark .module .module-icon,
.navbar.navbar--dark .module .module-icon i,
.navbar.navbar--dark .navbar-nav>li>a {
  color: #222222;
}

.navbar.navbar--dark .navbar-nav>li>.menu-item:hover::before,
.navbar.navbar--dark .navbar-nav>li.active>.menu-item:before,
.header-8 .navbar.navbar--dark .module-menu .module-icon:after {
  background-color: #222222;
}

/* Header Split */
.header-split .logo-dark {
  display: none;
}

.header-split .logo-light {
  display: inline-block;
}

.header-split .module .module-icon i,
.header-split .navbar-nav>li>a {
  color: #222222;
}

.header-split .navbar-nav>li>.menu-item:hover::before,
.header-split .navbar-nav>li.active>.menu-item:before {
  background-color: #222222;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 479px) {
  .header .navbar {
    top: 0;
  }

  .navbar-toggle .icon-bar {
    background-color: #ffffff;
  }

  .header-fixed .navbar.affix .navbar-nav>li>a {
    color: #ffffff;
  }
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .header .container {
    padding-right: 0;
    padding-left: 0;
  }

  .navbar-nav {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .navbar-toggle {
    border-color: #106B40;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-top: 35px;
  }

  .container>.navbar-header {
    margin-left: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  .container>.navbar-collapse {
    width: 100%;
    background-color: #363636;
    margin-right: 0;
    margin-left: 0;
  }

  .navbar-nav>li {
    height: auto !important;
    margin-right: 0;
  }

  .navbar-nav>li.pull-left {
    float: none !important;
  }

  /* texto de la barra de navegación */
  .navbar-nav li a {
    line-height: 36px;
    color: #ffffff;
    padding-right: 0;
    padding-left: 10px;
    padding-top: 0;
  }

  .navbar-nav>li>a:before {
    display: none;
  }

  .navbar-nav:not(.nav-pos-right) {
    margin-right: 0;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .container {
    padding-right: 0;
    padding-left: 0;
  }

  .navbar-header {
    float: none !important;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .header .navbar .logo {
    float: left;
  }

  .navbar-toggle {
    border-color: #106B40;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-top: 35px;
    display: block;
  }

  .navbar-toggle .icon-bar {
    background-color: white;
  }

  .navbar-fixed-top .navbar-collapse {
    overflow: scroll !important;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }

  .collapse.in {
    display: block !important;
  }

  .navbar-nav {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .navbar-nav>li {
    float: none;
  }

  .container>.navbar-collapse {
    width: 100%;
    background-color: #363636;
    margin-right: 0;
  }

  .navbar-nav>li {
    height: auto !important;
    margin-right: 0;
  }

  .navbar-nav>li.pull-left {
    float: none !important;
  }

  .navbar-nav>li>a {
    line-height: 36px !important;
    color: #ffffff !important;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
  }

  .navbar-toggle .icon-bar {
    background-color: #ffffff;
  }

  .navbar-nav>li:after {
    display: none;
  }

  .navbar-nav>li.active {
    border-bottom: none;
  }

  li a:hover,
  li.open>a:focus {
    color: #ffffff;
  }

  .nav>li>a:focus,
  .nav>li>a:hover {
    background-color: transparent;
  }

  .navbar-nav>li>a:before {
    display: none;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 991px) {
  .navbar.navbar--dark .navbar-nav>li>a {
    color: #ffffff;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .navbar-nav>li {
    margin-right: 16px;
  }
}

/*------------------------------------*\
    #Hero
\*------------------------------------*/
.owl-carousel .testimonial {
  position: relative;
  height: 110vh; /* Ajusta la altura del carrusel */
}

.owl-carousel .testimonial video.full-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-transparent + .slider {
  margin-top: -08vh !important;
  margin: -15px;
}

/* Ajusta la altura a pantalla completa */
.slider,
.slider .slide--item {
  height: 100vh !important; /* Ocupa el alto de la ventana */
  padding-top: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
}

/* Hace que la .container llene el alto disponible */
.slider .slide--item .container {
  height: 100%;
}

/* NUEVO: Ajusta el video para que cubra el fondo */
.slider .slide--item .bg-section {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0 !important; /* o -1 */
}

.slider .slide--item .bg-section .bg-video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔹 Contenedor principal con imagen a la izquierda y texto a la derecha */
.row.full-height-2 {
  display: flex;
  align-items: center; /* Asegura que los elementos se alineen verticalmente al centro */
  justify-content: space-between; /* Deja espacio entre los elementos */
  text-align: left;
  gap: 20px;
  height: 100%; /* Asegura que ocupe todo el alto disponible */
}

/* 🔹 Imagen a la Izquierda */
.image-left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* Asegura que la imagen ocupe el espacio disponible */
}

.logo-left {
  max-width: 80%; /* Ajusta el tamaño de la imagen */
  height: auto;
}

/* 🔹 Texto a la Derecha */
.text-right {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el texto verticalmente */
  text-align: left;
  color: white;
  flex: 1; /* Asegura que el texto ocupe el espacio disponible */
}

/* 🔹 Resaltar palabras clave */
.slide--subtitle-2 strong {
  font-weight: bold;
}

.highlight {
  color: #ffffff; /* Color dorado para "indemnización" */
}
/* 🔹 Íconos alineados debajo del texto */
.iconos {
  margin-top: 15px;
}

.icono-pequeno {
  width: 50px;
  height: auto;
}


/* 🔹 Ajustes responsivos para monitores grandes (simulación de zoom out) */
@media (min-width: 1600px) {
  .text-right {
    padding-right: 5%;
  }
}

/* 🔹 Adaptación para pantallas más pequeñas (móviles y tablets) */
@media (max-width: 1024px) {
  .row.full-height-2 {
    flex-direction: column;
    text-align: center;
  }

  .image-left, .text-right {
    width: 100%;
    text-align: center;
  }

  .logo-left {
    max-width: 60%;
  }

  .iconos {
    display: flex;
    justify-content: center;
  }
}

/* 🔹 Ajustes para texto en el hero */
.slide--headline {
  font-size: 8rem;
  color: #fff;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-align: center;
}

.slide--subtitle {
  font-size: 4rem;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
  white-space: nowrap;
  width: max-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 15%;
  padding-right: 15%;
}

.slide--subtitle-10 {
  font-size: 4rem;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
  white-space: nowrap;
  width: max-content;
  margin-left: -15%;
  margin-right: -15%;
  display: inline-block;
}

/* 🔹 Ajustes de imagen dentro del hero */
.image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  z-index: 2;
  overflow: visible;
  white-space: nowrap;
}

.centered-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
}

/* 🔹 Estilos para el texto en hero */
.text-wrapper {
  position: absolute;
  bottom: 42%;
  right: -2%;
  transform: none;
  background: rgba(255, 255, 255, 0);
  padding: 15px 20px;
  border-radius: 5px;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  display: inline-block;
  z-index: 3;
}

/* 🔹 Para monitores grandes (simulación de zoom out) */
@media (min-width: 1600px) {
  .text-wrapper {
    bottom: 44% !important;
  }
}

/* 🔹 Texto con barrido */
.slide--bio {
  font-size: 32px;
  font-weight: bold;
  color: #9E972E;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.2;
  padding-bottom: 5px;
  padding-top: 5px;
  overflow: hidden;
}

/* 🔹 Animación de barrido */
.slide--bio.active-barrido {
  animation: typingBio 2.5s ease-in-out forwards;
}

@keyframes typingBio {
  0% {
    width: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    width: 36ch;
  }
}

/* 🔹 Estilo de texto secundario */
.row.full-height {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding-left: 40px;
  z-index: 2;
}

/* El resto de reglas que ya tenías para .slider .slide--headline, .slide--bio, etc. */
.slide--headline-2 {
  font-size: 5rem;
  color: #fff;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

/* 🔹 Los textos inician sin animación */
.slide--subtitle-2 {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: fit-content;
  margin: 0 auto;
  animation: none;
}

/* 🔹 La animación se activa solo cuando Owl Carousel cambia al segundo slide */
.slide--subtitle-2.active-barrido {
  animation: typingSubtitle 3s ease-in-out forwards;
}

/* 🔹 Para textos que sobresalen */
.slide--subtitle-2.outside {
  overflow: visible;
  animation: none;
}

.slide--subtitle-2.outside.active-barrido {
  animation: typingOutsideSubtitle 3s ease-in-out forwards;
}

/* 🔹 Animación más fluida para `.slide--subtitle-2` */
@keyframes typingSubtitle {
  0% {
    width: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    width: 100%;
  }
}

/* 🔹 Animación más fluida para textos que sobresalen */
@keyframes typingOutsideSubtitle {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* 🔹 Mantener margen en middle-left sin afectar la animación */
.slide--subtitle-2.middle-left {
  margin-left: 0vh;
}

.slide--bio-2 {
  font-size: 1.2rem;
  color: #fff;
}

.slider-2,
.slider-2 .bg-section {
  overflow: visible;
}

.slider .slide--holder {
  position: relative;
}

.slider .slide--holder img {
  position: absolute;
  left: 0;
  bottom: -700px;
}

.slider-2+.clearfix {
  padding-top: 200px;
}

.slide--item .bg-ytvideo {
  height: 800px;
}

.slider .bg-ytvideo iframe {
  min-height: 800px !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .slider .row-content {
    padding-top: 120px;
  }

  .slider .slide--headline {
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
    margin-top: 0;
  }

  .slider .slide--bio {
    font-size: 14px;
    line-height: 1.5;
    padding: 0 10px;
    text-align: center;
  }

  .slider,
  .slider .slide--item {
    height: auto;
  }

  .slider .slide--item {
    padding-top: 167px;
  }

  .slider form {
    margin-bottom: 30px !important;
  }

  .slider .slide--holder img {
    position: relative;
    right: 0;
    bottom: 0;
  }

  .slide--action {
    text-align: center;
    margin-bottom: 30px;
  }

  .slider-2+.clearfix {
    padding-top: 0;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider {
    height: 600px;
  }

  .slider .slide--item {
    height: 600px;
    padding-top: 167px;
  }

  .slider .slide--headline {
    font-size: 30px;
    line-height: 1.2;
  }

  .slider .slide--bio {
    font-size: 14px;
    line-height: 1.5;
  }

  .slider .slide--holder img {
    max-width: 350px;
  }

  .slider .slide--holder img {
    position: relative;
    right: 0;
    bottom: 0;
  }

  .slider-2+.clearfix {
    padding-top: 0;
  }
}

.slide--subtitle-2.middle-left.full {
  display: block !important;
}

.slide--subtitle-2.middle-left.short {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .slide--headline,
  .slide--subtitle,
  .slide--subtitle-10,
  .slide--subtitle-2,
  .slide--subtitle-2.middle-left,
  .slide--bio {
    max-width: 90%;
    word-wrap: break-word !important;
    overflow-wrap: break-word;
    text-align: center !important;
    margin: 0 auto;
  }

  .slide--headline {
    font-size: 3rem;
    line-height: 1.2;
    text-align: center !important;
  }

  .slide--subtitle,
  .slide--subtitle-10 {
    font-size: 2rem;
    margin-left: 0;
    margin-right: 0;
    margin-left: 5vh;
  }

  .slide--subtitle-2,
  .slide--subtitle-2.middle-left,
  .slide--subtitle-2.middle-left.short {
    font-size: 1rem !important;
    line-height: 1.3;
    text-align: center !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 10px;
  }

  .slide--subtitle-2.middle-left.full {
    display: none !important;
  }
  .slide--subtitle-2.middle-left.short {
    display: block !important;
  }

  .slide--bio {
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 100%;
    padding: 0 15px;
  }

  .row.full-height,
  .row.full-height-2 {
    padding-left: 15px;
    padding-right: 15px;
  }
}



/*------------------------------------*\
    #Testimonial
\*------------------------------------*/
.testimonial-panel {
  text-align: center;
  padding: 0 10px;
}

.testimonial-panel .testimonial--body {
  margin-bottom: 20px;
}

.testimonial-panel .testimonial--body p {
  color: #999999;
  font-family: 'Merriweather', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 35px;
  margin-bottom: 0;
}

.testimonial-panel .testimonial--meta h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
  padding-top: 5px;
}

.testimonial-panel .testimonial--meta-img {
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 25px;
}

.testimonial .owl-controls {
  margin-top: 0;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .testimonial-panel .testimonial--body p {
    font-size: 15px;
    line-height: 1.6;
  }
}


/*------------------------------------*\
    #Features
\*------------------------------------*/
.feature-panel {
  position: relative;
  
}

.feature-panel .feature--icon {
  color: #106B40;
  font-size: 60px;
  line-height: 1;
  margin-bottom: 20px;
}

.feature-panel .feature--icon i {
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  transition: all .3s linear;
  display: inline-block;
}

.feature-panel .feature--icon:hover i {
  -webkit-animation: pulse 0.9s infinite;
  -moz-animation: pulse 0.9s infinite;
  -ms-animation: pulse 0.9s infinite;
  -o-animation: pulse 0.9s infinite;
  animation: pulse 0.9s infinite;
}

.feature-panel .feature--content h3 {
  font-family: "Montserrat", "Poppins", "Oswald", sans-serif;
  color: #020202;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 14px;
  
  font-weight: bold !important; /* Hace que el texto sea en negrita */

  
}

.feature-panel .feature--content p {
  opacity: 0.6;
  color: #777777;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 0;
}
.icono-pequeno {
  display: block;
  margin: auto;
  width: 100px !important;
  height: auto;
  margin-top: 20px; /* Agrega espacio arriba del icono */
}


.feature-left .feature-panel .feature--icon {
  position: absolute;
  left: 0;
  top: 0;
  margin-bottom: 0;
}

.feature-left .feature-panel .feature--content {
  padding-left: 68px;
}

.feature-left .feature-panel {
  margin-bottom: 18px;
}

/* feature left circle  */
.feature-left-circle .feature--content h3 {
  font-size: 22px;
  font-family: 'Merriweather', serif;
  font-weight: 400;
  line-height: 29px;
  margin-bottom: 15px;
}

.feature-left-circle .feature--content p {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  padding: 0;
}

.feature-left-circle .feature--icon {
  width: 45px;
  height: 45px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  color: #106B40;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  border: 2px solid #106B40;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  transition: all .2s linear;
}

.feature-left-circle .feature-panel:hover .feature--icon {
  background: #106B40;
  border-color: #106B40;
  color: #ffffff;
}

.feature-divider {
  margin-top: 0;
  margin-bottom: 0;
}

.about p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
}

.about .signture {
  margin-top: 20px;
}

.feature-2 .feature-panel {
  margin-bottom: 50px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .feature-panel {
    margin-bottom: 20px;
  }

  .feature-panel .feature--icon {
    margin-bottom: 10px;
  }

  .feature img {
    max-width: 100%;
    height: auto;
  }

  .about-content {
    margin-bottom: 30px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature-panel {
    margin-bottom: 20px;
  }

  .about-content {
    margin-bottom: 30px;
  }
}

/*------------------------------------*\
    #Call To Action
\*------------------------------------*/
/*------------------------------------*\
    #PRICING-SECTION
\*------------------------------------*/
.pricing-panel {
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  padding: 50px 65px;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  position: relative;
}

.pricing-panel:hover {
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
}

.pricing-panel .pricing--heading h4 {
  color: #106B40;
  font-family: 'Open Sans', sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.pricing-panel .pricing--heading p {
  color: #333333;
  font-size: 70px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.pricing-panel .pricing--heading span.currency {
  font-size: 18px;
  font-weight: 400;
  vertical-align: top;
  top: 10px;
  position: relative;
}

.pricing-panel .pricing--heading .pricing--desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 26px;
  text-transform: uppercase;
}

.pricing-panel .pricing--body {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.pricing-panel .pricing--body ul {
  margin-bottom: 40px;
}

.pricing-panel .btn--primary:hover {
  background-color: #dbb683;
  border-color: #dbb683;
  color: #ffffff;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .price-table {
    margin-bottom: 30px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pricing-panel {
    padding: 20px;
  }
}

/*------------------------------------*\
    #Footer
\*------------------------------------*/
.footer {
  background-color: #363636;
  padding-top: 0;
  padding-bottom: 0;
}

/* Footer Widgets */
.footer-widget {
  padding-top: 110px;
  padding-bottom: 100px;
}

.footer-widget .footer--widget-title h5 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: 40px;
}

.footer-widget .footer--widget-content p {
  color: #bdbdbd;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 20px;
}

.footer--widget-about .social a {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  margin-right: 24px;
}

.footer--widget-about .social a:hover {
  color: #106B40;
}

.footer--widget-recent .entry {
  position: relative;
  margin-bottom: 30px;
}

.footer--widget-recent .entry:last-of-type {
  margin-bottom: 0;
}

.footer--widget-recent .entry--img {
  position: absolute;
  left: 0;
  top: 0;
}

.footer--widget-recent .entry--content {
  padding-left: 90px;
}

.footer--widget-recent .entry--meta {
  color: #888888;
  font-family: 'Merriweather', serif;
  font-size: 10px;
  line-height: 1;
}

.footer--widget-recent .entry--title {
  margin-bottom: 14px;
}

.footer--widget-recent .entry--title a {
  color: #bdbdbd;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.footer--widget-recent .entry--title a:hover {
  color: #106B40;
}

.footer--widget-recent img {
  border-radius: 4px;
}

.footer--widget-recent span {
  margin-right: 8px;
}

.footer-widget .footer--widget-contact ul li {
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: #bdbdbd;
  font-family: 'Open Sans', sans-serif;
  padding-left: 30px;
  position: relative;
  margin-bottom: 30px;
}

.footer-widget .footer--widget-contact ul li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: #106B40;
  font-size: 19px;
}

.footer--copyright {
  background-color: #272727;
  padding: 33px 0;
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
}

.footer--copyright i {
  color: red;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .footer-widget {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .footer--copyright {
    font-size: 12px;
  }

  .footer--widget-content {
    margin-bottom: 30px;
  }
}

/* Small Devices, Tablets */
/*------------------------------------*\
    #Carousel
\*------------------------------------*/
.carousel-dots .owl-controls {
  margin-top: 50px;
}

.carousel-dots .owl-controls .owl-dots .owl-dot span {
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid rgba(100, 100, 100, 0.5);
  margin: 0 4px;
}

.carousel-dots .owl-controls .owl-dots .owl-dot.active span {
  background-color: #646464;
  border-color: #646464;
}

.carousel-dots.carousel-white .owl-controls .owl-dots .owl-dot span {
  border-color: rgba(255, 255, 255, 0.5);
}

.carousel-dots.carousel-white .owl-controls .owl-dots .owl-dot.active span {
  background-color: #ffffff;
  border-color: #ffffff;
}

.carousel-navs .owl-controls .owl-nav {
  position: relative;
}

.carousel-navs .owl-controls .owl-nav [class*=owl-] {
  position: absolute;
  top: 50%;
  height: 60px;
  line-height: 60px;
  margin-top: -30px;
  color: #363636;
  font-size: 0;
  font-weight: 400;
  text-align: center;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  margin-top: -250px;
}

.carousel-navs .owl-controls .owl-nav [class*=owl-]:hover {
  color: #106B40;
  background-color: transparent;
}

.carousel-navs .owl-controls .owl-nav .owl-prev {
  left: 0;
}

.carousel-navs .owl-controls .owl-nav .owl-prev:before {
  font-family: 'Linearicons-Free';
  content: "\e875";
  font-size: 40px;
}

.carousel-navs .owl-controls .owl-nav .owl-next {
  right: 0;
}

.carousel-navs .owl-controls .owl-nav .owl-next:before {
  font-family: 'Linearicons-Free';
  content: "\e876";
  font-size: 40px;
}

.carousel-navs .owl-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
}

.carousel-navs .owl-dots .owl-dot span {
  background-color: transparent;
  border: 1px solid #fff;
}

.carousel-navs .owl-dots .owl-dot.active span,
.carousel-navs .owl-dots .owl-dot:hover span {
  background: #ffffff;
}

/**/
.slider-dots .owl-controls {
  margin-top: 0;
}

.slider-dots .owl-controls .owl-dots {
  position: absolute;
  bottom: 30px;
  width: 100%;
}

.slider-dots .owl-controls .owl-dots .owl-dot span {
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.6);
  margin: 0 4px;
}

.slider-dots .owl-controls .owl-dots .owl-dot.active span {
  -moz-box-shadow: 0 0 0 2px #3d3c3c;
  -webkit-box-shadow: 0 0 0 2px #3d3c3c;
  box-shadow: 0 0 0 2px #ffffff;
}

.slider-navs .owl-controls .owl-nav [class*=owl-] {
  position: absolute;
  top: 50%;
  height: 60px;
  width: 60px;
  line-height: 60px;
  margin-top: -30px;
  color: #ffffff;
  font-size: 0;
  font-weight: 400;
  background-color: rgba(27, 26, 26, 0.5);
  text-align: center;
  padding: 0;
  border-radius: 0;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}

.slider-navs .owl-controls .owl-nav [class*=owl-]:hover {
  color: #999999;
  background-color: #ffffff;
}

.slider-navs .owl-controls .owl-nav .owl-prev {
  left: 30px;
}

.slider-navs .owl-controls .owl-nav .owl-prev:before,
.slider-navs .owl-controls .owl-nav .owl-next:before {
  font-family: fontawesome;
  font-size: 25px;
}

.slider-navs .owl-controls .owl-nav .owl-prev:before {
  content: "\f104";
}

.slider-navs .owl-controls .owl-nav .owl-next {
  right: 30px;
}

.slider-navs .owl-controls .owl-nav .owl-next:before {
  content: "\f105";
}

.slider-navs .owl-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
}

.slider-navs .owl-dots .owl-dot span {
  background-color: transparent;
  border: 1px solid #fff;
}

.slider-navs .owl-dots .owl-dot.active span,
.slider-navs .owl-dots .owl-dot:hover span {
  background: #ffffff;
}

.slider-navs.slider-small .owl-controls .owl-nav .owl-next {
  right: 0;
}

.slider-navs.slider-small .owl-controls .owl-nav .owl-prev {
  left: 0;
}

.slider-navs.slider-shop .owl-controls .owl-dots .owl-dot span {
  background-color: #3d3c3c;
  border: 2px solid #ffffff;
}

.slider-navs.slider-shop .owl-controls .owl-dots .owl-dot.active span {
  -moz-box-shadow: 0 0 0 2px #3d3c3c;
  -webkit-box-shadow: 0 0 0 2px #3d3c3c;
  box-shadow: 0 0 0 2px #3d3c3c;
}

.slider-theme.slider-navs .owl-controls .owl-nav [class*=owl-]:hover {
  color: #363636;
}

.slider-theme.slider-dots .owl-controls .owl-dots .owl-dot span {
  border-color: #106B40;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .carousel-dots .owl-controls {
    margin-top: 20px;
  }

  .slider-navs .owl-controls .owl-nav .owl-prev {
    left: 0;
  }

  .slider-navs .owl-controls .owl-nav .owl-next {
    right: 0;
  }

  .slider-navs .owl-controls .owl-nav .owl-next:before,
  .slider-navs .owl-controls .owl-nav .owl-prev:before {
    font-size: 20px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {

  .slider-navs .owl-controls .owl-nav .owl-next:before,
  .slider-navs .owl-controls .owl-nav .owl-prev:before {
    font-size: 30px;
  }
}

/*------------------------------------*\
    #Landing Page / Promo Page
\*------------------------------------*/
.landing-hero {
  height: 100vh;
  padding-top: 200px;
}

.landing-hero h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 70px;
  text-transform: capitalize;
}

.landing-hero p {
  font-family: 'Merriweather', serif;
  font-size: 18px;
  line-height: 27px;
}

.landing-demos .portfolio-filter li a {
  font-weight: 600;
}

.landing-demos .portfolio-item {
  margin-bottom: 50px;
}

.landing-demos .portfolio-title h4 {
  color: #282828;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 0;
}

.landing-demos .portfolio-title:hover h4 {
  color: #106B40;
}

.landing-demos .portfolio-img {
  -moz-box-shadow: 0 2px 3px rgba(40, 40, 40, 0.1);
  -webkit-box-shadow: 0 2px 3px rgba(40, 40, 40, 0.1);
  box-shadow: 0 0 36px 4px rgba(0, 0, 0, 0.1);
  background-color: #c0c0c0;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}

.landing-demos .portfolio-img img {
  max-width: 100%;
  height: auto;
}

.landing-demos .portfolio-item:hover .portfolio-img {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}

.landing-demos .portfolio-item:hover img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.landing-demos .portfolio-bio {
  padding-top: 23px;
}

.landing-action {
  padding-top: 200px;
}

.landing-action img {
  margin-bottom: 50px;
}

.landing-action h2 {
  font-size: 50px;
  line-height: 60px;
  margin-bottom: 50px;
}

.landing-featues {
  padding-bottom: 50px;
}

.landing-featues .feature-box {
  margin-bottom: 50px;
}

/* Portfolio Filter */
.portfolio-filter {
  text-align: center;
  margin-bottom: 36px;
}

.portfolio-filter li a {
  color: #363636;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-right: 29px;
  text-transform: capitalize;
}

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

.portfolio-filter li a.active-filter,
.portfolio-filter li a:hover {
  color: #106B40;
}

/* Portfolio Item */
.portfolio-item .portfolio--img {
  position: relative;
}

.portfolio-item .portfolio--img img {
  max-width: 100%;
  height: auto;
}

/*------------------------------------*\
    #COLOR-SWITCHER
\*------------------------------------*/
.switcher-box {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  color: #222222;
  left: 0px;
  overflow: inherit;
  padding: 0px;
  position: fixed;
  text-align: center;
  top: 200px;
  z-index: 999;
}

.switcher-box .gear-check {
  background-color: #ffffff;
  border-radius: 0 5px 5px 0;
  border: 1px solid #dddddd;
  border-left-color: transparent;
  color: #222222;
  cursor: pointer;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  padding-top: 4px;
  position: absolute;
  right: -39px;
  text-align: center;
  top: -1px;
  width: 40px;
}

.switcher-box .gear-check i {
  font-size: 30px;
}

.switcher-box .color-options {
  display: none;
  float: left;
  padding: 5px 16px;
  width: 200px;
}

.switcher-box ul {
  margin-bottom: 0;
}

.switcher-box ul li {
  border-radius: 5px;
  cursor: pointer;
  height: 30px;
  margin: 0 10px 10px 0;
  width: 30px;
}

.color-options h4 {
  border-bottom: 3px solid #eeeeee;
  font-size: 18px;
  font-weight: 700;
  line-height: 46px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .landing-hero {
    height: auto;
    padding-top: 60px;
  }

  .landing-hero h1 {
    font-size: 34px;
    line-height: 50px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .landing-hero {
    height: auto;
    padding-top: 100px;
  }

  .landing-hero h1 {
    font-size: 50px;
    line-height: 55px;
  }
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}

.bg-animate {
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 30s linear infinite;
}

/*------------------------------------*\
    #Counters - Sección de Beneficios
\*------------------------------------*/
.counter {
  position: relative;
  z-index: 2;
  background: #0F6B44; /* Color de fondo verde */
  color: white;
  padding: 80px 0;
  text-align: center;
  border-top-left-radius: 110% 90px;
  border-top-right-radius: 110% 90px;
  overflow: visible; /* Evita que la línea se corte */
}

/* Superponer la parte ovalada sobre el video */
#counter1 {
  position: relative;
  margin-top: -40px;
  z-index: 3;
}

/* Contenedor del contenido */
.counter-container {
  position: relative;
  z-index: 3;
  padding: 60px 0;
}

/* Íconos sin caja blanca extra */
.count-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.count-icon i {
  font-size: 50px;
  color: white;
}

/* Asegurar altura completa en cada caja */
/* Estilo de la línea divisoria */
.divider-line {
  position: absolute;
  top: -90px;
  right: 0;
  width: 4px; /* Grosor de la línea */
  height: calc(100% + 170px);

  background-color: white;
  z-index: 10;
}

/* Asegurar que el contenedor sea relativo para que `absolute` funcione */
.col-md-4 {
  position: relative;
}

/* Ajustar la visibilidad en móviles */
@media only screen and (max-width: 767px) {
  .divider-line {
      display: none !important; /* Se oculta en móviles */
  }
}

/* Mantiene la estructura y alineación de las cajas */
.count-box {
  position: relative;
  padding: 20px;
  text-align: center;
  min-height: 250px; /* Ajusta la altura para que la línea no se corte */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



/* Asegurar que el contenedor padre tenga posición relativa */
.row {
    position: relative;
}

/* Eliminar la línea en el último contador */
.count-box:last-child::after {
    display: none;
}

/* Ajustar altura en móviles */
@media only screen and (max-width: 767px) {
    .count-box::after {
        display: none !important; /* Se oculta en móviles */
    }
}

/* Modificar títulos */
.count-box .count-content h3 {
  font-size: 18px;
  color: white;
  font-weight: bold;
}

/* Estilos del texto de descripción */
.count-title {
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Merriweather', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  font-style: normal;
  text-align: center;
}

/* Ajustar altura en móviles */
@media only screen and (max-width: 767px) {
  .count-box::after {
      display: none; /* Se elimina en dispositivos móviles */
  }
}

/*------------------------------------*\
    #Servcios
\*------------------------------------*/

/* Contenedor ovalado para el título */
/* Contenedor ovalado para el título */
/* Contenedor ovalado para el título */
.services-header {
  position: absolute; /* Se saca del flujo normal para que se superponga */
   /* Hace que se superponga sobre la sección anterior */
  left: 0;
  width: 100vw; /* Cubre todo el ancho de la pantalla */
  background: white;
  text-align: center;
  padding: 50px 0;
  z-index: 10; /* Se asegura de estar por encima de la sección anterior */
  margin-top: -130px;
  /* Bordes ovalados */
  border-top-left-radius: 50% 100px;
  border-top-right-radius: 50% 100px;
  border-bottom-left-radius: 50% 120px;
  border-bottom-right-radius: 50% 120px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}



/* Asegurar que el contenido dentro de la sección se vea bien */
.services-header .heading {
  position: relative;
  z-index: 6; /* Para que el texto esté sobre la curva */
}

.services-header h2 {
  font-size: 36px;
  font-weight: bold;
  color: black;
}

/*------------------------------------*\
    #Flecha interactiva
\*------------------------------------*/

/* Flecha interactiva */
.scroll-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px; /* Espaciado debajo del título */
}

/* Imagen de flecha */
.flecha-interactiva {
  width: 40px; /* Ajusta el tamaño de la imagen */
  height: auto; /* Mantiene la proporción */
  animation: bounce 1.5s infinite; /* Efecto de rebote */
  cursor: pointer; /* Para indicar que es interactiva */
}

/* Animación de rebote */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* Cambio de color al pasar el mouse */
.flecha-interactiva:hover {
  filter: brightness(80%); /* Oscurece la imagen al pasar el mouse */
}


/*------------------------------------*\
    #Team
\*------------------------------------*/
.member {
  text-align: center;
  overflow: hidden;
}

.member .member-img {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.member .member-img img {
  max-width: 100%;
  height: auto;
}

.member .member-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  top: 0;
  left: 0;
}

.member .member-overlay .member-social {
  border-radius: 2px;
  background-color: #106B40;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.member .member-img:hover .member-overlay .member-social {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.member .member-overlay .member-social a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  margin-right: 20px;
}

.member .member-overlay .member-social a:last-child {
  margin-right: 0;
}

.member .member-overlay .member-social a:hover {
  color: #363636;
}

.member .member-info h5 {
  color: #363636;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
  text-transform: capitalize;
}

.member .member-info h6 {
  color: #999999;
  font-family: 'Merriweather', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
  font-style: italic;
  text-transform: capitalize;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .member {
    margin-bottom: 30px;
  }
}
.feature-panel-2 {
  text-align: center;
  padding: 2.2rem;
  border: 1.58px solid rgb(16, 107, 64);
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 250px;
  /* Ensure a minimum height for consistent appearance */
}

/* Ensure icons and content stay aligned properly */
.feature-panel-2 .feature--icon-2 {
  margin-bottom: 1rem;
}

.feature-panel-2 .feature--content-2 {
  margin-top: auto;
  /* Push content to the bottom if there is space */
}

.feature-panel-2:hover {
  background-color: #f8f8f8;
  box-shadow: 0 15px 25px rgba(16, 107, 65, 0.356);
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
  transform: translate(7px, -7px);
  border: none;
}

.feature--icon-2 {
  font-size: 3rem;
}

.feature--content-2 h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.feature--content-2 p {
  font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 767px) {
  .feature--icon-2 {
    font-size: 2.5rem;
  }

  .feature--content-2 h3 {
    font-size: 1rem;
  }

  .feature--content-2 p {
    font-size: 0.875rem;
  }
}

.feature-link-2:hover .feature-panel-2 {
  cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}


/* Small Devices, Tablets */
/*------------------------------------*\
    #Client
\*------------------------------------*/
.clients {
  padding-top: 55px;
  padding-bottom: 55px;
}

.client img {
  max-width: 100%;
  width: auto !important;
}

.clients-carousel [class*="col-"] {
  max-height: 80px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .client img {
    margin-bottom: 20px;
  }
}

/*------------------------------------*\
    #BLOG-SECTION
\*------------------------------------*/
.blog-entry {
  margin-bottom: 50px;
}

.blog-entry .entry--img {
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
}

.blog-entry .entry--img img,
.entry-related .entry--img img {
  max-width: 100%;
  height: auto;
  -moz-transition: all .35s linear;
  -webkit-transition: all .35s linear;
  -ms-transition: all .35s linear;
  -o-transition: all .35s linear;
  transition: all .35s linear;
}

.blog-entry .entry--overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  background-color: rgba(51, 51, 51, 0.4);
  -moz-transition: all .35s linear;
  -webkit-transition: all .35s linear;
  -ms-transition: all .35s linear;
  -o-transition: all .35s linear;
  transition: all .35s linear;
}

.blog-entry .entry--img:hover .entry--overlay {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.blog-entry .entry--overlay a {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  margin-top: -30px;
  margin-left: -30px;
}

.blog-entry .entry--overlay a:hover {
  background-color: #106B40;
  border-color: #106B40;
}

.blog-entry .entry--img:hover img {
  transform: scale(1.1);
}

.entry-related .entry--img {
  overflow: hidden;
}

.blog-entry .entry--meta {
  color: #aaaaaa;
  font-family: 'Merriweather', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 7px;
}

.blog-entry .entry--meta span:first-of-type {
  margin-right: 14px;
}

.blog-entry .entry--title {
  margin-bottom: 25px;
}

.blog-entry .entry--title h4 {
  color: #363636;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 23px;
  margin-bottom: 0;
}

.blog-entry .entry--title h4 a {
  color: #363636;
}

.blog-entry .entry--title h4 a:hover {
  color: #106B40;
}

.blog-entry .entry--content {
  color: #aaaaaa;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 25px;
}

.blog-entry .entry--more {
  overflow: hidden;
}

.blog-entry .entry--more a {
  color: #aaaaaa;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  position: relative;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}

.blog-entry .entry--more a:hover {
  color: #363636;
}

/* Blog Single */
.blog-single .blog-entry .entry--meta {
  margin-bottom: 17px;
}

.blog-single .blog-entry .entry--meta span {
  font-family: 'Merriweather', serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1;
  margin-right: 14px;
  color: #aaaaaa;
}

.blog-single .blog-entry .entry--meta a {
  color: #aaaaaa;
}

.blog-single .blog-entry .entry--title h4 {
  font-size: 30px;
  font-weight: 600;
  line-height: 42px;
}

.blog-single .blog-entry .entry--content {
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eeeeee;
}

.blog-single .blog-entry .entry--content,
.blog-single .blog-entry .entry--content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.entry--share-tags {
  color: #363636;
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  text-transform: capitalize;
  font-family: 'Merriweather', serif;
  margin-bottom: 50px;
}

.entry--share-tags span {
  margin-right: 20px;
  color: #333;
}

.entry--share-tags a {
  color: #bdbdbd;
  font-style: italic;
  text-decoration: underline;
  color: #5d5d5d;
  font-size: 14px;
  margin-right: 9px;
}

.entry--share-tags a:hover {
  color: #106B40;
}

.entry--share a:last-child {
  margin-right: 0;
}

.entry--share a.facebook {
  color: #3b5998;
}

.entry--share a.twitter {
  color: #1da1f2;
}

.entry--share a.google {
  color: #dd4b39;
}

.entry--share a.pinterest {
  color: #bd081c;
}

.entry--share a:hover {
  color: #106B40;
}

.entry-widget .entry-widget-title {
  position: relative;
  margin-bottom: 50px;
}

.entry-widget .entry-widget-title h4 {
  color: #363636;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: 0;
}

.entry-widget .entry-widget-content {
  position: relative;
}

.entry-share a:hover {
  color: #106B40;
}

ul.comments-list {
  width: 100%;
  list-style: none;
  overflow: hidden;
  padding-left: 0;
  margin-bottom: 100px;
}

ul.comments-list li {
  position: relative;
  border-bottom: 1px solid #eee;
  padding-bottom: 50px;
  margin-bottom: 60px;
}

ul.comments-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

ul.comments-list .comment-body .avatar {
  position: absolute;
  left: 0;
  top: 0;
}

ul.comments-list .comment-body .comment {
  padding-left: 90px;
}

ul.comments-list .comment-body .comment h6 {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  margin-bottom: 14px;
  color: #363636;
  line-height: 30px;
  display: inline-block;
  margin-right: 13px;
}

ul.comments-list .comment-body .comment .date {
  color: #aaaaaa;
  font-family: 'Merriweather', serif;
  font-size: 12px;
  font-style: italic;
  line-height: 30px;
}

ul.comments-list .comment-body .comment p {
  color: #999999;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0;
}

ul.comments-list .comment-body .comment a.reply {
  font-size: 12px;
  font-weight: 300;
  text-transform: capitalize;
  color: #106B40;
  line-height: 30px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

ul.comments-list .comment a.reply:hover {
  color: #363636;
}

ul.comments-list ul.comment-children {
  list-style: none;
  margin: 20px 0 0 90px;
  padding-top: 30px;
  padding-left: 0;
  border-top: 2px solid #f8f8f8;
}

ul.comments-list ul.comment-children .comment-body .comment {
  padding-left: 90px;
}

ul.comments-list ul.comment-children li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

ul.comments-list ul.comment-children ul .comment-body .comment {
  padding-left: 90px;
}

.entry-widget.comments-form .entry-widget-title h4 {
  margin-bottom: 60px;
}

#post-comment .form-control {
  margin-bottom: 30px;
  background-color: #ffffff;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  ul.comments-list ul.comment-children {
    margin: 20px 0 0;
  }

  .blog-entry {
    padding: 20px;
  }

  .blog-single .blog-entry .entry--title h4 {
    font-size: 17px;
    line-height: 1.2;
  }

  .entry--share .text-right {
    text-align: left;
  }

  .entry-next,
  .entry-prev {
    width: 100%;
    float: none;
    margin-bottom: 0;
  }

  .entry-next {
    margin-bottom: 0;
  }

  .entry-prev {
    margin-bottom: 30px;
  }

  .entry-prev-next {
    padding: 10px;
  }

  .entry-prev-next:after {
    display: none;
  }

  .entry-prev-next a {
    font-size: 13px;
  }

  .entry-prev-next .entry-prev {
    padding-right: 0;
  }

  .entry-widget {
    padding: 20px;
  }

  .entry-bio .entry-bio-desc p,
  .entry-bio img {
    position: relative;
    margin-bottom: 15px;
  }

  .entry-bio .entry-bio-desc {
    padding-left: 0;
  }

  .entry-related .entry {
    margin-bottom: 30px;
  }

  .entry-related .entry:last-of-type {
    margin-bottom: 0;
  }

  .blog-standard .blog-entry .entry--title h4 {
    font-size: 18px;
    line-height: 1.2;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .entry-related img {
    width: 100%;
  }

  .blog-standard .blog-entry .entry--title h4 {
    font-size: 20px;
    line-height: 1.2;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .entry-related img {
    width: 100%;
  }
}

/*------------------------------------*\
	#Widgets
\*------------------------------------*/
.sidebar {
  border-radius: 6px;
  background-color: #ffffff;
  padding: 30px;
}

.widget {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eeeeee;
}

.widget:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Widget */
.widget .widget--title {
  position: relative;
}

.widget .widget--title h5 {
  color: #363636;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: 40px;
}

/* Category Widget */
.widget-categories {
  padding-bottom: 30px;
}

.widget-categories ul {
  margin-top: -10px;
  margin-bottom: 0;
}

.widget-categories ul li a {
  color: #bdbdbd;
  font-size: 14px;
  font-weight: 400;
  line-height: 33px;
}

.widget-categories ul li a:hover {
  color: #106B40;
}

.widget-categories ul li a i {
  margin-right: 11px;
  color: #bdbdbd;
}

.widget-categories ul li a:hover i {
  color: #106B40;
}

/* Tags Widget */
.widget-tags {
  padding-bottom: 32px;
}

.widget-tags ul {
  margin-bottom: 0;
  margin-left: 0;
}

.widget-tags ul li {
  padding-left: 0;
  padding-right: 0;
}

.widget-tags a {
  display: inline-block;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #363636;
  margin-right: 6px;
  margin-bottom: 8px;
  text-transform: capitalize;
  padding: 10px 12px;
}

.widget-tags a:hover {
  color: #106B40;
  border-color: #106B40;
}

/* Recent Widegt */
.widget-recent-posts .entry {
  position: relative;
  margin-bottom: 30px;
  min-height: 50px;
}

.widget-recent-posts .entry:last-of-type {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.widget-recent-posts img {
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
  text-align: center;
}

.widget-recent-posts .entry .entry-desc {
  position: relative;
  margin-left: 90px;
}

.widget-recent-posts .entry .entry-title {
  margin-bottom: 5px;
}

.widget-recent-posts .entry .entry-title a {
  color: #363636;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-transform: capitalize;
}

.widget-recent-posts .entry .entry-title a:hover {
  color: #106B40;
}

.widget-recent-posts .entry .entry-desc .entry-meta,
.widget-recent-posts .entry .entry-desc .entry-meta a {
  font-family: 'Merriweather', serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  font-style: italic;
  color: #aaaaaa;
}

.widget-recent-posts .entry .entry-desc .entry-meta span:first-of-type {
  margin-right: 10px;
}

/* Search Widget */
.widget-search {
  border-bottom: none;
  padding-bottom: 0;
}

.widget-search .form-search {
  border: none;
  border-radius: 22px;
  background-color: #f5f5f5;
}

.widget-search .input-group {
  border-radius: 0;
  border: none;
  background-color: transparent;
  overflow: hidden;
  padding: 0 12px 0 0;
}

.widget-search .form-search .form-control {
  border: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #bdbdbd;
  font-size: 13px;
  font-weight: 400;
  line-height: 45px;
  height: 45px;
  text-transform: capitalize;
  background-color: transparent;
}

/* Placeholder */
.widget-search .form-search .form-control::-webkit-input-placeholder {
  color: #bdbdbd;
}

.widget-search .form-search .form-control:-moz-placeholder {
  color: #bdbdbd;
}

.widget-search .form-search .form-control::-moz-placeholder {
  color: #bdbdbd;
}

.widget-search .form-search .form-control::-ms-input-placeholder {
  color: #bdbdbd;
}

.widget-search .form-search .btn {
  background-color: transparent;
  color: #bdbdbd;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  width: 35px;
  height: 45px;
  line-height: 29px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  margin-left: 0;
  padding: 0;
}

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .sidebar {
    margin-bottom: 15px;
    padding: 15px;
  }

  .widget {
    margin-bottom: 30px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .widget-recent .entry .entry-desc {
    margin-left: 70px;
  }

  .sidebar {
    margin-bottom: 20px;
    padding: 20px;
  }
}

/*------------------------------------*\
    #Layout Bordered
\*------------------------------------*/
.body-bordered .bordered--line {
  position: fixed;
  display: block;
  background: #ffffff;
  z-index: 999999;
}

.body-bordered .bordered--line-top,
.body-bordered .bordered--line-bottom {
  height: 20px;
  left: 0;
  right: 0;
}

.body-bordered .bordered--line-right,
.body-bordered .bordered--line-left {
  width: 20px;
  top: 0;
  bottom: 0;
}

.body-bordered .bordered--line-top {
  top: 0;
}

.body-bordered .bordered--line-bottom {
  bottom: 0;
}

.body-bordered .bordered--line-right {
  right: 0;
}

.body-bordered .bordered--line-left {
  left: 0;
}

.body-bordered .navbar-fixed-top {
  top: 20px;
}

.body-bordered .navbar-fixed-top.affix {
  top: 0;
}

/*------------------------------------*\
    #BOXED LAYOUT
\*------------------------------------*/
.body-boxed {
  background: url(../images/background/pattern.png);
}

.body-boxed .header-fixed .affix {
  box-shadow: none;
}

@media only screen and (min-width: 1200px) {
  .body-boxed .wrapper {
    width: 1170px;
    margin: auto;
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  .body-boxed .wrapper .container {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media only screen and (max-width: 1200px) {
  .body-boxed .wrapper {
    width: auto;
    margin: auto;
    overflow-x: hidden;
  }
}

.body-boxed .header-fixed .affix {
  background-color: transparent;
}

.body-boxed .header-fixed .affix .container {
  background-color: #ffffff;
}

.body-boxed .col-content {
  padding: 90px;
}


.vision {
  padding-right: 13px;
}

.mision {
  padding: 13px;
}



/* ESTILOS DEL DROPDOWN */
/* Estilos para el menú desplegable */
.dropdown-menu {
  background-color: #1c1c1cab;
  /* Fondo negro con un tono gris oscuro */
  color: #f5f5f5;
  /* Texto blanco con un tono gris claro */
  width: 250px;
  /* Ancho del menú desplegable, puedes ajustarlo según sea necesario */
  border-radius: 8px;
  /* Bordes redondeados para un look más suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra sutil para profundidad */
  padding: 0;
  /* Eliminar el padding interno */
  margin: 0;
  /* Eliminar el margen interno */
  border: none;
  /* Sin borde para un diseño más limpio */
  font-family: 'Arial', sans-serif;
  /* Fuente más moderna */
}

/* Estilos para cada ítem del menú */
.dropdown-menu li {
  border-bottom: 1px solid #333;
  /* Línea sutil separadora entre ítems */
}

.dropdown-menu li:last-child {
  border-bottom: none;
  /* Eliminar línea separadora en el último ítem */
}

.dropdown-menu li a {
  color: #f5f5f5;
  /* Color del texto */
  text-decoration: none;
  /* Eliminar subrayado en los enlaces */
  display: block;
  /* Hacer que el enlace ocupe todo el espacio del ítem del menú */
  padding: 12px 20px;
  /* Espaciado interno para cada ítem del menú */
  transition: background-color 0.3s, color 0.3s;
  /* Transición suave para el hover */
}

.dropdown-menu li a:hover {
  background-color: #635f5fbe;
  /* Color de fondo al pasar el ratón */
  color: #fff;
  /* Color del texto al pasar el ratón */
}



:root {
  --verde: #106B40;
  /* Define el tono de verde */
  --sombra: rgba(0, 0, 0, 0.2);
  /* Define el tono de la sombra */
}

/* PROCESO */
#enfoque .container {
  max-width: 1400px !important; /* Sobreescribe Bootstrap */
  width: 100% !important; /* Asegura que ocupe el ancho completo */
}

.process-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  border: 2px solid var(--verde);
  border-radius: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px var(--sombra);
  /* Sombra del contenedor principal */
}

.process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 190px;
  /* Ajusta según el tamaño deseado */
  height: 190px;
  /* Ajusta según el tamaño deseado */
  border: px solid var(--verde);
  /* Borde del círculo */
  border-radius: 50%;
  /* Hace que el contenedor sea un círculo */
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 4px 8px var(--sombra);
  /* Sombra de los círculos */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Transiciones suaves */
}

.process-item:hover {
  transform: scale(1.05);
  /* Aumenta ligeramente el tamaño en hover */
  box-shadow: 0 6px 12px var(--sombra);
  /* Aumenta la sombra en hover */
}

.process-number {
  font-size: 18px;
  /* Tamaño del número */
  font-weight: bold;
  font-family: 'Times New Roman', Times, serif;
  color: #fff;
  background-color: var(--verde);
  /* Usa el verde definido */
  width: 38px;
  height: 38px;
  line-height: 38px;
  /* Ajusta el line-height para centrar el texto */
  border-radius: 50%;
  margin-bottom: 10px;
  /* Espacio entre el número y el título/imagen */
  text-align: center;
  box-shadow: 0 2px 4px var(--sombra);
  /* Sombra del número */
}

.process-title {
  font-size: 16px;
  /* Tamaño del texto del título */
  font-weight: bold;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #333;
  margin: 0;
}

.process-arrow {
  font-size: 30px;
  color: var(--verde);
  /* Usa el verde definido */
  margin: 0 20px;
}

.process-item img {
  width: 60px;
  height: auto;
  /* Mantiene la proporción de la imagen */
  margin-top: 10px;
  /* Espacio entre la imagen y el título (impares) */
  box-shadow: 0 2px 4px var(--sombra);
  /* Sombra de las imágenes */
}

.process-item:nth-child(even) img {
  margin-bottom: 10px;
  /* Espacio entre la imagen y el título (pares) */
}

@media (max-width: 768px) {
  .process-container {
    flex-direction: column;
  }

  .process-arrow {
    display: none;
  }

  .process-item {
    margin-bottom: 20px;
  }
}


/*ENFOQUE*/ 
/* ------------------------------------ */
/* Estilos Generales del Enfoque */
/* ------------------------------------ */
.enfoque {
  background-color: #ffffff; /* Fondo blanco */
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
  width: 100%;
  
}










/* Contenedor principal */
.enfoque-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  
}

/* Tarjetas de cada paso */
.enfoque-item {
  background-color: #0b572d; /* Color oscuro */
  border-radius: 20px;
  padding: 18px;
  width: 23%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

/* Efecto al pasar el mouse */
.enfoque-item:hover {
  transform: translateY(-5px);
}

/* Número de paso */
.enfoque-numero {
  font-size: 22px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 15px;
  left: 15px;
}

/* Imágenes con forma curva */
.enfoque-img img {
  width: 100%;
  border-radius: 15px;
}

/* Títulos */
.enfoque-item h3 {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-top: 15px;
  text-transform: uppercase;
}

/* Responsividad */
@media (max-width: 1024px) {
  .enfoque-container {
      flex-direction: column;
      align-items: center;
  }

  .enfoque-item {
      width: 80%;
  }
}

/* MODAL VIDEO */

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 30%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}




/* BOTONES DE NAVEGACIÓN DE CARRUSEL CAROUSEL */


/* Contenedor de la navegación */
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 1000;
  /* Asegúrate de que el z-index sea mayor que el del carrusel */
}

/* Estilo del botón de navegación (previo) */
.owl-prev {
  background-color: #f8f9fa;
  /* Fondo blanco o el color que prefieras */
  border: 2px solid #106B40;
  /* Borde azul, cambia según tu diseño */
  color: #106B40;
  /* Color del texto de la flecha */
  border-radius: 50%;
  /* Redondear el borde para que se vea como un círculo */
  width: 40px;
  /* Tamaño del botón */
  height: 40px;
  /* Tamaño del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* Tamaño de la flecha */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  /* Transición suave para el fondo y borde */
  margin-left: -40px;
  /* Ajusta el espaciado a la izquierda */
}

/* Estilo del botón de navegación (siguiente) */
.owl-next {
  background-color: #f8f9fa;
  /* Fondo blanco o el color que prefieras */
  border: 2px solid #106B40;
  /* Borde azul, cambia según tu diseño */
  color: #106B40;
  /* Color del texto de la flecha */
  border-radius: 50%;
  /* Redondear el borde para que se vea como un círculo */
  width: 40px;
  /* Tamaño del botón */
  height: 40px;
  /* Tamaño del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* Tamaño de la flecha */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  /* Transición suave para el fondo y borde */
  margin-right: -10px;
  /* Ajusta el espaciado a la derecha */
}

/* Hover effect para los botones */
.owl-prev:hover,
.owl-next:hover {
  background-color: #106B40;
  /* Cambia el fondo al pasar el ratón */
  color: #fff;
  /* Cambia el color del texto al pasar el ratón */
  border-color: #106B40;
  /* Cambia el color del borde al pasar el ratón */
}



/* Media query para pantallas más pequeñas */
@media (max-width: 853px) {

  .owl-prev,
  .owl-next {
    margin-left: 0;
    /* Elimina el margen izquierdo en pantallas más pequeñas */
    margin-right: 0;
    /* Elimina el margen derecho en pantallas más pequeñas */
  }
}

/* Media query para pantallas aún más pequeñas */
@media (max-width: 576px) {

  .owl-prev {
    margin-left: 0;
    /* Elimina el margen izquierdo en pantallas más pequeñas */
    margin-right: 0;
    /* Elimina el margen derecho en pantallas más pequeñas */
    width: 30px;
    /* Tamaño más pequeño del botón */
    height: 30px;
    /* Tamaño más pequeño del botón */
    font-size: 16px;
    /* Tamaño de la flecha más pequeño */
  }

  .owl-next {
    margin-right: 0;
    /* Elimina el margen derecho en pantallas más pequeñas */
    margin-left: 0;
    /* Elimina el margen izquierdo en pantallas más pequeñas */
    width: 30px;
    /* Tamaño más pequeño del botón */
    height: 30px;
    /* Tamaño más pequeño del botón */
    font-size: 16px;
    /* Tamaño de la flecha más pequeño */

  }

}


/* CUADRO LINEAS VERDES CUANDO SE PASA EL MOUSE SE LEVANTAN Y APARECE SOMBRA */
/* General Styles */

.bg-white {
  background-color: #ffffff;
}

.pt-5 {
  padding-top: 3rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

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

.heading--title {
  font-size: 2rem;
  font-weight: bold;
}

.heading--divider {
  width: 80px;
  height: 4px;
  background: #106B40;
  margin: 0 auto;
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}

.feature-panel {
  text-align: center;
  padding: 2.2rem;
  border: 1.58px solid rgb(16, 107, 64);
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  min-height: 250px;
  background-size: cover;
  background-position: center;
  position: relative;
}


/* Ensure icons and content stay aligned properly */
.feature-panel .feature--icon {
  margin-bottom: 1rem;
}

/* Estilos para el contenido de cada panel */
.feature--content {
  margin-top: auto;
  padding: 20px;
  color: white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Botón de "Ver más" con sombra */
.feature-button {
  display: inline-block;
  background-color: #106B40; /* Color verde */
  color: white;
  text-align: center;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Sombra hacia abajo y derecha */
  margin-top: 10px;
}

.feature-button:hover {
  background-color: #0a4d2e; /* Color más oscuro en hover */
  box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4); /* Más sombra en hover */
}


.feature-panel:hover {
  background-color: #f8f8f8;
  box-shadow: 0 15px 25px rgba(16, 107, 65, 0.356);
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
  transform: translate(7px, -7px);
  border: none;
}

.feature--icon {
  font-size: 3rem;
}

.feature--content h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.feature--content p {
  font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 767px) {
  .feature--icon {
    font-size: 2.5rem;
  }

  .feature--content h3 {
    font-size: 1rem;
  }

  .feature--content p {
    font-size: 0.875rem;
  }
}



.feature-link:hover .feature-panel {
  cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
}
.feature-panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Agrega un filtro oscuro para mejorar la legibilidad del texto */
.feature-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;

}

/* Asegura que el contenido se vea por encima del fondo */







/* Contenedor para los botones flotantes */
.floating-buttons {
  position: fixed;
  bottom: 20px; /* Espacio desde la parte inferior */
  right: 20px; /* Espacio desde el borde derecho */
  display: flex;
  flex-direction: column; /* Botones en columna */
  align-items: center; /* Centra los botones horizontalmente */
  z-index: 1000; /* Asegura que esté por delante de otros elementos */
}

/* Estilos generales de los botones */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Botones redondos */
  color: white; /* Color del icono */
  text-decoration: none;
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra en los botones */
  margin-bottom: 15px; /* Espacio entre los botones */
  transition: transform 0.3s; /* Transiciones suaves */
}

/* Estilo para el botón de WhatsApp */
.btn.whatsapp {
  background: #25D366; /* Color verde de WhatsApp */
}

/* Estilo para el botón de Facebook */
.btn.facebook {
  background: #4267B2; /* Color azul de Facebook */
}

/* Estilo para el botón de Instagram */
.btn.instagram {
  background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); /* Degradado de Instagram */
}

/* Efectos al pasar el mouse sobre los botones */
.btn:hover {
  transform: translateY(-4px); /* Movimiento ligero al pasar el mouse */
}

/* Efectos al hacer clic en los botones */
.btn:active {
  transform: translateY(-2px); /* Movimiento más ligero al hacer clic */
}

/* Asegura que el icono se ajuste dentro del botón */
.btn i {
  font-size: 28px; /* Tamaño del icono */
}

/*  NAV BAR CON DISEÑO DE INTERSEGURO // QUITAR LOS ESTILOS DE COMENTARIO =  */
/* Estilo del contenedor del menú desplegable */

/*.dropdown-menu {
   position: absolute; */
/* Permite que el menú se posicione fuera del flujo normal del documento */
/*   top: 120%; */
/* Posiciona el menú un poco más abajo del elemento que lo activa */
/*   left: 50%; */
/* Posiciona el menú en la mitad horizontal del contenedor padre */
/*   transform: translateX(-50%); */
/* Centra el menú horizontalmente */
/*   width: 70vw; */
/* 70% del ancho de la ventana */
/*   height: 50vh; */
/* 50% del alto de la ventana */
/*  padding: 15px;
  margin-bottom: 10px; */
/* Agrega un margen inferior */
/*   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-color: #fff; */
/* Color de fondo del menú */
/*   color: #000; */
/* Color del texto del menú para asegurarse de que sea visible */
/*   display: none; */
/* Inicialmente oculto */
/*   overflow-y: auto; */
/* Permite el desplazamiento vertical si el contenido es demasiado grande */
/*   box-sizing: border-box; */
/* Incluye el padding en el ancho y alto del elemento */
/*   z-index: 1000; */
/* Asegura que el menú esté por encima de otros elementos */
/* } */

/* Estilo del área de título */
/* .dropdown-header { */
/*   padding-bottom: 10px; */
/* Espacio debajo del encabezado */
/*   border-bottom: 1px solid #ddd; */
/* Línea separadora entre el título y las columnas */
/*   text-align: center;
  align-items: center;

} */

/* Contenedor de las columnas dentro del menú desplegable */
/* .dropdown-columns {
  display: flex;
  height: calc(100% - 40px); */
/* Ajusta la altura para el área de columnas (resta la altura del encabezado) */
/* margin-top: 10px; */
/* Espacio entre el encabezado y las columnas */
/* } */

/* Cada columna dentro del contenedor */
/* .dropdown-column {
  flex: 1; */
/* Cada columna ocupa un espacio igual */
/*   margin-right: 15px; */
/* Espacio entre las columnas */
/*   overflow-y: auto; */
/* Permite el desplazamiento vertical dentro de las columnas si es necesario */
/* } */

/* Estilo de la imagen */
/* #dropdown-left img {
  width: 100%; */
/* Ajusta el ancho de la imagen al contenedor */
/*   height: auto; */
/* Mantiene la relación de aspecto de la imagen */
/* } */

/* .dropdown-header h3 {
  margin: 0; */
/* Elimina el margen por defecto del título */
/*   font-size: 1.2em; */
/* Ajusta el tamaño del título según sea necesario */
/*   color: #106B40; */
/* Color del texto del título */
/*   font-family: Arial, Helvetica, sans-serif;

  cursor: pointer; */
/* Cambia el cursor para indicar que es interactivo */
/*   display: inline-block; */
/* Permite que los <h3> estén en línea */
/* margin: 0 20px; */
/* Espacio entre los encabezados */
/* } */


/* Estilo del texto */
/* #dropdown-right #text-display p {
  margin: 0 0 10px 0; */
/* Espacio entre párrafos */
/* } */


/* Elimina el margen derecho de la última columna */
/* .dropdown-column:last-child {
  margin-right: 0;
} */

/* Asegúrate de que los elementos de la lista se muestren en bloque y sin estilo por defecto */
/* .dropdown-menu li {
  list-style: none;
  padding: 5px 0;
}
 */
/* .dropdown-menu a {
  text-decoration: none;
  color: #000; */
/* Color del texto del enlace para asegurar visibilidad */
/* } */

/* Cambia el color del texto al pasar el ratón sobre los enlaces */
/* .dropdown-menu a:hover {
  color: #106B40; */
/* Color de texto al pasar el ratón sobre los enlaces */
/* } */

/* Triángulo del globo de pensamiento */
/* .dropdown-menu::before {
  content: "";
  position: absolute;
  bottom: 100%; */
/* Posiciona el triángulo arriba del menú */
/*   left: 50%;
  transform: translateX(-50%);
  border-width: 10px; */
/* Tamaño del triángulo */
/*   border-style: solid;
  border-color: transparent transparent #fff transparent; */
/* Colores del triángulo */
/* } */

/*# sourceMappingURL=style.css.map */
/*NUEVO INICIO/*
/* Para que el video se quede en el fondo */
.testimonial {
    position: relative;
}

.full-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenedor para la imagen centrada */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250%; /* Para centrar la imagen verticalmente */
}

.centered-image {
    max-width: 450%;  /* Ajusta el tamaño según sea necesario */
    height: auto;
    display: block;
}

/* El texto sobre la imagen */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    padding: 20px;
    border-radius: 10px;
}