/**
* Template Name: Yummy
* Template URL: https://bootstrapmade.com/yummy-bootstrap-restaurant-website-template/
* Updated: Jun 06 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

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

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #37373f; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #80bb00; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

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

/* Template Custom Colors */
:root {
  --alt-background-color: #1f1f24;
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: #f2f2f2;
  font-family: 'Montserrat', sans-serif;
}

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

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

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

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

.contact-banner {
  background-color: white;
  color: #80bc00;
  padding: 5px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.contact-banner p {
  margin: 0;
  color: #80bc00;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 14px;
} 
.contact-banner a {
  margin: 0;
  color: #80bc00;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 14px;
  padding: 0% 1%;
  border-radius: 25px;
  transition: .5s;
}
.contact-banner a:hover {
  margin: 0;
  color: #5d8900;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 14px;
  padding: 0% 1%;
  border-radius: 25px;
  background: color-mix(in srgb, #b2b2b2, transparent 15%);
}

.contact-banner a {
  text-decoration: none;
}

.contact-banner i {
  margin-right: 5px;
}

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

.header .logo img {
  max-height: 70px;
  width: 60%;
  margin-right: 8px;
}

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

.header .logo span {
  color: var(--accent-color);
  font-size: 36px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: black;
  font-size: 15px;
  font-weight: 900;
  padding: 8px 30px;
  margin: 0;
  border-radius: 50px;
  transition: 0.3s;
  font-family: sans-serif;
  font-style: italic;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, #649200, transparent 15%);
}

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

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

  .header .navmenu {
    order: 3;
  }
}

@media (max-width: 572px) {
  .contact-banner {
    justify-content: center;
  }

  .contact-banner p {
    display: none;
  }

  .header .logo img {
    width: 50%;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    font-size: 12px;
    padding: 6px 20px;
  }
}

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



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

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

  .navmenu li {
    position: relative;
  }

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

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

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

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

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

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

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: color-mix(in srgb, var(--nav-color) 80%, black 50%);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--alt-background-color);
  --default-color: #ffff;
  --heading-color: #ffff;
  --heading-font: var(--default-font);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
}

.footer .icon {
  color: var(--accent-color);
  margin-right: 15px;
  font-size: 24px;
  line-height: 0;
}

.footer h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer .address p {
  margin-bottom: 0px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 400;
  margin-bottom: 10px;
  font-family: var(--default-font);
}

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

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

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

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

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--default-font);
}

.section-title p {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: 48px;
  font-weight: 500;
  font-family: var(--heading-font);
}

.section-title p .description-title {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --background-color: #f2f2f2;
  width: 100%;
  min-height: 60vh;
  position: relative;
  padding: 60px 0;
  display: flex;
  align-items: center;
}
.image-container {
  position: relative;
}

.background-image {
  position: absolute;
  top: 0px; /* Ajusta este valor para mover la imagen hacia abajo */
  right: 160px; /* Ajusta este valor para mover la imagen a la derecha */
  z-index: 1;
  width: 100%;
  height: auto;
}

.foreground-image {
  position: relative;
  z-index: 2;
  width: 50%;
  height: auto;
  top: 60px; /* Ajusta este valor para mover la imagen hacia abajo */
  right: 50px; /* Ajusta este valor para mover la imagen a la derecha */
}

.Destruye h2 {
  color: #80bb00;
  font-family: 'Montserrat black', sans-serif;
  font-size: 45px;
  font-weight: 900;
  font-style: oblique;
}

.Destruye h3 {
  color: #999999;
  font-family: 'Montserrat black', sans-serif;
  font-size: 45px;
  font-weight: 700;
  font-style: oblique;
}

.Destruye p {
  color: #999999;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 20px;
  font-style: normal;
}

.Destruye b {
  color: black;
  font-style: oblique;
}

.custom-button {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: black;
  border: none;
  border-radius: 0px 20px 20px 20px; /* Curvatura en tres extremos y uno sin curvatura */
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  transition: background-color 0.3s;
}

.custom-button:hover {
  background-color: #333; /* Cambia el color de fondo al pasar el ratón por encima */
}
.destr h4 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 35px;
  background-color: #80bb00;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 0px 0px 0px 20px; /* Curvatura en tres extremos y uno sin curvatura */
}
.destr b {
  color: white;
  font-size: 45px;
  font-family: 'Montserrat black', sans-serif;
}
/* Estilos para el modal */
.video-CUSTOM {
  position: absolute;
  background-color: #80bc00;
  color: white;
  font-family: 'Montserrat black', sans-serif;
  font-weight: 800;
  font-size: 30px;
  font-style: oblique;
  border-style: solid;
  border-color: #80bc00;
  border-radius: 20px;
  padding: 0px 15px 0px 15px;
  z-index: 9;

}


@media (max-width: 764px) {
  .background-image {
    position: absolute;
    top: -50px; /* Ajusta este valor para mover la imagen hacia abajo */
    right: 40px; /* Ajusta este valor para mover la imagen a la derecha */
    z-index: 1;
    width: 100%;
    height: auto;
  }

  .foreground-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    top: 10px; /* Ajusta este valor para mover la imagen hacia abajo */
    right: 40px; /* Ajusta este valor para mover la imagen a la derecha */
  }

  .Destruye h2 {
    color: #80bb00;
    font-family: 'Montserrat black', sans-serif;
    font-size: 45px;
    font-weight: 900;
    font-style: oblique;
  }

  .Destruye h3 {
    color: #999999;
    font-family: 'Montserrat black', sans-serif;
    font-size: 35px;
    font-weight: 700;
    font-style: oblique;
  }

  .Destruye p {
    color: #999999;
    font-family: 'Montserrat medium', sans-serif;
    font-size: 15px;
    font-style: normal;
  }

  .Destruye b {
    color: black;
  }

  .destr b {
    color: white;
    font-size: 45px;
    font-family: 'Montserrat black', sans-serif;
  }

  .custom-button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: black;
    border: none;
    border-radius: 0px 20px 20px 20px; /* Curvatura en tres extremos y uno sin curvatura */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    transition: background-color 0.3s;
  }

  .custom-button:hover {
    background-color: #333; /* Cambia el color de fondo al pasar el ratón por encima */
  }
  .destr h4 {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 35px;
    background-color: #80bb00;
    padding: 10px 20px;
    margin-top: 15px;
    border-radius: 0px 0px 0px 20px; /* Curvatura en tres extremos y uno sin curvatura */
  }

}

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

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

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  background-color: #f2f2f2;
}

.sect-ver1 {
  background-color: #7ab300;
}
.parte1 {
  padding: 15px 0px 15px 0px;
}
.custom-button2 {
  display: inline-block;
  padding: 10px 30px;
  color: white;
  background-color: black;
  border: none;
  border-radius: 0px 25px 25px 25px; /* Curvatura en tres extremos y uno sin curvatura */
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  font-style: oblique;
  transition: background-color 0.3s;
}
.about h2 {
  color: white;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 45px;
  margin-top: 15px;
}

.about p {
  color: white;
  margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-style: normal;
}

.custom-button2:hover {
  background-color: #333; /* Cambia el color de fondo al pasar el ratón por encima */
}

.position-relative {
  position: relative;
}
.imagen-sal-abo img{
  position: absolute;
  width: 65%;
  margin-top: -5%;
  right: -30%;
}

.tarjeta {
  background-color: #f2f2f2;
  padding: 2%;
}
.tarjeta .col-12 {
  margin-bottom: 10px;
}
.tarjeta h2 {
  color: #999999;
  font-family: 'Montserrat black', sans-serif;
  font-size: 40px;
  font-style: oblique;
  margin-bottom: 40px;
}
.tarjeta .buton-tar {
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
}
.tarjeta .buton-tar button {
  flex: 1;
  margin: 0 15px;
  padding: 2%;
  text-align: center;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  color: #999999;
}
.tarjeta .buton-tar img {
  width: auto;
  height: 80px;
}
.tarjeta .buton-tar p {
  margin: 10px 0 0;
}

.bton-cen {
  background-color: #f2f2f2;
  margin: 2% 0% 4% 0%;
}
.bton-cen button {
  display:block;
  margin:auto;
  background-color: #000000;
  border-style: solid;
  border-color: #000000;
  color: white;
  font-family: 'Montserrat black', sans-serif;
  font-style: oblique;
  border-radius: 50px;
  padding: 12px 30px;
  transition: 0.5s;
}

.bton-cen button:hover {
  display:block;
  margin:auto;
  background-color: #e4e4e4;
  border-style: solid;
  border-color: #000000;
  color: black;
  font-family: 'Montserrat black', sans-serif;
  font-style: oblique;
  border-radius: 50px;
  padding: 12px 30px;
}

/* Media queries para tablets y móviles */
@media (max-width: 768px) {
  .tarjeta .buton-tar {
    flex-direction: column;
    padding: 0;
  }
  .tarjeta .buton-tar button {
    margin: 10px 0;
  }
  .tarjeta h2 {
    font-size: 30px;
  }
}
@media (max-width: 576px) {
  .tarjeta h2 {
    font-size: 25px;
  }
  .tarjeta .buton-tar img {
    height: 60px;
  }
  .tarjeta .buton-tar button {
    padding: 5%;
  }
}


.cubo {
  background-color: white;
  width: auto;
  height: 100%;
  padding: 20px 20px 20px 20px;
  border: none;
  border-radius: 20px 20px 20px 20px; /* Curvatura en tres extremos y uno sin curvatura */
  transition: background-color 0.5s, transform 0.5s ease-in-out; /* Transiciones suaves para color de fondo y transformación */
  transform-origin: center bottom; /* Establece el origen de la transformación */
}

.cubo:hover {
  background-color: #F6F6F6; /* Cambia el color de fondo al pasar el ratón por encima */
  border-style: solid;
  border-color: #999999;
  transform: translateY(-10px); /* Aplica una transformación de desplazamiento hacia arriba al pasar el ratón por encima */
}

.cubo img {
  width: auto;
  height: 80px;
}

.cubo p {
  color: #999999;
}
.agenda-black {
  margin-top: 1%;
  margin-bottom: 1%;
}
.agenda-black a{
  color: white;
  background-color: #000000;
  font-family: 'Montserrat medium', sans-serif;
  font-style: oblique;
  font-size: 20px;
  padding: 10px 25px;
  border-radius: 30px;

}
.agenda-black a:hover {
  background-color: #a6a6a6;
  color: #000000;
}


.agenda {
  background-color: #f3f3f3;
  padding-bottom: 5%;
}
.agenda .foreground-image4 {
  position: absolute;
  top: -5%;
  right: -120px;
  z-index: 2;
  width: 180%;
  height: auto;

}
.agenda .tarjeta{
  border: none;
  border-radius: 20px 20px 20px 20px;
  background-color: #80bb00;
  padding: 20px 20px 20px 20px;
}
.blanco {
  padding: 20px 20px 20px 20px;
  color: #999999;
}
.blanco i {
  color: #999999;
} 
.blanco .P-uno {
  padding-left: 40px;
  color: #999999;
}
.blanco .P-dos {
  padding-left: 80px;
  color: #999999;
}
.blanco .P-tres {
  padding-left: 120px;
  color: #999999;
}
.verde h2 {
  color: white;
  font-size: 43px;
}


.tarjeta .blanco {
  background-color: white;
  margin: -21px -21px -21px -21px;
  border-radius: 0px 0px 15px 15px;
}
.custom-button4 {
  margin-left: 50%;
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: black;
  border: none;
  border-radius: 0px 20px 20px 20px; /* Curvatura en tres extremos y uno sin curvatura */
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  transition: background-color 0.3s;
}
.custom-button4 img {
  position: absolute;
  margin-top: 10px;
  background-color: #80bb00;
  width: 4%;
  height: 4%;
  padding: 5px 15px 5px 15px;
  border: none;
  border-radius: 10px 0px 10px 0px; /* Curvatura en tres extremos y uno sin curvatura */
}


.custom-button4:hover {
  background-color: #333; /* Cambia el color de fondo al pasar el ratón por encima */
}

.confia {
  background-image: url(../../img/webp/arte_2.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 0%;
  padding-top: 15px;
  padding-bottom: 5px;
}

.confia h5 {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  color: white;
  font-size: 30px;
  padding-bottom: 2px;
}

.confia p {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  color: white;
  padding-top: 5px;
  font-size: 25px;
}

.confia img {
  width: 40%;
  height: 40%;
  margin: 0;
  padding: 0;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px; /* Ajusta este valor según lo cerca que quieras los elementos */
}



.custom-range {
  width: 100%;
}
.btn-toggle {
  margin-bottom: 20px;
}
.pesos {
  font-size: 20px;
  font-weight: bold;
  color: #7ab300;
}
.result {
  font-size: 40px;
  font-weight: bold;
  color: #7ab300;
}
.contacto {
  background-color: #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.contacto h2{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  color: #80bb00;

} 

.contacto .contorno {
  background-color: white;
  border-radius: 50px;
  margin: 0 auto; /* Centra el contorno */
  display: flex;
  justify-content: center;
  width: 65%;
  padding: 0px; /* Ajusta el padding según sea necesario */
}

.btn-toggle {
  display: flex;
  gap: 10px; /* Espacio entre botones */
}

.btn-verde {
 padding: 10px 65px; /* Ajusta el padding para una mejor apariencia en todas las pantallas */
 border-radius: 20px;
 font-family: 'Montserrat medium', sans-serif;
 font-size: 14px; /* Ajusta el tamaño de fuente si es necesario */

}
.btn-blanco {
  padding: 10px 65px; /* Ajusta el padding para una mejor apariencia en todas las pantallas */
  border-radius: 20px;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 14px; /* Ajusta el tamaño de fuente si es necesario */
}

.btn-verde {
  color: white;
  border: 2px solid #80bc00;
  background-color: #80bc00;
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

.btn-verde:hover {
  background-color: #5d8900;
}

.btn-blanco {
  color: #999999;
  border: 2px solid #ffffff;
  background-color: white;
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

.btn-blanco:hover {
  color: #5d8900;
}


.contacto .contador label {
  padding-top: 20px;
  color: #999999;
  font-size: 35px;
  font-family: 'Montserrat medium', sans-serif;
}
.contacto .contador p {
  color: #999999;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 30px;
}

.contacto .contador b {
  color: #999999;
  font-family: 'Montserrat black', sans-serif;
  font-size: 30px;
}

.Diner-Ver p {
  color: #79b400;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 20px;
  text-align: right;
}

.Diner-Ver h6 {
 font-family: 'Montserrat medium', sans-serif;
 color: #999999;
 text-align: right;
 margin-top: -5%;
}

.Diner-Ver b {
  color: #79b400;
  font-family: 'Montserrat black', sans-serif;
  font-size: 55px;
  text-align: right;
}
.Nuevo-ver p {
  color: #999999;
  text-align: right;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 12px;
}
/* Estilo del rango */
input[type=range] {
  -webkit-appearance: none; /* Remueve el estilo por defecto en navegadores basados en WebKit */
  width: 100%;
  height: 8px;
  background: #ababab;
  outline: none;
  opacity: 0.7;
  transition: opacity .15s ease-in-out;
  --range-percent: 1%;
}

input[type=range]:hover {
  opacity: 1;
}

/* Estilo de la pista en navegadores basados en WebKit */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #b3d666 0%, #b3d666 var(--range-percent), #ababab var(--range-percent), #ababab 100%);
  border: none;
  border-radius: 3px;
}

/* Estilo del pulgar en navegadores basados en WebKit */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remueve el estilo por defecto */
  appearance: none;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #b3d666;
  border-radius: 50%; /* Hace el pulgar redondo */
  cursor: pointer; /* Cambia el cursor al pasar sobre el pulgar */
  margin-top: -6px; /* Ajusta la posición vertical del pulgar */
}

/* Estilo de la pista en Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: #ababab;
  border: none;
  border-radius: 3px;
}

/* Estilo del pulgar en Firefox */
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #b3d666;
  border-radius: 50%; /* Hace el pulgar redondo */
  cursor: pointer; /* Cambia el cursor al pasar sobre el pulgar */
}

/* Estilo de la pista en Edge */
input[type=range]::-ms-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #b3d666;
  border-radius: 3px;
}

input[type=range]::-ms-fill-upper {
  background: #ababab;
  border-radius: 3px;
}

input[type=range]::-ms-thumb {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #b3d666;
  border-radius: 50%; /* Hace el pulgar redondo */
  cursor: pointer; /* Cambia el cursor al pasar sobre el pulgar */
}

input[type=range]:focus::-ms-fill-lower {
  background: #b3d666;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ababab;
}

/* Para actualizar el color de la pista en navegadores basados en WebKit */
input[type=range] {
  background: linear-gradient(to right, #b3d666 0%, #b3d666 var(--range-percent), #ababab var(--range-percent), #ababab 100%);
}

.ui-widget.ui-widget-content {
  border: 1px solid white;
  border-radius: 20px;
}
.ui-datepicker {
  width: 100%;
  background: #ffffff;
  border-radius: 300px;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 20px;
  color: #999999;
  font-weight: 800;


}


.ui-widget-header {
  background-color: #fff;
  color: #999999;
  font-weight: 800;
  border-style: solid;
  border-color: white;
}
.ui-datepicker td a {
  background: #e6f1cc;
  color: #999999;
  font-weight: bold;
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-weight: 800;
  text-decoration: none;
}


.ui-datepicker td.ui-datepicker-week-end a {
  background: #e8e8e8 !important;
  color: #999999 !important;
  font-weight: 800;
  text-align: center;
}

.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td.ui-datepicker-current-day a {
  background: #b3d666 !important;
  color: #ffffff !important;
  text-align: center;
  border: 1.95px solid;
  border-color: #80bc00;
  font-weight: 800;
}

.ui-datepicker td.ui-datepicker-past a {
  background: #b3d666 !important;
  color: #ffffff !important;
  text-align: center;
  font-weight: 800;
}

.ui-datepicker td.ui-datepicker-future a {
  background: #e6f1cc !important;
  color: #999999 !important;
  text-align: center;
  font-weight: 800;
}
.ui-datepicker td.ui-datepicker-future a:hover {
  background: #80bc00 !important;
  color: #fff !important;
  font-weight: 800;
}

.ui-datepicker td.ui-datepicker-selected-day a {
  background: #80bc00 !important;
  color: #ffffff !important;
  font-weight: 800;
}
.ui-datepicker td.ui-datepicker-current-day a.ui-state-active,
.ui-datepicker td.ui-datepicker-selected-day a {
  background: #80bd00 !important;
  color: #ffffff !important;
  font-weight: 800;
}

.ver-form {
  margin-top: 7%;
  background-color: #80bc00;
  color: white;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
  font-size: 18px;
}
.ver-form input{
  background-color: #b3d666;
  border-style: solid;
  border-color: #b3d666;
  margin: 8px 0px 8px 0px;
  border-radius: 50px;
  color: white;
}

.ver-form textarea{
  background-color: #b3d666;
  border-style: solid;
  border-color: #b3d666;
  margin: 8px 0px 8px 0px;
  border-radius: 10px;
  color: white;
}

#mensaje::placeholder, #colonia::placeholder, #numero::placeholder, #cp::placeholder, #calle::placeholder {
  color: white;
}

.btn-agenda {
 font-family: 'Montserrat', sans-serif;
 font-style: oblique;
 color: white;
 border-style: solid;
 border-color: #000000;
 background-color: #000000;
 padding: 5px 81px 5px 81px;
 border-radius: 15px;
 font-weight: 600;
}
.btn-agenda:hover {
 font-family: 'Montserrat', sans-serif;
 font-style: oblique;
 color: white;
 border-style: solid;
 border-color: #000000;
 background-color: #4c4c4c;
 padding: 5px 81px 5px 81px;
 border-radius: 15px;
 font-weight: 600;
}

.btn-agenda1 {
  margin-left: 40%;
  display: inline-flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  border-radius: 0px 15px 15px 15px; /* Curvaturas excepto la parte superior izquierda */
}

.btn-agenda1 .icono {
  display: inline-block;
  background-color: #80bb00;
  width: 50px;
  height: 40px;
  padding-top: 2px;
  margin-left: 20px;
  text-align: center;
  line-height: 30px;
  position: relative;
  top: 16px; /* Sobresale más por debajo del botón */
  border-radius: 10px 0px 10px 0px; /* Curvaturas excepto la parte superior izquierda */
}
.btn-agenda1 img {
  align-items: center;
  width: 70%;
  height: auto;
}
.btn-agenda1:hover {
  margin-left: 40%;
  display: inline-flex;
  align-items: center;
  background-color: black;
  color: #80bb00;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  border-radius: 0px 15px 15px 15px; /* Curvaturas excepto la parte superior izquierda */
}

.btn-nose-cantidad {
  padding: 10px 20px;
  border-radius: 20px;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 14px;
  color: #999999;
  border: 2px solid #ffffff;
  background-color: #e8e8e8;
  display:block;
  margin:auto;
  font-style: oblique;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-nose-cantidad.selected {
  color: white;
  background-color: #80bc00;
  border-color: #80bc00;
}

.Buton-llama button {
  padding: 10px 40px;
  border-radius: 20px;
  font-family: 'Montserrat black', sans-serif;
  font-size: 15px;
  color: white;
  border: 2px solid #ffffff;
  background-color: #80bd00;
  display:block;
  margin:auto;
  font-style: oblique;
  margin-bottom: 3%;
  transition: .5s;
}


.Buton-llama button:hover {
  padding: 10px 40px;
  border-radius: 20px;
  font-family: 'Montserrat black', sans-serif;
  font-size: 15px;
  color: white;
  border: 2px solid #ffffff;
  background-color: #999999;
  display:block;
  margin:auto;
  font-style: oblique;
  margin-bottom: 3%;
}

.logistica{
  margin-top: 0px;
  background-color: #7ab300;
  padding-top: 20px;
}

.logistica img {
  position: absolute;
  width: 50%;
  margin-top: 2%;
  margin-left: -70px;
}
.logistica h3 {
  color: white;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  font-size: 45px;
  padding-left: 20%;
}

.blanco {
  background-color: white;
  margin: 0px -11px 12px 0px;
}

.blanco h2 {
  color: #80bc00;
  font-size: 45px;
  font-weight: 900;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic
}
.blanco p {
  color: #80bc00;
  font-size: 25px;
  font-family: 'Montserrat semibold', sans-serif;
  font-style: italic
}

.preguntas {
  padding-top: 8%;
  background-color: #f3f3f3;
  padding-bottom: 4%;
}
.preguntas h2{
  color: #80bb00;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  font-weight: 800;
  font-size: 45px;
}

.ultima-par1 {
 color: #999999;
 font-size: 15px;
 font-family: 'Montserrat semibold', sans-serif;
 text-align: right;
}


.preguntas .accordion-button {
  background-color: #999999;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  font-weight: 600;
}
.preguntas .accordion-button:not(.collapsed) {
  color: white;
  background-color: #80bb00;
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.preguntas .accordion-item {
  margin-top: .5%;
  border-radius: 20px;
}

.piedepagina {
  background-color: #80bb00;
  padding: 25px;
}

.piedepagina img {
  width: 60%;
  margin: 0 auto;
  display: block;
}

.piedepagina label {
  color: white;
  font-weight: 600;
}

.piedepagina input {
  border-radius: 20px;
}

#email::placeholder {
  color: #c4c4c4;
}

.SUSCRIBE {
  background-color: #000000;
  color: white;
  margin-top: 5px;
  padding: 2px 20px;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  font-weight: 600;
  border: none;
  border-radius: 20px;
}

.footer-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin: 0 10px;
}

.footer-menu a {
  text-decoration: none;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: bold;
  transition: color 0.3s;
}

.footer-menu a:hover {
  color: #5c6d3f;
}

@media (max-width: 1024px) {
  .footer-menu {
    flex-direction: column;
    align-items: center;
  }

  .footer-menu li {
    margin: 10px 0;
  }

  .piedepagina img {
    width: 100%;
  }
  .imagen-sal-abo img{
    position: absolute;
    width: 65%;
    margin-top: -5%;
    right: -15%;  
  }
}
@media (max-width: 987px) {

 .imagen-sal-abo img{
  position: absolute;
  width: 125%;
  margin-top: -5%;
  right: -70%;  
}
}
@media (max-width: 767px) {
  .footer-menu {
    flex-direction: column;
    align-items: center;
  }

  .footer-menu li {
    margin: 10px 0;
  }

  .piedepagina img {
    width: 40%;
  }

  .imagen-sal-abo img{
    position: relative;
    width: 100%;
    margin-top: 5%;
    right: 0%;  
  }
}

@media (max-width: 480px) {
  .piedepagina {
    padding: 20px;
  }

  .footer-menu {
    flex-direction: column;
    align-items: center;
  }

  .footer-menu li {
    margin: 10px 0;
  }

  .piedepagina img {
    width: 50%;
  }

  .SUSCRIBE {
    width: 100%;
    padding: 10px;
    font-size: 16px;
  }
}


@media (max-width: 1399px) {

  .agenda .foreground-image4 {
    position: absolute;
    top: 32%;
    right: -100px;
    z-index: 2;
    width: 180%;
    height: auto;

  }
  .custom-button4 {
    margin-left: 50%;
    display: inline-block;
    padding: 5px 10px;
    color: white;
    background-color: black;
    border: none;
    border-radius: 0px 20px 20px 20px; /* Curvatura en tres extremos y uno sin curvatura */
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    transition: background-color 0.3s;
  }
  .custom-button4 img {
    position: absolute;
    margin-top: 16px;
    background-color: #80bb00;
    width: 4%;
    height: 4%;
    padding: 5px 15px 5px 15px;
    border: none;
    border-radius: 10px 0px 10px 0px; /* Curvatura en tres extremos y uno sin curvatura */
  }
  .contacto .contorno {
    background-color: white;
    border-radius: 50px;
    margin: 0 auto; /* Centra el contorno */
    display: flex;
    justify-content: center;
    width: 76%;
    padding: 0px; /* Ajusta el padding según sea necesario */
  }


}
@media (max-width: 1199px) {
  .contacto .contorno {
    background-color: white;
    border-radius: 50px;
    margin: 0 auto; /* Centra el contorno */
    display: flex;
    justify-content: center;
    width: 92%;
    padding: 0px; /* Ajusta el padding según sea necesario */
  }
  .verde h2 {
    color: white;
    font-size: 30px;
  }

}


@media (max-width: 1051px) {
  .custom-button4 img {
    position: absolute;
    margin-top: 10px;
    background-color: #80bb00;
    width: 6%;
    height: auto;
    padding: 5px 15px 5px 15px;
    border: none;
    border-radius: 10px 0px 10px 0px; /* Curvatura en tres extremos y uno sin curvatura */
  }
  .agenda .foreground-image4 {
    position: absolute;
    top: 10%;
    right: -100px;
    z-index: 2;
    width: 220%;
    height: auto;

  }

  .logistica img {
    position: absolute;
    width: 70%;
    margin-top: 2%;
    margin-left: -20%;
  }



  .logistica{
    margin-top: 40px;
    background-color: #7ab300;
    padding-top: 20px;
  }


  .logistica h3 {
    color: white;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-style: oblique;
    font-size: 30px;
    padding-left: 20%;
  }

  .blanco h2 {
    color: #80bc00;
    font-size: 30px;
    font-weight: 900;
    font-family: 'Montserrat black', sans-serif;
    font-style: italic
  }
  .blanco p {
    color: #80bc00;
    font-size: 18px;
    font-family: 'Montserrat semibold', sans-serif;
    font-style: italic
  }
}
@media (max-width: 991px) {
  .agenda .foreground-image4 {
    position: relative;
    top: 20%;
    right: -90px;
    z-index: 2;
    width: 100%;
    height: auto;

  }
}
@media (max-width: 767px) {
  .parte1{
    padding: 15px 15px 15px 15px;
  }
  .foreground-image2 {
    position: absolute;
    top: -70px; /* Ajusta este valor para mover la imagen hacia arriba */
    right: 20px; /* Ajusta este valor para mover la imagen a la derecha */
    z-index: 2;
    width: 500%;
    height: 150%;
  }
  .custom-button4 img {
    position: absolute;
    margin-top: 5px;
    background-color: #80bb00;
    width: 7%;
    height: auto;
    padding: 5px 15px 5px 15px;
    border: none;
    border-radius: 10px 0px 10px 0px; /* Curvatura en tres extremos y uno sin curvatura */
  }
  .agenda .foreground-image4 {
    position: absolute;
    margin-top: 5%;
    right: 370px;
    z-index: 2;
    width: 180%;
    height: auto;

  }
  .contacto .contorno {
    background-color: white;
    border-radius: 50px;
    margin: 0 auto; /* Centra el contorno */
    display: flex;
    justify-content: center;
    width: 80%;
    padding: 0px; /* Ajusta el padding según sea necesario */
  }
  .logistica img {
    position: absolute;
    width: 70%;
    margin-top: 2%;
    margin-left: -100%;
  }
  
}
@media (max-width: 458px) {
  .agenda .foreground-image4 {
    position: absolute;
    margin-top: 15%;
    right: 72%;
    z-index: 2;
    width: 180%;
    height: auto;

  }
  .contacto .contorno {
    background-color: white;
    border-radius: 50px;
    margin: 0 auto; /* Centra el contorno */
    display: flex;
    justify-content: center;
    width: 80%;
    padding: 0px; /* Ajusta el padding según sea necesario */
  }

  .btn-verde {
   padding: 10px 43px; /* Ajusta el padding para una mejor apariencia en todas las pantallas */
   border-radius: 20px;
   font-size: 11px; /* Ajusta el tamaño de fuente si es necesario */

 }
 .btn-blanco {
  padding: 10px 43px; 
  border-radius: 20px;
  font-size: 11px;
}
}

@media (max-width: 390px) {
  .agenda .foreground-image4 {
    position: absolute;
    margin-top: 35%;
    right: 62%;
    z-index: 2;
    width: 180%;
    height: auto;

  }
}

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

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

/*--------------------------------------------------------------
# Servicios
--------------------------------------------------------------*/

.conocenos {
  background-color: #f3f3f3;
} 
.somos {
  position: relative;
}

.somos video {
  min-width: 100%;
  max-height: 100%;
  width: 10%;
  height: auto;

}
.destruimos {
  padding: 60px 10px 40px 10px;
}

.destruimos h2 {
  text-align: center;
  font-family: 'Montserrat medium', sans-serif;;
  font-size: 45px;
  font-style: oblique;
  font-weight: 800;
  color: #7ab300;
}

.destruimos h3 {
  padding: 25px 0px 50px 0px;
  font-size: 20px;
  color: #999999;
  font-family: 'Montserrat medium', sans-serif;
  font-style: normal;
  text-align: center;
}

.destruimos p {
  margin-top: 10px;
  color: #80bc00;
  text-align: center;
  font-size: 20px;
  font-style: oblique;
  font-weight: 400;
  font-family: 'Montserrat medium', sans-serif;
}

.destruimos .circulo {
  padding: 25px 0px 15px 0px;
  height: 70%;
  width: 50%;
  max-width: 200px;
  border-radius: 100%;
  align-items: center;
  background-color: #80bc00;
  display: flex;
  justify-content: center;
  margin: auto;
}

.destruimos .circulo img {
  max-height: 90%;
  display: block;
  margin: auto;
}

.capacidad {
  padding: 55px 0px 55px 0px;
  text-align: center;
  align-items: center;
}

.capacidad h2 {
  text-align: center;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 45px;  
  font-style: oblique;
  font-weight: 800;
  color: #7ab300;

}
.capacidad h3 {
  padding: 25px 0px 50px 0px;
  font-size: 20px;
  color: #999999;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  text-align: center;
}


.veint {
  color: #666666;
  font-size: 30px;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  position: absolute; /* Posicionamiento absoluto */
  top: 36%; /* Ajusta la posición vertical */
  left: 50%; /* Ajusta la posición horizontal */
  transform: translate(-50%, -50%); /* Centra el texto horizontalmente */
}

.veint b {
  font-size: 45px;
}

.diar {
  color: #666666;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  position: absolute; /* Posicionamiento absoluto */
  top: 56%; /* Ajusta la posición vertical */
  left: 50%; /* Ajusta la posición horizontal */
  transform: translate(-50%, -50%); /* Centra el texto horizontalmente */
}

.divider {
  position: absolute; /* Posicionamiento absoluto */
  top: 42%; /* Ajusta la posición vertical */
  left: 50%; /* Ajusta la posición horizontal */
  transform: translate(-50%, -50%); /* Centra horizontalmente */
  width: 15%;
  border: 2px solid #666666;
}

.flotante {
  background-image: url(../../img/SVG/icono_bocadillo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Ajusta el tamaño de la imagen de fondo */
  width: 100%;
  height: 220px; /* Ajusta la altura según necesites */
  position: relative; /* Contenedor relativo */
  text-align: center; /* Centra el texto horizontalmente */
}

.carr img {
  width: 28%;
  display: block;
  margin: auto;
}

.Pleneta {
  background-color: #7ab300;
  padding: 30px 10% 30px 10%;
}
.Pleneta h3{
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 30px;
  color: white;
}

.cobertura {
  padding: 35px 0px 35px 0px;
}
.cobertura h2 {
  font-size: 45px;
  color: #80bc00;
  font-family: 'Montserrat medium', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-align: center;
}
.cobertura h3 {
  color: #999999;
  align-items: center;
  font-family: 'Montserrat medium', sans-serif;
  font-style: normal;
  font-size: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 500;
  padding: 0px 10% 0px 10%;
}
.cobertura img {
  display:block;
  margin:auto;
  width: 70%;
  margin-bottom: 5px;
}
.cobertura p{
  font-size: 12px;
  color: #666666;
  font-family: 'Montserrat medium', sans-serif;
  font-style: oblique;

}
.servi {
 background-color: #f3f3f3;
}
.iniciod {
  background-image: url(../../img/webp/destruccionensitio-8.webp);
  padding: 5% 5% 5% 5%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 0%;
}
.iniciod h2 {
  font-family: 'Montserrat black', sans-serif;
  font-style: oblique;
  color: white;
  font-size: 365%;
  text-align: right;
  font-weight: 900;
  margin-bottom: -20px;
}
.iniciod p {
  color: white;
  text-align: right;
  font-family: 'Montserrat medium', sans-serif;
} 
.iniciod .ButonW {
  background-color: white;
  color: #1d1d1b;
  border-radius: 0px 20px 20px 20px;
  float: right;
  border-style: solid;
  border-color: white;
  font-family: 'Montserrat medium', sans-serif;
  font-style: oblique;
  font-weight: 800;
  font-size: 25px;
}
.iniciod .ButonW:hover {
  background-color: #D5D5D5;
  color: #1d1d1b;
  border-radius: 0px 20px 20px 20px;
  float: right;
  border-style: solid;
  border-color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  font-weight: 800;
  font-size: 25px;
}

.cuadro {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10% 5% 3% 10%;
  border-radius: 30px;
}
.ImgOb {
  width: 50%;
  overflow: hidden;
  position: relative;
}

.ImgOb img {
  position: relative;
  left: -20%;
  width: 100%;
}
.nuevo-servibu {
  background-color: #79b200;
  padding: 2% 0% 2% 0%;
  margin-bottom: 2%;
}
.nuevo-servibu h3 {
  color: white;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 30px;  
  font-style: oblique;
}

.nuevo-servibu button {
  color: #000000;
  background-color: white;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 25px;  
  font-style: oblique;
  border-style: solid;
  border-color: white;
  border-radius: 0px 25px 25px 25px;
  transition: .5s;
}

.nuevo-servibu button:hover {
  color: white;
  background-color: #000000;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 25px;  
  font-style: oblique;
  border-style: solid;
  border-color: white;
  border-radius: 0px 25px 25px 25px;
}
.obj h3 {
  margin-top: 5%;
  color: #80bb00;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 35px;
  font-weight: 700;
}
.obj .CONTACTO {
  margin-top: 2%;
  background-color: #80bb00;
  border-style: solid;
  border-color: #80bb00;
  border-radius: 30px;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  color: white;
  padding: 0px 3% 0px 3%;
  margin-bottom: 2%;
}
.obj .CONTACTO:hover {
  margin-top: 2%;
  background-color: #4b6e00;
  border-style: solid;
  border-color: #80bb00;
  border-radius: 30px;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  color: white;
  padding: 0px 3% 0px 3%;
  margin-bottom: 2%;
}
.Nues {
  padding: 2% 0px 2% 0px;
  background-color: #79b200;
}
.Nues h3 {
  color: white;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 200%;
}

.Imgsv img{
  width: 100%;
}
.Servisp h3{
  padding-top: 15%;
  color: #80bc00;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 300%;
  font-weight: 800;
}
.Servisp h2 {
  color: #999999;
  font-family: 'Montserrat', sans-serif;
  font-size: 120%;
  font-style: normal;
}
.Servisp .Agen1 {
  background-color: #1d1d1b;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  border-radius: 0px 20px 20px 20px;
  padding: 5px 10px 5px 10px;
  margin-bottom: 15%;
}
.Servisp .Agen1:hover {
  background-color: #696961;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  border-radius: 0px 20px 20px 20px;
  padding: 5px 10px 5px 10px;
}

.evidencias {
  background-color: #f3f3f3;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 20px;
}
.seguro-div1 {
  padding: 5% 5% 5% 5%;
}
.seguro h3 {
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  font-weight: 900;
  color: #80bc00;
  font-size: 35px;
}
.seguro p {
  color: #666666;
  font-family: 'Montserrat medium', sans-serif;
}

.btn-agenda2 {
  display: inline-flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 2px 20px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  border-radius: 0px 15px 15px 15px; /* Curvaturas excepto la parte superior izquierda */
}

.btn-agenda2 .icono {
  display: inline-block;
  background-color: #80bb00;
  width: 50px;
  height: 40px;
  padding-top: 2px;
  margin-left: 20px;
  text-align: center;
  line-height: 30px;
  position: relative;
  top: 16px; /* Sobresale más por debajo del botón */
  border-radius: 10px 0px 10px 0px; /* Curvaturas excepto la parte superior izquierda */
}
.btn-agenda2 img {
  align-items: center;
  width: 70%;
  height: auto;
}
.btn-agenda2:hover {
  display: inline-flex;
  align-items: center;
  background-color: black;
  color: #80bb00;
  padding: 2px 20px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-style: oblique;
  border-radius: 0px 15px 15px 15px; /* Curvaturas excepto la parte superior izquierda */
}





.imgservi{
  width: 50%;
  overflow: hidden;
  position: relative;
}
.nomr {
  background-color: #80bc00;
}
.nomr1 {
  padding: 5% 5% 5% 5%;
}
.nomr1 h3 {
  color: white;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 200%;
  font-weight: 900;
}
.nomr1 p {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  text-align: center;
}

.imgservi img {
  position: relative;
  right: -20%;
  width: 100%;
}
.nivel {
  padding: 5% 0% 5% 0%;
}
.nivel1 h3 {
  color: #80bc00;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  text-align: right;
  font-weight: 900;
  font-size: 200%;
}
.nivel1 h6 {
  color: #80bc00;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  text-align: right;
  font-size: 200%;
  font-weight: 100;
}
.nivel1 b {
  color: #666666;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  text-align: right;
}
.nivel1 p {
  color: #666666;
  font-family: 'Montserrat medium', sans-serif;
  font-style: normal;
  text-align: right;
}
.nivel .NivelBut {
  background-color: #1d1d1b;
  color: white;
  float: right;
  border-style: solid;
  border-color: #1d1d1b;
  border-radius: 20px;
  padding: 0px 20px 0px 20px;
  font-style: italic;
  text-align: right;
  transition: .1s;
}
.nivel .NivelBut:hover {
  background-color: #8f8f84;
  color: white;
  float: right;
  border-style: solid;
  border-color: #1d1d1b;
  border-radius: 20px;
  padding: 0px 20px 0px 20px;
  font-style: italic;
  text-align: right;
}
.nivel img {
  width: 100%;
}
.certificado {
  background-color: #ffffff;
  padding: 2% 0% 2% 0%;
}
.certificado h3{
  color: #b3b3b3;
  text-align: center;
  font-size: 220%;
  font-family: 'Montserrat black', sans-serif;
  font-style: oblique;
  margin-bottom: 2%;
}

.certificado img {
  width: 70%;
  height: auto;
  display:block;
  margin:auto;
  padding-bottom: 5%;
}
.camara {
  padding: 3% 3% 3% 3%;
}
.camara1 {
  background-color: #1d1d1b;
  padding: 3% 3% 3% 3%;
  border-radius: 30PX;
}
.camara h3{
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  text-align: center;
  color: white;
  font-weight: 800;
  font-size: 200%;
}

.camara h4{
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  text-align: center;
  color: white;
  font-size: 100%;
  margin-bottom: 3%;
}

.camaraImg1 img {
  display:block;
  margin:auto;
  border-radius: 20px;
  width: 85%;
}

.camaraImg2 img {
  display:block;
  margin:auto;
  border-radius: 20px;
  width: 85%;
}
.camaraImg3 img {
  display:block;
  margin:auto;
  border-radius: 20px;
  width: 75%;
}
.camara p {
  color: #7e7d7e;
  text-align: right;
  padding-top: 5%;
  padding-right: 10%;
  padding-left: 20%;
}
.seguridadbt {
  background-color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 20px;
  display:block;
  margin:auto;
  border-style: solid;
  font-weight: 800;
  border-color: white;
  border-radius: 20px;
  padding: 0px 2% 0px 2%;
  transition: .5s;
}
.seguridadbt:hover {
  background-color: #bdbdbd;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 20px;
  display:block;
  margin:auto;
  border-style: solid;
  font-weight: 800;
  border-color: white;
  border-radius: 20px;
  padding: 0px 2% 0px 2%;
}
.bandever {
  background-color: #99ca33;
}
.bande1 {
  background-color: #e5e5e5;
  border-bottom: 10px solid #99ca33;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.bandever h5{
  color: white;
  font-family: 'Montserrat medium', sans-serif;
  font-style: normal;
  font-size: 25px;
  text-align: center;
  padding: 1%;
}
.bande1 p {
  color: #666666;
  font-family: 'Montserrat medium', sans-serif;
  font-style: normal;
  font-size: 22px;
  text-align: center;
  padding: 15% 15% 15% 15%;
  flex-grow: 1;
}
.bandein {
  display: flex;
  flex-direction: column;
}

.seguri {
  background-color: #f3f3f3;
}
.seg-evid {
  background-image: url(../../img/webp/evidenciasyentregables-8.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 0%;
}
.seg-evid .tex-contenedor1 {
  padding: 8%;
}
.seg-evid h2 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 250%;
  padding-right: 2%;
}

.seg-evid p {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 100%;
  padding-right: 2%;
}

.img-container {
  position: relative;
  overflow: hidden;
}

.certificado-img {
  position: absolute;
  top: 0%;
  right: -20px;
  z-index: 2;
  width: 100%;
  height: auto;
}


.seg-check {
  padding: 2% 2% 2% 2%;
}
.check1 {
  background-color: white;
  padding: 10px 5px 0.5px 10px;
  border-radius: 20px;
  margin: 1%;

}
.check1 p {
  color: #999999;
  font-family: 'Montserrat medium', sans-serif;
  font-weight: 400;
}
.check1 i {
  color: #999999;
  font-weight: 800;
}

.seg-check img {
  width: 80%;
  display:block;
  margin:auto;
}
.rotated-img {
  transform: rotate(15deg); /* Ajusta el valor de rotación según lo desees */
}

.seg-check button {
  font-family: 'Montserrat black', sans-serif;
  font-size: 20px;
  font-style: oblique;
  background-color: #000000;
  border-style: solid;
  border-color: #000000;
  color: white;
  border-radius: 0px 25px 25px 25px;
  margin-top: 10px;
  margin-left: 10px;
  transition: .5s;
}

.seg-check button:hover {
  font-family: 'Montserrat black', sans-serif;
  font-size: 20px;
  font-style: oblique;
  background-color: #a6a6a6;
  border-style: solid;
  border-color: #000000;
  color: #000000;
  border-radius: 0px 25px 25px 25px;
  margin-top: 10px;
  margin-left: 10px;
}

.semarnat1 img{
  padding-top: 2%;
  width: 15%;
  display:block;
  margin:auto;
  padding-bottom: 2%;
}

.seg-cert1 {
  background-color: #80bc00;
}

.tex-cer1 {
  padding: 5%;
}
.seg-cert1 h2 {
  color: white;
  font-weight: 900;
  font-size: 150%;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
}

.seg-cert1 p {
  color: white;
  font-family: 'Montserrat medium', sans-serif;
  font-style: italic;
}

.seg-cert1 .btncertif1 {
  color: white;
  padding: 0 2% 0 2%;
  background-color: #000000;
  border-style: solid;
  font-weight: 600;
  border-color: #000000;
  border-radius: 20px;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  transition: .5s;
}


.seg-cert1 .btncertif1:hover {
  color: black;
  padding: 0 2% 0 2%;
  background-color: #e4e4e4;
  border-style: solid;
  font-weight: 600;
  border-color: #000000;
  border-radius: 20px;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
}


.img-container2 {
  position: relative;
  overflow: hidden;
}

.certificado-img2 {
  position: absolute;
  top: 0%;
  right: 15%;
  z-index: 2;
  width: 50%;
  height: auto;
}





.vido-evid {
  padding: 2% 0 2% 0;
}
.vido-evid h2 {
 color: #80bc00;
 font-weight: 900;
 font-size: 200%;
 font-family: 'Montserrat', sans-serif;
 font-style: italic;
}
.vido-evid p {
  color: #666666;
}

.vido-evid hr {
  border: none;
  height: 5px; /* Ajusta el grosor aquí */
  background-color: #80bc00; /* Color del hr */
  width: 20%; /* Mantén el ancho del 20% */
}

.vido-evid img {
  width: 80%;
  display:block;
  margin:auto;
  padding-bottom: 5px;
}
.sostenta {
  background-color: #f0f0f0;
}
.sus-sus {
  background-color: white;
  padding: 2% 0% 0% 0%;
}
.sus-sus h2{
  color: #80bc00;
  font-weight: 900;
  font-size: 200%;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
}
.sus-sus p {
  color: #666666;
  font-size: 120%;
  font-family: 'Montserrat medium', sans-serif;
  font-style: italic;
}
.sus-img img {
  width: 100%;
}
.sus-econo {
  background-color: #80bc00;
  padding: 2% 0% 2% 0%;
}

.sus-econo h2{
  color: white;
  font-weight: 900;
  font-size: 200%;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  text-align: center;
}
.sus-econo p{
  color: white;
  font-family: 'Montserrat medium', sans-serif;
  font-style: italic;
  text-align: center;
}
.sus-enpaper {
  padding: 2% 0 2% 0;
}
.sus-enpaper h2{
  color: #80bc00;
  font-weight: 900;
  font-size: 200%;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  text-align: center;
}
.sus-enpaper h3 {
  color: #8e8e8e;
  font-weight: 900;
  font-size: 200%;
  font-family: 'Montserrat black', sans-serif;
  font-style: italic;
  text-align: center;
}
.sus-enpaper h4 {
  color: #8e8e8e;
  font-weight: 600;
  font-size: 100%;
  font-family: 'Montserrat medium', sans-serif;
  font-style: italic;
  text-align: center;
}
.sus-enpaper p {
  color: #8e8e8e;
  font-weight: 600;
  font-size: 70%;
  font-family: 'Montserrat medium', sans-serif;
  font-style: normal;
  text-align: center;
}
.sus-enpaper img {
  width: 100px;
  height: 100px;
  display:block;
  margin:auto;
}
.sus-enpaper hr {
 border: none;
 height: 2px; /* Ajusta el grosor aquí */
 background-color: #666666; /* Color del hr */
 width: 20%; /* Mantén el ancho del 20% */
 margin: 0 auto; /* Centra el hr horizontalmente */
}
.sus-em-btn {
  background-color: black;
  color: white;
  border-style: solid;
  border-radius: 0px 20px 20px 20px;
  padding: 0px 20px 0px 20px;
  display:block;
  margin:auto;
  transition: 0.5s;
}
.sus-em-btn:hover {
  background-color: #8e8e8e;
  color: black;
  border-style: solid;
  border-radius: 0px 20px 20px 20px;
  padding: 0px 20px 0px 20px;
  display:block;
  margin:auto;
}



.paper-sosten-blanco {
  background-color: #ffffff;
  margin-top: 6%;
  margin-bottom: 6%;
}
.partebn1 {
  padding: 15px 0px 15px 0px;
}
.paper-sosten-01 p {
  color: #80bc00;
  margin-top: 15px;
  margin-bottom: 15px;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 20px;
  font-style: normal;
}

.positionbn-relative {
  position: relative;
}
.imagen-sal-abobn img{
  position: absolute;
  width: 60%;
  margin-top: -5%;
  left: -20%;
}



.conta-paper {
  padding: 3% 0px 3% 0px;
}
.conta-paper h2 {
  color: #666666;
  font-family: 'Montserrat', sans-serif;
  font-size: 230%;
  font-style: normal;
  margin-right: 30%;
}

.conta-paper form input[type="text"] {
  width: 100%;
  padding: 10px 5px;
  margin-bottom: 15px;
  border: none;
  border-bottom: 2px solid #7f7e7f;
  background-color: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #333;
}

.conta-paper form input[type="text"]::placeholder {
  color: #999;
}

.conta-paper form input[type="text"]:focus {
  outline: none;
  border-bottom: 2px solid #80bc00;
}
.conta-paper form textarea {
 width: 100%;
 padding: 10px 5px;
 margin-bottom: 15px;
 border: 2px solid #7f7e7f;
 background-color: transparent;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 color: #333;
 border-radius: 10px;
}
.conta-paper form textarea::placeholder {
  color: #999;
}
.conta-paper form textarea:focus {
  outline: none;
  border: 2px solid #80bc00;
}

.conta-paper .Enviar-btn {
  background-color: #80bd00;
  border-style: solid;
  border-color: #80bd00;
  border-radius: 20px;
  padding: 2px 38% 2px 38% ;
  display:block;
  margin:auto;
  color: white;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 150%;
  font-style: oblique;
  transition: 0.5s;
  margin-bottom: 2%;
}
.conta-paper .Enviar-btn:hover {
  background-color: #4c7000;
  border-style: solid;
  border-color: #80bd00;
  border-radius: 20px;
  padding: 2px 38% 2px 38% ;
  display:block;
  margin:auto;
  color: white;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 150%;
  font-style: oblique;
  margin-bottom: 2%;
}
.conta-paper img {
  width: 100%;
}

.conta-verde {
  background-color: #80bd00;
  padding: 2% 2% 2% 2%;
  margin: 2% 0 2% 0;
}
.contac-map {
  padding: 20px;
}

.contac-map .col-md-6 {
  position: relative;
}

.contac-map .col-md-6.text-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #6F6F6F;
}

.contac-map h2 {
  position: relative;
  font-family: 'Montserrat medium', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  color: #6F6F6F;
  padding-left: 30px; /* Add padding to make space for the circle */
}

.contac-map h2::before {
  content: '';
  position: absolute;
  left: 0px; /* Adjusted to align the circle with the line */
  top: 45%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #6F6F6F;
  border-radius: 50%;
  background-color: white; /* Make the circle transparent */
}

.contac-map p {
  font-family: 'Montserrat medium', sans-serif;
  font-size: 20px;
  font-style: normal;
  color: #8e8e8e;
  padding-left: 30px; /* Align text with the h2 */
  margin-bottom: 6%;
}
.contac-map h4 {
  font-family: 'Montserrat medium', sans-serif;
  font-size: 20px;
  font-style: italic;
  color: #8e8e8e;
  padding-left: 30px; /* Align text with the h2 */
}
.contac-map h1 {
 font-family: 'Montserrat medium', sans-serif;
 font-size: 30px;
 font-style: normal;
 font-weight: 800;
 color: #6F6F6F;
}


.whatsapp-button {
  position: fixed;
  bottom: 80px;
  right: 10px;
  background-color: #25D366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.whatsapp-button img {
  width: 30px;
  height: 30px;
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  text-align: center;
  display: none;
  z-index: 1000;
}
.cookie-banner a {
  color: #4CAF50;
  text-decoration: underline;
  font-family: 'Montserrat black', sans-serif;
}
.cookie-banner button {
  background-color: #4CAF50;
  color: white;
  border: none;
  font-family: 'Montserrat black', sans-serif;
  padding: 10px 20px;
  margin-left: 20px;
  cursor: pointer;
}

@media (max-width: 1199px) {
  .destruimos .circulo {
    padding: 25px 0px 15px 0px;
    height: 70%;
    width: 70%;
    max-width: 200px;
    border-radius: 100%;
    align-items: center;
    background-color: #80bc00;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .carr img {
    width: 40%;
    display: block;
    margin: auto;
  }
  .iniciod h2 {
    font-family: 'Montserrat black', sans-serif;
    font-style: oblique;
    color: white;
    font-size: 265%;
    text-align: right;
    font-weight: 900;
    margin-bottom: -20px;
  }

}
@media (max-width: 991px) {
  .semarnat1 img{
    padding-top: 2%;
    width: 40%;
    display:block;
    margin:auto;
    padding-bottom: 2%;
  }
  .imagen-sal-abobn img{
    position: absolute;
    width: 80%;
    margin-top: 5%;
    left: -40%;
  }
}
@media (max-width: 919px) {
  .obj h3 {
    margin-top: 5%;
    color: #80bb00;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 150%;
    font-weight: 700;
  }
  .nomr1 h3 {
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 150%;
    font-weight: 900;
  }
  .nomr1 p {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    text-align: center;
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .destruimos .circulo {
    height: 60%;
    width: 60%;
  }

  .destruimos h2 {
    font-size: 35px;

  }

  .destruimos h3 {
    font-size: 18px;
  }

  .destruimos p {
    font-size: 14px;
  }
  .carr img {
    width: 62%;
    display: block;
    margin: auto;
  }

  .Nues h3 {
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 100%;

  }
  .imgservi{
    width: 50%;
    overflow: hidden;
    position: relative;display:block;
    margin:auto;
  }

  .imgservi img {
    position: relative;
    right: 0%;
    width: 100%;

  }

  .nivel1 h3 {
    color: #80bc00;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    text-align: center;
    font-weight: 900;
    font-size: 200%;
  }
  .nivel1 h6 {
    color: #80bc00;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    text-align: center;
    font-size: 200%;
    font-weight: 100;
  }
  .nivel1 b {
    color: #666666;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    text-align: center;
  }
  .nivel1 p {
    color: #666666;
    font-family: 'Montserrat medium', sans-serif;
    font-style: normal;
    text-align: center;
  }
  .nivel .NivelBut {
    background-color: #1d1d1b;
    color: white;
    float: none;
    margin: auto;
    display:block;
    border-style: solid;
    border-color: #1d1d1b;
    border-radius: 20px;
    padding: 0px 20px 0px 20px;
    font-style: italic;
    transition: .1s;
    margin-bottom: 2%;
  }
  .nivel .NivelBut:hover {
    background-color: #8f8f84;
    color: white;
    float: none;
    margin: auto;
    margin:auto;
    border-style: solid;
    border-color: #1d1d1b;
    border-radius: 20px;
    padding: 0px 20px 0px 20px;
    font-style: italic;
    margin-bottom: 2%;
  }

  .img-container {
    padding: 25%;
    position: relative;
    overflow: hidden;
  }
  .certificado-img {
    position: absolute;
    top: 0%;
    right: 20%;
    z-index: 2;
    width: 55%;
    height: auto;

  }


  .img-container2 {
    padding: 25%;
    position: relative;
    overflow: hidden;
  }

  .certificado-img2 {
    position: absolute;
    top: 0%;
    right: 20%;
    z-index: 2;
    width: 55%;
    height: auto;
  }


  .imagen-sal-abobn img{
    position: relative;
    width: 80%;
    margin-top: 5%;
    left: 10%;
  }
  .paper-sosten-01 p {
    color: #80bc00;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: 'Montserrat medium', sans-serif;
    font-size: 20px;
    padding: 0px 2% 0% 2%;
    font-style: normal;
  }

}
@media (max-width: 624px) {
  .obj h3 {
    margin-top: 5%;
    color: #80bb00;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 80%;
    font-weight: 700;
    text-align: justify;
  }
  .ImgOb img {
    position: relative;
    left: -40%;
    width: 140%;
  }
  .seguro h3 {
    color: seguro;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 900;
    color: #80bc00;
    font-size: 30px;
  }
  .seguro p {
    color: #666666;
    font-size: 15px;
  }
  .nomr1 h3 {
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 130%;
    font-weight: 900;
  }
  .nomr1 p {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    text-align: center;
    font-size: 15px;
  }
}