/* Base Styles */
      body {
        font-family:
          "Satoshi",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        background-color: #ffffff;
        color: #000000;
        font-weight: 400;
        font-size: 20px;
        line-height: 1.5;
      }

      a {
        text-decoration: none;
      }

      /* Landing Section */
      

      .main-container {
        margin-left: 47px;
        width: 100%;
        max-width: 1295px;
      }

      .menu-container {
        align-self: center;
        max-width: 100%;
      }

      .menu-item a {
        font-family: 'Satoshi', sans-serif;
        font-size: 20px;
        color: #000000;
        font-weight: 200;
        margin-bottom: 20px;
        display: block;
      }

      .menu-item a:hover {
        text-decoration: underline;
      }

      .section-title {
        color: #000000;
        font-size: 55px;
        font-family: 'Satoshi', sans-serif;
        font-weight: 700;
        margin-bottom: 0px;
      }

      .title-noticias{
        color: #F88D2A;
        font-size: 55px;
        font-family: 'Satoshi', sans-serif;
        font-weight: 700;
        margin-bottom: 0px;
      }

      .section-title-map,
      .section-title-revert {
        color: #000000;
        font-size: 55px;
        font-family: 'Playfair Display';
        font-style: italic;
        margin-bottom: 0px;
      }

      .section-subtitle-map {
        font-size: 55px;
        font-family: 'Satoshi', sans-serif;
        font-weight: 700;
        margin-bottom: 0px;
        color: #000000;
      }
      .section-subtitle-impact,
      .section-title-impact {
        color: #E53E51;
        font-size: 55px;
        font-family: 'Satoshi', sans-serif;
        font-weight: 700;
        margin-bottom: 0px;
      }

      .section-subtitle-impact {
        padding-left: 135px;
      }

      .section-subtitle {
        color: #000000;
        font-size: 55px;
        font-family: 'Playfair Display';
        font-style: italic;
        padding-left: 135px;
        margin-bottom: 0px;
      }

      .section-subtitle-revert {
        color: #000000;
        font-size: 55px;
        font-family: 'Satoshi', sans-serif;
        font-weight: 700;
        padding-left: 135px;
        margin-bottom: 0px;
      }

      .sidebar-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .sidebar-item {
        margin-right: 75px;
      }

      .yellow-bar {
        background-color: #fcc91f;
        align-self: flex-start;
        display: flex;
        width: 229px;
        height: 47px;
        margin-left: -200px;
      }

      .sidebar-image {
        aspect-ratio: 0.5;
        object-fit: contain;
        object-position: center;
        width: 115px;
        margin-top: 163px;
        max-width: 100%;
      }

      .sidebar-image-green {
        align-self: flex-start;
        display: flex;
        margin-top: -70px;
        margin-left: -100px;

      }

      .sidebar-purples-circle {
        align-self: flex-start;
        display: flex;
        margin-top: 170px;
      }

      .sidebar-wave-blue {
        align-self: flex-start;
        display: flex;
        margin-left: -100px;
      }

      .sidebar-wave-green {
        align-self: flex-start;
        display: flex;
        margin-left: -100px;
      }

      .move-left-blue {
        margin-left: 110px;
        margin-top: 50px;
      }

      .move-left {
        margin-top: 70px;
        margin-left: -140px;
      }

      .sidebar-image-8 {
        display: flex;
        margin-left: 100px;
      }

      .sidebar-image-purple {
        align-self: flex-start;
        display: flex;
        margin-top: -70px;
        margin-left: 100px;
        z-index: 4;
        position: relative;
      }

      .femsa-icon {
        aspect-ratio: 0.65;
        object-fit: contain;
        object-position: center;
        width: 149px;
        margin-top: auto;
        margin-bottom: auto;
        flex-shrink: 0;
        max-width: 100%;
      }

      .content-text {
        color: #000000;
        font-size: 20px;
        font-family:
          "Satoshi",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        font-weight: 400;
      }

      .content-text p {
        color: #000000;
        font-size: 20px;
        font-family: 'Satoshi', sans-serif;
        font-weight:200;
      }

      .section-heading {
        margin-top: 162px;
        width: 619px;
        max-width: 100%;
        font-size: 55px;
        color: #000000;
      }

      .heading-italic {
        font-family:
          "Playfair Display",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        font-weight: 500;
        align-self: flex-start;
      }

      .heading-bold {
        font-family:
          "Satoshi",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        font-weight: 700;
        align-self: flex-end;
        margin-top: 5px;
      }

      /* Mission Section */
      .mission-section {
        width: 100%;
        max-width: 1350px;
      }

      .mission-image {
        aspect-ratio: 1.6;
        object-fit: contain;
        object-position: left;
        align-self: flex-start;
        display: flex;
        max-height: 400px;
        margin-left: -200px;
      }

      .mission-logo {
        aspect-ratio: 2;
        object-fit: contain;
        object-position: center;
        width: 236px;
        align-self: flex-end;
        margin-top: 80px;
        margin-left: 80px;
        max-width: 100%;
      }

      .mission-title {
        color: #e53e51;
        font-size: 30px;
        font-weight: 700;
        margin-top: 30px;
        margin-bottom: 30px;
      }

      .mission-content {
        margin-top: 56px;
      }

      /* Impact Section */
      .impact-section {
        margin-top: 53px;
        width: 100%;
        padding-left: 80px;
        padding-right: 80px;
      }

      .impact-image {
        aspect-ratio: 1.84;
        object-fit: contain;
        object-position: center;
        width: 100%;
        border-radius: 30px;
      }

      .impact-image-circle {
        align-self: flex-start;
        display: flex;
        width: 200px;
        margin-left: -100px;
        position: relative;
        z-index: 4;
      }

      .impact-title {
        color: #000000;
        font-size: 55px;
        font-family:
          "Playfair Display",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        font-weight: 500;
        margin-top: 69px;
        text-align: center;
      }

      .impact-subtitle {
        color: #000000;
        font-size: 55px;
        font-family:
          "Satoshi",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        font-weight: 700;
        margin-top: 14px;
        text-align: center;
      }

      .impact-description {
        color: #000000;
        font-size: 20px;
        font-family:
          "Satoshi",
          -apple-system,
          Roboto,
          Helvetica,
          sans-serif;
        font-weight: 400;
        margin-top: 42px;
        width: 607px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }

      .investment-stats {
        width: 80%;
        max-width: 100%;
        margin: 22px auto;
        float: left;
        margin-bottom: 0px;
      }

      .investment-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 13px;
      }

      .investment-label span,
      .investment-amount {
        color: #e53e51;
        font-size: 32px;
        font-weight: 900;
        line-height: 1;
      }

      .investment-label b,
      .investment-amount b{
        font-size: 20px;
        color: black;
      }

      .investment-label {
        color: #000000;
        font-size: 20px;
        font-weight: 900;
        line-height: 22px;
        min-width: 200px;
      }

      .text-accent {
        color: #e53e51;
        font-size: 20px !important;
      }

      .divider {
        border-color: #e7e7e7;
        border-style: solid;
        border-width: 1px;
        width: 100%;
        max-width: 100%;
        height: 1px;
        margin: 0 auto 16px;
      }

      .category-stat {
        margin-bottom: 20px;
        min-height: 90px;
      }

      .stat-amount {
        color: #000000;
        font-size: 32px;
        font-weight: 900;
        line-height: 1;
      }

      .stat-label {
        color: #000000;
        font-size: 20px;
        font-weight: 900;
        line-height: 1.1;
        margin-top: 4px;
      }

      .orange {
        color: #f88d2a;
      }

      .green {
        color: #4a9462;
      }

      .blue {
        color: #3d7cc9;
      }

      .purple {
        color: #634c78;
      }

      .impact-metrics {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
        
      }

      .metric {
        margin-right: 30px;
      }
      .metric-number {
        color: #e53e51;
        font-size: 32px;
        font-weight: 900;
        line-height: 1;
      }

      .metric-label {
        color: #000000;
        font-size: 20px;
        font-weight: 900;
        line-height: 22px;
        margin-top: 4px;
      }

      .countries-section {
        padding-right: 20px;
      }

      .country-stat {
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .stat-number {
        color: #e53e51;
        font-size: 32px;
        font-weight: 900;
        line-height: 1;
      }

      .country-list {
        color: #000000;
        font-size: 20px;
        font-weight: 400;
        margin-top: 17px;
      }

      .map-image {
        aspect-ratio: 0.86;
        object-fit: contain;
        object-position: center;
        width: 100%;
      }

      /* Footer */
      .footer {
        background-color: #e53e51;
        width: 100%;
        max-width: 1440px;
        padding: 92px 70px;
      }

      .footer-logo {
        aspect-ratio: 0.68;
        object-fit: contain;
        object-position: center;
        width: 67px;
        align-self: flex-start;
        flex-shrink: 0;
      }

      .footer-title {
        font-size: 28px;
        font-weight: 900;
        color: #ffffff;
        margin-bottom: 34px;
      }

      .footer-link a {
        font-size: 18px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 32px;
      }

      .footer-link a:hover { 
        text-decoration: underline;
      }
/* Navbar */
.navbar.azm-navbar {
  background-color: transparent !important;
  backface-visibility: hidden;
  padding-top: 25px;
}

.navbar.bg-dark.azm-navbar .dropdown-menu { background-color: #3d3d3d; }



.azm-navbar .nav-link { font-size: 1.6rem; color: white; font-family: 'Satoshi', sans-serif; font-weight: 700; text-align: right;
  padding-right: 100px; }

.azm-navbar .nav-link:hover { font-family: 'Playfair Display'; font-style: italic;}

.azm-navbar .dropdown-menu { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }


.azm-navbar .navbar-toggler:focus { outline: 0; box-shadow: none; }

.azm-navbar .navbar-toggler span {
  display: block; width: 22px; height: 2px; margin: 6px auto; background: white;
  transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.azm-navbar .navbar-toggler:hover span,
.azm-navbar .navbar-toggler:focus span { background: #fff; }

/* rotate first span */
.azm-navbar .navbar-toggler[aria-expanded="true"] span:first-of-type { transform: rotate(45deg) translate(6px, 6px); background: white !important; }
/* hide second span */
.azm-navbar .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) { opacity: 0; }
/* rotate third span */
.azm-navbar .navbar-toggler[aria-expanded="true"] span:last-of-type { transform: rotate(-45deg) translate(5px, -5px);background: white !important;}

.azm-navbar .navbar-toggler[aria-expanded="false"] span { transform: none; opacity: 1; }
#toggle-burguer{
  border: none;
  width: 42px;
  height: 42px;
  padding: 0;
  z-index: 101;
  position: fixed;
  right: 30px;
}

.title {
  font-family: 'Satoshi', sans-serif;
  color: white;
  font-weight: bold;
  margin-left: -100px;
  margin-top: 10px;
}

.navbar-collapse{
  background: black;
    top: 0;
    position: fixed;
    width: 60%;
    right: 0;
    z-index: 100;
    padding-top: 90px;
    padding-bottom: 90px;
    height: 100%;
}
.btn-ver-mas{
  background: transparent !important;
  border: solid 1px white;
}

.color-black span{
  background: black !important;
}

.cards-wrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;  
  border-radius: 30px;
  margin-top: -40px;
}

.card-item {
  flex: 1;
  transition: flex 0.5s ease, filter 0.5s ease;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card-item.active {
  flex: 4;
  z-index: 2;
  border: 1px solid white;
  border-radius: 30px;
  /* filter: brightness(0.8); */
}
.card-item.active .overlay {
  border-radius: 30px;
}

.card-item.dimmed {
  flex: 0.4;
  z-index: 1;
}

.overlay {
    position: absolute;
    inset: 0;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    text-align: center;
    z-index: 3;
    background: rgba(0, 0, 0, .4);
}

.number-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-weight: bold;
    color: white;
    margin-top: 40px;
    font-family: 'Satoshi', sans-serif;
}

.card-text {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    width: 45%;
    text-align: left;
    font-size: 24px;
    margin-left: 250px;
}

.card-item.active .card-text {
    opacity: 1;
    max-height: 300px; /* suficientemente grande para mostrar todo el párrafo */
}

.card-item.active .number-circle {
  margin-left: -115px;
}

.container-footer {
  width: 100%;
  background: #E53E51;
}

.mr-1 {
  margin-right: 10px;
}

.bg-orange {
  background: #F2A74B; 
}
.bg-purple {
  background: #624B78; 
}
.bg-blue {
  background: #3D7CC9; 
}

.bg-green {
  background: #4A9462; 
}

.bg-white {
  background: white !important; 
}

.text-white {
  color: white !important;
}

.text-black{
  color: black !important;
}

.new-with {
  width: 70%;
}

.p-135 {
  padding-left: 135px;
}

.py-7{
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

#slide-content .slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  height: 392px; /* ← Altura fija del slider */
}

#slide-content .slide img {
  width: 100%;
  height: 100%;           /* ← Altura igual a la del slider */
  object-fit: cover;      /* ← Mantiene proporción y recorta */
  border-radius: 20px;
  transition: transform 0.3s ease;
}
#slide-content .slider {
  display: flex;
  transition: transform 0.5s ease;
}

#slide-content .slide {
  flex: 0 0 33.3333%;
  padding: 10px;
  opacity: 0.3;
  transition: opacity 0.4s ease;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 30px;
  position: relative;
  top: 40px;
  height: 350px;
}

#slide-content .slide.active {
  opacity: 1;
  cursor: default;
  top: 0px;
}



#slide-content  .slide:not(.active):hover img {
  transform: scale(1.02);
}

#slide-content .slide.disabled {
  pointer-events: none;
  opacity: 0;
}
.d-flex {
  display: inline-flex !important;
}
.ml-100 {
  margin-left: -100px;
}
.achievement-title {
  color: rgba(0, 0, 0, 1);
  font-size: 55px;
  font-weight: 700;
  align-self: flex-end;
  margin-right: 142px;
  font-weight: bold;
    margin-bottom: 40px;
    font-family: 'Satoshi', sans-serif;
  }

  .achievement-image-container {
  margin-top: 62px;
  }

  .achievement-image {
  aspect-ratio: 0.87;
  object-fit: contain;
  object-position: center;
  width: 100%;
  }

  .achievement-content {
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-left: 100px;
  }

  .achievement-numbers {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 29px;
  color: rgba(248, 141, 42, 1);
  font-weight: 900;
  line-height: 1;
  }

  .number-item {
    align-self: flex-start;
    display: flex;
    position: relative;
    top: 30px;
  }

  .number-item:nth-child(2) {
  margin-top: 86px;
  }

  .number-item:nth-child(3) {
  margin-top: 101px;
  }

  .number-item:nth-child(4) {
  margin-top: 133px;
  }

  .number-item:nth-child(5) {
  margin-top: 140px;
  }

  .achievement-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  width: fit-content;
  }

  .achievement-description {
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  font-weight: 400;
  align-self: flex-end;
  padding-left: 80px;
  font-family: 'Satoshi', sans-serif;
    font-weight: 200;
    line-height: 27px;
  }

  .annual-report-title {
  font-size: 28px;
  font-weight: 900;
  margin-top: 2458px;
  color: rgba(0, 0, 0, 1);
  }

  .annual-report-subtitle {
  margin-top: 34px;
  color: rgba(0, 0, 0, 1);
  }

  .annual-report-subtitle:last-child {
  margin-top: 32px;
  }

  #noticias-content {
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
      background-size: 50px 50px;
      background-color: white;
      padding: 20px;
  }

  #noticias-content .scroll-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
  }

  #noticias-content .scroll-wrapper p {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
  }

  #noticias-content .card-custom {
    display: inline-block;
    width: 300px;
    margin-right: 1rem;
    vertical-align: top;
    border: 2px solid #f58220;
    border-radius: 1rem;
  }

  #noticias-content .card-custom img {
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    object-position: top;
  }

  #noticias-content .slider-buttons {
    float: right;
  }

  #noticias-content .btn-circle {
    width: 50px;
    height: 40px;
    font-size: 1.2rem;
    line-height: 1;
  }

  .color-purple {
    color: #624B78 !important;
  }
  .color-blue {
    color: #3D7CC9 !important;
  }
  .color-green {
    color: #4A9462 !important;
  }

  .border-purple {
    border: 2px solid #624B78 !important;
  }
  .border-blue {
    border: 2px solid #3D7CC9 !important;
  }
  .border-green {
    border: 2px solid #4A9462 !important;
  }

  .bg-b .navbar-collapse{
    background: black;
  }
  
  .bg-r .navbar-collapse{
    background: #E53E51;
  }
  
  .bg-p .navbar-collapse{
    background: #F88D2A;
  }
  
  .bg-a .navbar-collapse{
    background: #624B78;
  }
  
  .bg-s .navbar-collapse{
    background: #3D7CC9;
  }
  
  .bg-e .navbar-collapse{
    background: #4A9462;
  }

  .card-body a:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    #noticias-content .card-custom {
      width: 230px;
    }
  }

  
  /* Media Queries */
  @media (max-width: 991px) {
    #noticias-content  .landing-container {
      padding-right: 20px;
      padding-bottom: 100px;
  }

  .achievement-title {
      max-width: 100%;
      margin-right: 10px;
      font-size: 40px;
      margin-top: 10px;
      margin-bottom: 10px;
  }

  .achievement-image-container {
      margin-top: 40px;
  }

  .achievement-image {
      max-width: 100%;
  }

  .achievement-content {
      max-width: 100%;
      margin-top: 0px;
      padding-left: 0px;
  }

  .achievement-description {
      max-width: 100%;
  }

  .annual-report-title {
      margin-top: 40px;
  }

  .annual-report-subtitle {
      margin-left: 3px;
  }

  .number-item:nth-child(2),
  .number-item:nth-child(3),
  .number-item:nth-child(4),
  .number-item:nth-child(5) {
      margin-top: 40px;
  }
  }
@media (max-width: 768px) {
  .cards-wrapper {
    flex-direction: column;
    height: auto;
    max-width: 100%;
  }

  .card-item,
  .card-item.active,
  .card-item.dimmed {
    flex: none;
    width: 100%;
    height: 200px;
    border-radius: 30px;
    margin-bottom: 5px;
  }
}

/* Responsive Styles */

/* Default: Extra-small devices such as small phones (less than 640px) */

/* Largest devices such as desktops (1280px and up) */
@media only screen and (min-width: 1280px) {}

/* Large devices such as laptops (1024px and up) */
@media only screen and (max-width: 1024px) {
  .divisar {
    width: 70% !important;
  }
   .timeline::before {
    background-color: transparent !important;
  }
  .right-col{
    padding: 2rem !important;
  }
  .mission-image {
    max-width: 500px;
  }
  .investment-amount {
    font-size: 25px;
  }
  h1,
  h2 {
    font-size: 40px !important;
  }
  a,
  p {
    font-size: 18px !important;
  }
  h3 {
    font-size: 20px !important;
  }
  .sidebar-image-8 {
    margin-left: 0px;
  }
  .sidebar-purples-circle {
    width: 300px;
  }
  .ssidebar-wave-green,
  .sidebar-wave-green,
  .sidebar-wave-blue{
    width: 200px;
  }
  .right-header{
    width: 200px;
  }
  .middle-header {
    right: 0 !important;
  }
  .left-header {
    left: -125px !important
  }
  .right-header-line {
    right: -130px !important;
  }
  .right-header-circle{
    width: 100px;
  }
  .femsa-vector-right{
    width: 100px;
    right: 0 !important;
  }
  .bg-articulo-eco {
    background-size: cover !important;
  }
  /*  .move-center-content .py-2 .col-1 img{
    position: relative;
    margin-left: -20px; 
  } */
  .center-li {
    padding-left: 15px !important;
  }
  .move-center-content {
    width: 75% !important;
  }
  .femsa-vector-left,
  .circle-vector-left {
    display: none;
  }
  .tabla-simulada b,
  .tabla-simulada ul{
    font-size: 15px;
  }
  
  .femsa-ligera-esp,
  .femsa-orange-vector,
  .vectorline-orange,
  .orange-ring,
  .orange-vector,
  .femsa-ligera-esp,
  .femsa-arte,
  .medio-voz,
  .circle-arte-left,
  .right-comparte-circle,
  .left-comparte-circle,
  .waves-right-top,
  .femsa-right-top,
  .waves-right-top {
    width: 100px !important;
  }
}

@media (max-width: 991px) {
  .orange-vector,
  .vectorline-orange,
  .femsa-orange-vector,
  .centro-vector{
     width: 100px !important;
  }
  ol{
    padding: 3rem !important;
    text-align: left;
    max-width: 100% !important;
    margin: 0 auto;
    padding-top: 10px;
    padding-left: 4rem;
    padding-bottom: 0px;
    font-size: 16px;
  }
  ul{
    font-size: 15px !important;
}  
  .artes-cards .col-md-4,
  .hidrica-cards .col-md-4{
    width: 100%;
    margin-bottom: 20px;
  }
  .artes-cards .col-md-4 .container-middle-eco,
  .hidrica-cards .col-md-4 .container-middle-eco {
    min-height: 300px !important;
    max-height: 300px !important;
    padding: 35px !important;
  }
  .cardis .col-md-4{
    width: 100%;
    margin-bottom: 20px;
  }
  .left-header {
      left: -170px !important;
  }
  .right-header-line {
      right: -170px !important;
  }
  .main-container {
    max-width: 100%;
  }
  .titulo-blue {
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0px !important;
    line-height: 36px !important;
    margin-top: 20px !important;
  }
  .sidebar-item {
    margin-right: 10px;
  }

  .sidebar-image {
    margin-top: 40px;
  }

  .section-heading {
    margin-top: 40px;
  }

  .heading-italic,
  .heading-bold {
    font-size: 40px;
  }

  .section-title {
    margin-top: 13px;
    font-size: 40px;
  }

  .mission-section {
    max-width: 100%;
    margin-top: 40px;
  }

  .mission-logo {
    margin-top: 40px;
    margin-right: 10px;
  }

  .mission-content {
    margin-top: 40px;
  }

  .impact-section {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
  }

  .impact-image {
    max-width: 100%;
  }

  .impact-title,
  .impact-subtitle {
    margin-top: 40px;
    font-size: 40px;
  }

  .impact-description {
    margin-right: 10px;
    margin-top: 40px;
  }

  .investment-stats,
  .investment-row,
  .divider {
    margin-right: 10px;
  }

  .footer {
    max-width: 100%;
    padding: 92px 20px;
    margin-top: 40px;
  }
  .mission-image {
    max-width: 420px;
  }
  .dimmed .card-text {
    opacity: 1;
    max-height: 300px;
    width: 100%;
  }
  .number-circle {
    margin-top: 10px;
  }
  .dimmed .number-circle {
    margin-left: -115px;
  }
  .sidebar-image-purple {
    margin-left: 10px;
  }
  .grid-container {
    width: 100%;
  }
  .right-col {
    font-size: 20px !important;
  }
  .orange-ring,
  .circle-arte-left,
  .medio-voz,
  .waves-right-top,
  .femsa-right-top,
  .waves-right-top,
  .ssidebar-wave-green,
  .sidebar-wave-green,
  .sidebar-wave-blue,
  .sidebar-purples-circle,
  .sidebar-image,
  .femsa-ligera-esp,
  .orange-vector,
  .femsa-ligera-esp,
  .sidebar-image-8 {
    display: none;
  }
  .p-135 {
    padding-left: 0px;
  }
  #slide-content .slide {
    flex: 0 0 45.3333%;
  }
  .slider-container .card-custom {
    padding: 1rem !important;
    font-size: 16px !important;
  }
  .card-custom span{
    font-size: 22px !important;
  }
  .slider-container .card-icon{
    width: 35px !important;
  }
}

/* Medium devices such as tablets (992px and down) */
@media only screen and (max-width: 992px) {
  #toggle-title,
  #miDiv{
    display: none !important;
  }
  #toggle-burguer{
    background: #E53E51;
  }
  .color-black span{
    background: white !important;
  }
}
/* Small devices such as large phones (1440px and up) */
@media only screen and (max-width: 1439px) {
 
  .section-subtitle {
    padding-left: 0px;
  }
  .achievement-title {
    margin-right: 0px;
  }
}

/* Medium devices such as tablets (768px and up) */
@media only screen and (max-width: 767px) {
  .move-center-forta,
  .grid-container .row {
    width: 100%;
    display: block;
  }
  .left-counter h5{
    font-size: 19px !important;
  }
  .grid-container .row .col-7{
    font-size: 18px;
  }
  .grid-container .row .col-5{
    font-size: 20px;
  }
  .hidrica-cards .col-md-4 .container-middle-eco {
    padding: 15px !important;
  }
  .container-middle-eco{
    min-height: 300px !important;
    max-height: 300px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .tabla-simulada .col-4 {
    width: 100% !important;
  }
  .femsa-arte,
  .tabla-simulada b {
    display: none!important;
  }
  .middle-header {
    width: 80px !important;
  }
  .navbar-brand {
    padding-left: 10px !important;
  }
  .container-middle-eco{
    padding: 35px !important;
  }
  .artes-cards .col-md-4 .container-middle-eco,
  .bg-articulo-eco-do{
    max-height: max-content !important;
  }
  .vectorline-orange,
  .femsa-orange-vector,
  .right-comparte-circle,
  .left-comparte-circle,
  .femsa-vector-right,
  .right-header-circle,
  .right-header-line,
  .left-header,
  .sidebar-image-purple,
  .menu-items,
  .femsa-icon,
  .mission-logo,
  .sidebar-image,
  .orange-vector,
  .vectorline-orange,
  .femsa-orange-vector,
  .centro-vector,
  .timeline-dot,
  .orange-circle{
    display: none;
  }
  .timeline-item{
    display: block !important;
  }
  .timeline {
    max-width: 100% !important;
  }
  .timeline-content{
    flex: auto !important;
    padding-left: 0rem !important;
    font-size: 16px !important;
  }
  .section-subtitle-revert,
  .section-subtitle {
    padding-left: 60px;
  }
  .section-subtitle-revert,
  .section-subtitle {
    margin-bottom: 20px;
  }
  h1,
  h2 {
    font-size: 26px !important;
  }
  a,
  p {
    font-size: 16px !important;
    text-align: center !important;
  }
  h3 {
    font-size: 18px !important;
  }
  .yellow-bar{
    width: 229px;
    height: 15px;
    margin-left: -177px;
    margin-top: -35px;
  }
  .mission-image{
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
  }
  .sidebar-image-green {
    align-self: flex-start;
    display: flex;
    margin-top: -100px;
    margin-left: -5px;
    width: 19%;
  }
  .mission-title{
    text-align: center;
  }
  .impact-image-circle {
    width: 100px;
    margin-left: 0px;
  }
  .card-text {
    width: 100%;
    margin-left: 0px;
  }
  .overlay{
    align-items: baseline;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 30px;
    margin-bottom: 5px;
  }
  .card-item.active,
  .card-item.dimmed {
    height: 300px;
  }
  .section-title-map,
  .cards-wrapper {
    margin-top: 20px;
  }
  .section-title-map, .section-title-revert {
    text-align: center;
  }
  .section-subtitle-map{
    text-align: center;
    line-height: 26px;
  }
  .investment-stats{
    width: 100%;
  }
 .investment-label span,
  .investment-label,
  .investment-amount {
    font-size: 20px;
  }
  .investment-label{
    padding-left: 10px;
  }
  .category-stat{
    min-height: auto;
    text-align: center;
  }
  .stat-amount {
    font-size: 25px;
  }
  .metric{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  .footer-title{
    text-align: left;
    margin-top: 10px;
  }
  .footer h3,
  .footer p,
  .footer a,
  .footer-link a{
    text-align: left !important;
    
  }
  .p-135{
    padding-left: 0px;
  }
  .py-5 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  #slide-content .slide {
    flex: 0 0 45.3333%;
  }
  
  #slide-content {
    max-height: fit-content;
  }
  .sidebar-image-8{
    width: 100px;
  }
  #noticias-content .scroll-wrapper,
  #noticiasr {
    margin-top: 0px !important;
    padding-left: 0px;
  }
  .sidebar-purples-circle,
  .sidebar-purples-circle{
    width: 200px;
  }
  .sidebar-purples-circle{
    margin-top: 10px;
  }
  .move-left{
    margin-left: 100px;
  }
  .sidebar-wave-green,
  .sidebar-wave-blue{
    width: 100px;
    margin-left: 0px;
  }
  .move-left-blue{
    width: 100px;
    margin-left: 100px;
    margin-top: 10px;
  }
  .azm-navbar .nav-link{
    font-size: 17px;
    padding-right: 30px;
    text-align: right !important;
  }
  .slide h1 {
    font-size: 2.1rem !important;
    line-height: 50px !important;
    padding-top: 0px !important;
    margin-top: 4rem;
  }
  .slide p {
    font-size: 1rem !important;
    width: 100%;
  }
  .slide h1{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .nota {
    padding: 1rem !important;
  }
  .right-header {
    width: 80px !important;
    margin-top: -60px !important;
  }
  .bg-articulo-eco {
    background-position: top !important;
  }
  .move-center-content {
    width: 100% !important;
  }
  .center-li{
    text-align: left !important;
  }
  .parallax .contenido p{
    width: 100% !important;
  }
}