html {
    scroll-behavior: smooth;  
  }
  
  body, html {
      margin: 0;
      padding: 0;
      max-width: 100%;    overflow-x: hidden;
  }
  
  h1{
      font-family: "Geologica", sans-serif;
  }
  h2{
      font-family: "Geologica", sans-serif;
  }
  
  p{
      font-family: "Poppins", sans-serif;
  }
  
  .topnav {
      background-color: #f9f9f9;
      display: flex;
      justify-content: center; /* Center the group of items */
      align-items: center;    /* Vertically align items */
      flex-wrap: wrap;        /* Allow wrapping if space is tight on very narrow screens before mobile breakpoint */
      gap: 30px;              /* Space between the items (adjust as needed) */
      height: 120px;          /* Desktop height */
      position: relative;     /* Needed for absolute positioning of donate button */
      padding-left: 15px;
      padding-right: 15px;
  }
  
  /* Style ALL links within topnav (text links AND logo link) */
  .topnav a {
      color: #3e3e3e!important;
      text-align: center;
      padding: 14px 16px;
      font-size: 17px;
      text-decoration: none;
      display: inline-block; /* Good practice for links */
      line-height: 1;        /* Prevent extra vertical space */
      flex-shrink: 0;        /* Prevent links/logo from shrinking too much */
  }
  
  /* The container for the text links (Desktop) */
  .topnav .nav-links {
      display: contents; /* CRITICAL: Makes its children direct flex items of .topnav */
  }
  
  /* --- DESKTOP ORDERING (Using Corrected hrefs) --- */
  /* Apply these styles OUTSIDE any media query, or within a min-width query for desktop */
  .topnav a[href="#servir"] { order: 1; }      /* Corrected */
  .topnav a[href="#brindamos"] { order: 2; }   /* Corrected */
  .topnav .navbar-brand { order: 3; }          /* Logo goes here */
  .topnav a[href="#historia"] { order: 4; }    /* Corrected */
  .topnav a[href="#formulario"] { order: 5; }  /* Corrected */
  
  /* Logo specific adjustments (Desktop) */
  .topnav .navbar-brand {
      padding: 0; /* Remove default link padding */
      margin: 0; /* Ensure no extra margins */
  }
  .topnav .navbar-brand img {
      max-height: 100px; /* Original size */
      width: auto;
      vertical-align: middle; /* Align image nicely */
  }
  
  /* Donate Button Styling (Desktop - Absolute Position) */
  .topnav a.donar-btn {
      position: absolute;
      background-color: #48b051 !important;
      color: white !important;
      padding: 10px 25px !important;
      border-radius: 25px !important;
      text-decoration: none !important;
      font-size: 14px !important;
      transition: background-color 0.3s ease;
      right: 5%; /* Position from the right edge */
      top: 50%;
      transform: translateY(-50%);
      order: 6; /* Give it an order high enough so it doesn't interfere if position was static */
  }
  
  .topnav a.donar-btn:hover {
      background-color: #218838;
  }
  
  /* Hamburger Button - Hidden on large screens */
  .topnav .hamburger-btn {
      display: none;
      order: 7; /* High order */
      /* other hamburger styles... */
  }
  
  #servir {
      position: relative;
      width: 100%;
      /* --- FIX: Remove Bootstrap Padding --- */
      padding-left: 0;
      padding-right: 0;
      /* --- End Fix --- */
      line-height: 0; /* Prevents potential extra space below video */
      overflow: hidden; /* Hide anything spilling out, just in case */
  }
  
  /* --- VIDEO Style (In-Flow) --- */
  #bg-video {
      display: block;
      width: 100%;
      height: auto;
  }
  
  /* --- OVERLAY Content Style --- */
  .servir-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px; /* Add some breathing room, especially on smaller screens */
  
      /* Optional: Add a subtle dark tint for text readability */
      /* background-color: rgba(0, 0, 0, 0.2); */
      /* color: white; */ /* Set default text color if needed */
  }
  
  
  /* --- RESPONSIVE Text and Button Styles --- */
  
  .servir-content h1 {
      font-weight: lighter;
      margin-bottom: 30px; /* Initial space */
      /* --- RESPONSIVE FONT SIZE --- */
      /* clamp(MIN_SIZE, PREFERRED_RESPONSIVE_SIZE, MAX_SIZE) */
      /* Adjust values as needed */
      font-size: clamp(1.8rem, 5vw, 3.5rem);
      /* --- End Responsive Font Size --- */
      line-height: 1.3; /* Adjust line height for readability */
      /* Optional: Text shadow */
      /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); */
  }
  
  /* Base styles for buttons shared across sizes */
  .servir-content .btn {
      display: inline-block;
      vertical-align: middle;
      /* Transitions for smoother size changes (optional) */
      transition: padding 0.3s ease, font-size 0.3s ease;
  }
  
  /* Default (larger screen) button styles */
  .btn-primary {
      background-color: #48b051 !important;
      color: white !important;
      padding: 8px 64px !important; /* Slightly increased base padding */
      border-radius: 25px !important;
      text-decoration: none !important;
      font-size: 17px !important;
      border-color: #48b051;
      margin-bottom: 10px;
  }
  
  .btn-secondary {
     
      background-color: white !important;
      border-color: #48b051;
      color: #48b051 !important;
      padding: 8px 50px !important; /* Slightly increased base padding */
      border-radius: 25px !important;
      text-decoration: none !important;
      font-size: 17px !important;
  }
  
  /* Keep span colors */
  .servir-content h1 span[style*="color:#e63946"] {
       /* text-shadow: 1px 1px 2px rgba(0,0,0,0.7); */
  }
  .servir-content h1 span[style*="color:#48b051"] {
       /* text-shadow: 1px 1px 2px rgba(0,0,0,0.7); */
  }
  
  #brindamos{
      padding-top: 30px;
      padding-bottom: 50px;
  }
  
  #brindamos h2{
      text-align: center;
      font-size: 24px;
      color: #e63946;
  }
  
  #brindamos h1{
      text-align: center;
      padding-bottom: 25px;
      margin-top: 15px;
  }
  
  #brindamos .col{
      text-align: center;
  }
  #brindamos .col h1{
      font-size: 22px;
      padding-bottom: 0px;
  }
  
  #contribucion{
      padding-bottom: 50px;
  }
  
  #contribucion .col-sm-5{
      text-align: center;
  }
  
  #contribucion h1{
      font-size: 30px;
      padding-bottom: 15px;
  
  }
  
  #contribucion p{
      padding-bottom: 15px;
  }
  
  #contibucion btn{
      display: inline-block;
      vertical-align: middle;
  
  }
  
  #contribucion .btn-primary{
      background-color: #48b051 !important;
      color: white !important;
      padding: 5px 62px !important;
      border-radius: 25px !important;
      text-decoration: none !important;
      font-size: 17px !important;
      border-color: #48b051;
  }
  
  #contribucion .btn-secondary {
      margin-left: 35px;
      background-color: white !important;
      border-color: #48b051;
      color: #48b051 !important;
      padding: 5px 55px !important;
      border-radius: 25px !important;
      text-decoration: none !important;
      font-size: 17px !important;
  }
  
  #historia-row .col-sm-6 {
    text-align: left;
  }
  
  #historia-row .col-sm-5 {
    text-align: center;
  }
  
  .mission-vision-card {
      background-color: #ffffff;
      border: 2px solid #f3ca4c;
      border-radius: 200px;
      padding: 1.5rem 2rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  
  .mv-icon {
      width: 100px;
      height: 100px;
      object-fit: contain;
  }
  
  .mv-title {
      font-weight: bold;
      color: #333;
      margin-bottom: 0.5rem;
  }
  
  .mv-text {
      color: #555;
      font-size: 0.95rem;
      line-height: 1.5;
      margin-bottom: 0;
  }
  
  .mission-vision-card .d-flex {
      align-items: flex-start;
  }
  
  .mission-vision-card .d-flex .flex-shrink-0 {
      padding-top: 5px;
  }
  
  .founder-section-wrapper {
    background-color: #f3ca4c;
    border-radius: 300px;
    padding: 1rem 3rem;
    max-width: 100%;
    margin: 2rem auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .founder-image {
    width: 180%;
    max-width: 260px;
    height: auto;
    border-radius: 100%;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-left: -50px;
  }
  
  .founder-title {
    font-weight: 700;
    color: #333;
    font-size: 2.8rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
  }
  
  .founder-text {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    margin-left: 1rem;
  }
  
  .mission-glimpse-section {
      background-color: #f7f7f7;
  }
  
  .section-title {
      font-size: 2rem;
      font-weight: 500;
      color: #333;
  }
  
  .section-title .highlight {
      color: #e63946;
      font-weight: 600;
  }
  
  #missionCarouselDesktop .carousel-control-prev {
      left: -50px;
      width: auto;
  }
  
  #missionCarouselDesktop .carousel-control-next {
      right: -50px;
      width: auto;
  }
  
  #missionCarouselDesktop .carousel-control-prev-icon,
  #missionCarouselDesktop .carousel-control-next-icon {
      filter: invert(1);
  }
  
  #missionCarouselDesktop .carousel-indicators {
      position: absolute;
      bottom: -40px;
      margin-bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      padding: 0;
      margin-left: 0;
      margin-right: 0;
      z-index: 2;
  }
  
  #missionCarouselDesktop .carousel-indicators [data-bs-target] {
      box-sizing: content-box;
      flex: 0 1 auto;
      width: 12px;
      height: 12px;
      padding: 0;
      margin-right: 5px;
      margin-left: 5px;
      text-indent: -999px;
      cursor: pointer;
      background-color: #fff;
      background-clip: padding-box;
      border: 2px solid #198754;
      border-radius: 50%;
      opacity: 0.6;
      transition: opacity 0.6s ease;
  }
  
  #missionCarouselDesktop .carousel-indicators .active {
      opacity: 1;
      background-color: #48b051;
      border-color: #48b051;
  }

  .carousel-image-caption {
    font-size: 0.85em; /* Adjust size as needed */
    color: #495057;   /* A standard Bootstrap muted text color */
    text-align: center;
    margin-top: 8px;  /* Space between image and caption */
    margin-bottom: 0; /* Remove default bottom margin if any */
    padding: 0 5px;   /* Optional horizontal padding */
    line-height: 1.4; /* Adjust line height for readability */
  }
  
  #unete {
      text-align: center;
      padding-top: 50px;
      padding-bottom: 50px;
  }
  
  #unete h1 {
      padding-top: 30px;
  }
  
  #unete .btn {
      background-color: #48b051;
      border-color: #48b051;
  }
  #formulario{
      padding-bottom: 50px;background: #f9f9f9
  }
  
  #formulario .col {
      display: flex;
      flex-direction: column;
      align-items: center;
  
  }
    #pagar{
      padding: 50px 0;text-align: center
  }
  
   #pagar .col {
      display: flex;
      flex-direction: column;
      align-items: center;
  
  }
#popup-zelle {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9999;}
#popup-zelle .mod {max-width: 50%;; margin: 10% auto; padding: 100px; background: #fff; border-radius: 10px; text-align: center; position: relative;}

#pagar img {margin: 20px 0; display: block; margin:20px auto; max-width: 40%;}
#pagar .zel {margin-top: 60px; max-width: 40%}
#pagar .payp {max-width: 40%; margin-top: 50px}
#pagar ul {padding: 0; margin-top: 40px}
#pagar li {display: block; margin: 15px 0}
#pagar span {display: inline-block; background:#e53945 ;text-align: center; width: 50px; height: 50px; line-height: 50px; color: #fff; font-size: 16px; border-radius: 10px}
#pagar li p {display: inline-block; width:40%}
  #formulario h1 {
      text-align: center;
      width: 100%;
      margin-bottom: 20px;
  }
.ath {text-align: center;}
#ATHMovil_Checkout_Button_payment div {width: 40%!important;margin: auto; text-align: center}
  .contact-list {
  
  
      width: fit-content;
  
  }

.contact-icon i.fa-phone {
  transform: scaleX(-1);
  display: inline-block; /* Ensures transform applies correctly if it's treated as purely inline */
}
  
  .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      text-align: left;
  }
  
  .contact-icon {
      margin-right: 10px;
      font-size: 20px;
      flex-shrink: 0;
      width: 25px;
      text-align: center;
      color: #e63946;
  }
  
  .contact-details {
      display: flex;
      flex-direction: column;
      text-align: left;
      margin-right: 150px;
  }
  
  
  
  .formulario-box {
    background-color: #7f7f7f;
    color: white;
    padding: 60px 40px;
    border-radius: 20px;
    font-size: 2.5em;
    font-family: sans-serif;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 400px;
    min-height: 450px;
  
    margin-left: auto;
    margin-right: auto;
  }
  
  
  .site-footer {
      background-color: #e63946;
      color: white;
      padding: 20px 0;
      font-size: 0.9em;
      width: 100%;
    }
  
    .footer-container {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 15px;
  
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }
  
    .footer-text {
  
      text-align: center;
      flex-grow: 1;
    }
.footer-text p {display: inline-block; margin: 5px}
    .footer-logos {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
      justify-content: center;
    }
  
    .footer-logo {
      height: 28px;
      width: auto;
      vertical-align: middle;
    }
  
  #misionicon{
      margin-top: 20px;
  }
  
  .floating-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      /*! z-index: 1000; */
      /*! display: block; */
    }
  
    .floating-btn img {
        width: 100px;
        height: 100px;
        transition: transform 0.3s ease; /* Keep transition or remove if animation is enough */
        /* ADD THE ANIMATION PROPERTY BELOW */
        animation: heartbeat 1.5s ease-in-out infinite; /* name duration timing-function iteration-count */
      }
  
    .floating-btn:hover img {
      transform: scale(1.05);
    }

    @keyframes heartbeat {
        0% {
          transform: scale(1);
        }
        25% {
          transform: scale(1.05); /* Slight pulse */
        }
        50% {
          transform: scale(1);
        }
        75% {
          transform: scale(1.1); /* Bigger pulse */
        }
        100% {
          transform: scale(1);
        }
      }
  
@media (max-width:1201px){
    #popup-zelle .mod {max-width: 70%;; margin: 10% auto; padding: 100px ; background: #fff; border-radius: 10px; text-align: center; position: relative;}
    .mod h3 {font-size: 24px}
   #pagar li p {
  display: inline-block;
  width: 50%;
}
}
  @media (max-width: 1100px){
      .topnav a.donar-btn {
      left: 88%;
      }
  }
  
  @media (max-width: 1000px) {
    .founder-section-wrapper {
      border-radius: 40px;
      padding: 1rem 1.5rem;
    }
  
    .founder-image {
      margin-left: 0;
      margin: 0 auto;
      display: block;
      max-width: 300px;
    }
  
    .founder-title {
      font-size: 2rem;
      text-align: center;
    }
  
    .founder-text {
  color: #444;
  font-size: 1rem;
  line-height: 1.7;
  margin-left: 3.5rem;
}
      
     .topnav {
          justify-content: space-between; /* Space out logo, donate, hamburger */
          height: 90px;
          flex-wrap: nowrap; /* Prevent wrapping */
          padding: 0 20px;
          gap: 15px;
      }
  
      /* Reset orders and display:contents for mobile */
      .topnav a,
      .topnav .navbar-brand,
      .topnav a.donar-btn,
      .topnav .hamburger-btn,
      .topnav .nav-links {
          order: initial; /* Reset order */
      }
      .topnav .nav-links {
          display: none; /* Override display:contents; Hide link container */
          /* Mobile dropdown styles */
          position: absolute;
          top: 90px; /* Match mobile topnav height */
          left: 0;
          width: 100%;
          background-color: #f9f9f9;
          flex-direction: column;
          align-items: center;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          z-index: 1000;
          border-top: 1px solid #eee;
          padding-bottom: 10px;
      }
  
      /* Mobile Order */
      .topnav .navbar-brand {
          order: 1;
          padding: 0;
      }
      .topnav .navbar-brand img {
           max-height: 65px; /* Mobile logo size */
      }
  
      .topnav a.donar-btn {
          order: 2;
          position: static; /* Back into flow */
          transform: none;
          margin: 0; /* Remove auto margins if any */
          padding: 5px 15px !important;
          font-size: 12px !important;
      }
  
      .topnav .hamburger-btn {
          display: flex; /* Show hamburger */
          order: 3;
          /* Styles for hamburger appearance */
          cursor: pointer;
          background: none;
          border: none;
          padding: 0;
          flex-direction: column;
          justify-content: space-around;
          width: 40px;
          height: 28px;
      }
      .topnav .hamburger-btn span {
          display: block;
          width: 100%;
          height: 3.5px;
          background-color: #3e3e3e;
          border-radius: 3px;
          transition: all 0.3s ease-in-out;
      }
  
      /* Show mobile nav links when active */
      .topnav.active .nav-links {
          display: flex;
      }
  
      /* Style links in the mobile dropdown */
      .topnav .nav-links a {
          padding: 15px 16px;
          width: 100%;
          text-align: center;
          border-bottom: 1px solid #eee;
      }
      .topnav .nav-links a:last-child {
          border-bottom: none;
      }
  
       /* Hamburger active state animation */
      .topnav.active .hamburger-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
      .topnav.active .hamburger-btn span:nth-child(2) { opacity: 0; }
      .topnav.active .hamburger-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  
      /* Other mobile adjustments from your original CSS */
      .founder-section-wrapper { /* ... */ }
      .founder-image { /* ... */ }
      /* ... etc ... */
  }
  
  @media (max-width: 991.98px) {
      #pagar .payp {
  max-width: 50%;
  margin-top: 50px;
}
      #pagar .zel {
  margin-top: 60px;
  max-width: 50%;
}
      #ATHMovil_Checkout_Button_payment div {
  width: 50% !important;
  margin: auto;
  text-align: center;
}
      #pagar img {
  margin: 20px 0;
  display: block;
  margin: 20px auto;
    margin-top: 20px;
  max-width: 60%;
}
   #pagar li p {display: inline-block; width:60%}
      .founder-section-wrapper {
          /* Adjust margin-top to make space for the image popping out */
          /* Calculation based on image height defined below (e.g., 150px) */
          margin-top: calc(150px / 2 + 2rem); /* Half image height + desired gap */
          padding: 1.5rem; /* Adjust padding for stacked view */
          border-radius: 25px; /* Optional: adjust radius */
      }
  
      .founder-image {
          /* Set fixed size for reliable overlap calculation */
          width: 200px;
          height: 200px;
          /* Add the border matching the card background */
          border: 6px solid #f3ca4c;
          /* Center the image horizontally */
          display: block;
          margin-left: auto;
          margin-right: auto;
          /* Apply the overlap */
          margin-top: -110px; /* -(Image Height / 2) */
          position: relative; /* Needed for z-index */
          z-index: 2;
          box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Add shadow */
          /* Override desktop vertical-align */
          vertical-align: baseline;
      }
  
      /* Adjust text alignment and spacing for stacked view */
      .founder-title,
      .founder-text {
          text-align: center;
          margin-left: 0;
      }
  
      .founder-section-wrapper .col-lg-10 {
          /* Reset padding that might interfere */
          padding-top: 0;
      }
  }
  
  
  @media (max-width: 949.98px) {
  
      /* Target both columns within the specific row */
      #formulario #formulario-row > .col {
          flex-basis: 100%;    /* Make columns take full width */
          max-width: 100%;     /* Allow them to take full width */
      }
  
      /* Add space below the first column (contact details) when stacked */
      #formulario #formulario-row > .col:first-child {
          margin-bottom: 40px; /* Adjust spacing as needed */
          align-items: center; /* Ensure content stays centered */
      }
  
       /* Ensure iframe column is still centering */
      #formulario #formulario-row > .col:nth-child(2) {
          /* display: flex; justify-content: center; align-items: center; are likely inherited */
      }
  
      /* Optional: Adjust heading size on smaller screens */
      #formulario #formulario-row > .col:first-child h1 {
          font-size: 1.8em;
      }
  
      /* Optional: Make iframe slightly wider on smaller screens if needed */
      #formulario iframe#JotFormIFrame-250983460062052 {
          /* You CANNOT reliably override inline min/max-width without !important */
          /* It's better to leave the inline style as is if Jotform relies on it */
          /* If you absolutely must: */
          /* min-width: 95% !important; */
          /* max-width: 95% !important; */
      }
  }
@media (min-width: 751px) and (max-width: 870px) {

  /* Ensure the image scales down to fit its column */
  #contribucion .col-sm-5 img {
    max-width: 100%; /* Crucial: Prevents image from exceeding column width */
    height: auto;    /* Maintain aspect ratio */
    display: inline-block; /* Helps with the text-align: center */
  }

  /* Optional: If text still feels cramped, add a little padding */
  /*
  #contribucion .col-sm-7 {
      padding-left: 10px;
      padding-right: 10px;
  }
  */
}

  
  @media (max-width: 750px) {
       body, html {
      margin: 0;
      padding: 0;
      max-width: 100%;    overflow-x: hidden;
  }
        #popup-zelle .mod {
    max-width: 90%;
    margin: 10% auto;
    padding: 100px 5px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    position: relative;
  }
      .mod h3 {
    font-size: 20px;
  }
     #pagar img {
    margin: 20px 0;
    display: block;
    margin: 20px auto;
    margin-top: 20px;
    margin-top: 20px;
    max-width: 50%;
  }
        #pagar .zel {
    margin-top: 20px;
    max-width: 50%;
  }
        #pagar .payp {
    max-width: 50%;
    margin-top: 0px;
  }
      #pagar {padding: 20px 0}
      #pagar .btn-primary {
          padding: 10px 20px!important;
      }
         #pagar li p {display: inline-block; width:55%; margin-left: 0px}
      #mision {
    margin-top: -70px; /* Pull the entire section up */
    /* Optional: Add transition for smoother movement if needed */
    /* transition: margin-top 0.3s ease; */
  }
      #misionicon{
      margin-top: 0px;
  }
      
      topnav {
          justify-content: space-between; /* Space out items */
          height: 90px; /* Slightly taller for bigger mobile elements */
          flex-wrap: nowrap;
          padding: 0 20px; /* Adjust padding */
          gap: 15px;       /* Adjust gap */
      }
  
      /* Reset orders for mobile layout - IMPORTANT */
      .topnav a,
      .topnav .navbar-brand,
      .topnav a.donar-btn,
      .topnav .hamburger-btn,
      .topnav .nav-links { /* Also reset order on the container */
          order: initial; /* Reset order property from large screens */
      }
  
      /* Apply specific mobile order */
      .topnav .navbar-brand {
          order: 1; /* Logo first */
          flex-shrink: 0;
          padding: 0; /* Ensure no extra padding */
      }
      .topnav .navbar-brand img {
           max-height: 65px; /* <<< INCREASED SIZE for mobile logo */
      }
  
      .topnav a.donar-btn {
          order: 2; /* Donate button second */
          position: static; /* Back in the flow */
          transform: none;
          margin: 0 auto; /* Center attempt */
          padding: 5px 15px !important;
          font-size: 12px !important;
          flex-shrink: 0;
      }
  
      .topnav .hamburger-btn {
          display: flex; /* Show hamburger */
          order: 3; /* Hamburger third */
          flex-direction: column;
          justify-content: space-around;
          width: 35px;  /* <<< INCREASED SIZE */
          height: 35px; /* <<< INCREASED SIZE */
          flex-shrink: 0;
          /* Styles for hamburger spans remain the same or adjust slightly */
      }
      .topnav .hamburger-btn span {
          display: block;
          width: 100%;
          height: 3.5px; /* Slightly thicker */
          background-color: #3e3e3e;
          border-radius: 3px;
          transition: all 0.3s ease-in-out;
      }
      /* Hamburger active state animation (adjust translateY if needed due to size change) */
      .topnav.active .hamburger-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); } /* Adjusted slightly */
      .topnav.active .hamburger-btn span:nth-child(2) { opacity: 0; }
      .topnav.active .hamburger-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Adjusted slightly */
  
  
      /* Nav links container for MOBILE dropdown */
      .topnav .nav-links {
          display: none; /* Override display:contents; Hide initially */
          position: absolute;
          top: 90px; /* Match the new topnav height */
          left: 0;
          width: 100%;
          background-color: #f9f9f9;
          flex-direction: column;
          align-items: center;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          z-index: 1000;
          border-top: 1px solid #eee;
          padding-bottom: 10px;
          /* No order needed when absolutely positioned */
      }
  
      /* Show standard links when .topnav has 'active' class */
      .topnav.active .nav-links {
          display: flex; /* Show as a flex column */
      }
  
      /* Style individual links in the mobile dropdown */
      .topnav .nav-links a {
          padding: 15px 16px;
          width: 100%;
          text-align: center;
          border-bottom: 1px solid #eee;
          order: initial; /* Ensure no lingering order */
      }
      .topnav .nav-links a:last-child {
          border-bottom: none;
      }
  topnav {
          justify-content: space-between; /* Space out items */
          height: 90px; /* Slightly taller for bigger mobile elements */
          flex-wrap: nowrap;
          padding: 0 20px; /* Adjust padding */
          gap: 15px;       /* Adjust gap */
      }
  
      /* Reset orders for mobile layout - IMPORTANT */
      .topnav a,
      .topnav .navbar-brand,
      .topnav a.donar-btn,
      .topnav .hamburger-btn,
      .topnav .nav-links { /* Also reset order on the container */
          order: initial; /* Reset order property from large screens */
      }
  
      /* Apply specific mobile order */
      .topnav .navbar-brand {
          order: 1; /* Logo first */
          flex-shrink: 0;
          padding: 0; /* Ensure no extra padding */
      }
      .topnav .navbar-brand img {
           max-height: 65px; /* <<< INCREASED SIZE for mobile logo */
      }
  
      .topnav a.donar-btn {
          order: 2; /* Donate button second */
          position: static; /* Back in the flow */
          transform: none;
          margin: 0 auto; /* Center attempt */
          padding: 5px 15px !important;
          font-size: 12px !important;
          flex-shrink: 0;
      }
  
      .topnav .hamburger-btn {
          display: flex; /* Show hamburger */
          order: 3; /* Hamburger third */
          flex-direction: column;
          justify-content: space-around;
          width: 35px;  /* <<< INCREASED SIZE */
          height: 35px; /* <<< INCREASED SIZE */
          flex-shrink: 0;
          /* Styles for hamburger spans remain the same or adjust slightly */
      }
      .topnav .hamburger-btn span {
          display: block;
          width: 100%;
          height: 3.5px; /* Slightly thicker */
          background-color: #3e3e3e;
          border-radius: 3px;
          transition: all 0.3s ease-in-out;
      }
      /* Hamburger active state animation (adjust translateY if needed due to size change) */
      .topnav.active .hamburger-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); } /* Adjusted slightly */
      .topnav.active .hamburger-btn span:nth-child(2) { opacity: 0; }
      .topnav.active .hamburger-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Adjusted slightly */
  
  
      /* Nav links container for MOBILE dropdown */
      .topnav .nav-links {
          display: none; /* Override display:contents; Hide initially */
          position: absolute;
          top: 90px; /* Match the new topnav height */
          left: 0;
          width: 100%;
          background-color: #f9f9f9;
          flex-direction: column;
          align-items: center;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          z-index: 1000;
          border-top: 1px solid #eee;
          padding-bottom: 10px;
          /* No order needed when absolutely positioned */
      }
  
      /* Show standard links when .topnav has 'active' class */
      .topnav.active .nav-links {
          display: flex; /* Show as a flex column */
      }
  
      /* Style individual links in the mobile dropdown */
      .topnav .nav-links a {
          padding: 15px 16px;
          width: 100%;
          text-align: center;
          border-bottom: 1px solid #eee;
          order: initial; /* Ensure no lingering order */
      }
      .topnav .nav-links a:last-child {
          border-bottom: none;
      }
  
      #servir .btn {
          display: block;
          width: 100%;
          max-width: 200px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 15px;
          margin-top: 0;
      }
  
      #servir h1 {
          font-size: 2.2em;
      }
  
       #brindamos-row .col {
      flex-basis: 100%;
      max-width: 100%;
  }
  
  #brindamos > h1 {
      font-size: 2em;
  }
  
  #brindamos-row .col h1 {
      font-size: 1.3em;
  }
  
      #contribucion-row .col-sm-5,
      #contribucion-row .col-sm-7 {
          flex-basis: 100%;
          max-width: 100%;
      }
  
  
      #contribucion-row .col-sm-5 {
          margin-bottom: 30px;
      }
  
       #contribucion-row .col-sm-7 {
          text-align: center;
  
       }
  
       #contribucion-row .col-sm-7 h1 {
          font-size: 1.em;
       }
  
  
  
  
      #contribucion-row .col-sm-7 .btn {
          display: block;
          width: 80%;
          max-width: 200px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 15px;
          margin-top: 0;
      }
  
      #contribucion h1{
          width: 100%;
      }
       #brindamos-row .col p br {
          display: contents;
      }
  
  
      #contribucion-row .col-sm-7 p br {
          display: contents;
      }
  
      #historia-row .col-sm-1 {
          display: none;
      }
  
  
      #historia-row .col-sm-6,
      #historia-row .col-sm-5 {
          flex-basis: 100%;
          max-width: 100%;
      }
  
  
      #historia-row .col-sm-5 {
          order: 1;
          margin-bottom: 20px;
           padding: 15px;
      }
  
      #historia-row .col-sm-6 {
          order: 2;
          text-align: center;
           padding: 15px;
      }
  
  
      #historia-text p br {
          display: contents;
      }
  
  
      #historia-text h1 {
          font-size: 1.8em;
      }
      #historia-text p {
          font-size: 0.95em;
      }
  
      .mission-vision-card {
          padding: 1rem 1.2rem;
          flex-direction: column;
          text-align: center;
          border-radius: 100px;
      }
  
      .mission-vision-card .mv-icon-wrapper {
          margin-right: 0;
          margin-bottom: 1rem;
      }
  
      .mv-icon {
          width: 65px;
          height: 65px;
           margin-left: auto;
           margin-right: auto;
      }
  
      .mv-title {
          font-size: 1.1em;
          margin-bottom: 0.4rem;
      }
  
      .mv-text {
          font-size: 0.70rem;
          line-height: 1.5;
      }
  
  
       #mision .col-md-6 {
          flex-basis: 100%;
          max-width: 100%;
  
          margin-bottom: 20px;
       }
        #mision .col-md-6:last-child {
            margin-bottom: 0;
        }
      #missionCarouselDesktop {
      display: none;
    }
    #missionCarouselMobile {
      display: block;
    }
   .footer-container {
          flex-direction: column-reverse; /* Stack vertically, logos first */
          justify-content: center;        /* Center items vertically in the container */
          align-items: center;            /* Center items horizontally */
          gap: 10px;                      /* Adjust vertical gap */
          padding-top: 10px;              /* Add some top padding */
          padding-bottom: 10px;           /* Add some bottom padding */
      }
  
      /* Optional: ensure full width for centering text/logos if needed */
       .footer-text,
       .footer-logos {
           width: 100%; /* Ensure they take full width to center correctly */
       }
  
      .footer-text {
          padding-top: 10px; /* Add a bit space above the text */
      }
  
      .topnav {
          /* Change layout: Use flex space-between */
          justify-content: space-between;
          height: 80px; /* Adjust height for mobile */
          flex-wrap: nowrap; /* Prevent wrapping on small screens */
          padding: 0 15px; /* Adjust padding */
          gap: 15px; /* Reduce gap */
      }
  
      /* Adjust Logo size and ensure it's on the left */
      .topnav .navbar-brand {
          order: 1; /* Explicitly first */
          flex-shrink: 0; /* Prevent shrinking */
      }
      .topnav .navbar-brand img {
           max-height: 50px; /* Smaller logo */
      }
  
      /* Position Donate button in the middle */
      .topnav a.donar-btn {
          order: 2; /* Explicitly second */
          position: static; /* Override absolute positioning */
          transform: none; /* Remove transformation */
          margin: 0 auto; /* This helps center it when space allows */
           /* If perfect centering needed despite other elements, might need more complex flex/grid */
           /* Or keep it slightly simpler: */
          padding: 5px 15px !important; /* Slightly smaller padding */
          font-size: 12px !important; /* Slightly smaller font */
          flex-shrink: 0; /* Prevent shrinking */
      }
  
      /* Show and style Hamburger button */
      .topnav .hamburger-btn {
          display: flex; /* Use flex to layout the spans */
          flex-direction: column;
          justify-content: space-around;
          width: 30px;
          height: 24px;
          order: 3; /* Explicitly third */
          flex-shrink: 0; /* Prevent shrinking */
      }
      .topnav .hamburger-btn span {
          display: block;
          width: 100%;
          height: 3px;
          background-color: #3e3e3e;
          border-radius: 3px;
          transition: all 0.3s ease-in-out;
      }
  
       /* Style Hamburger when active (Optional: Animation) */
       .topnav.active .hamburger-btn span:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
       }
       .topnav.active .hamburger-btn span:nth-child(2) {
          opacity: 0;
       }
       .topnav.active .hamburger-btn span:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
       }
  
  
      /* Hide standard links initially */
      .topnav .nav-links {
          display: none; /* Hide the container */
          /* When shown, make it a column */
          position: absolute;
          top: 80px; /* Position below the navbar */
          left: 0;
          width: 100%;
          background-color: #f9f9f9;
          flex-direction: column;
          align-items: center; /* Center links text */
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          z-index: 1000;
          border-top: 1px solid #eee;
          padding-bottom: 10px; /* Add some padding at the bottom */
      }
  
      /* Show standard links when .topnav has 'active' class */
      .topnav.active .nav-links {
          display: flex; /* Show as a flex column */
      }
  
      /* Style individual links in the mobile dropdown */
      .topnav .nav-links a {
          padding: 15px 16px; /* More vertical padding */
          width: 100%; /* Make links take full width */
          text-align: center; /* Center text */
          border-bottom: 1px solid #eee; /* Separator */
      }
      .topnav .nav-links a:last-child {
          border-bottom: none; /* No border for the last item */
      }
  
  }
  
  @media (max-width: 480px) {
      .fsocial {font-size: 22px}
      #pagar li p {display: inline-block; width:55%; margin-left: 0px}
       #pagar img {
  margin: 20px auto;max-width: 80%; display: block
}
      .ath {margin-top: 20px}
      #ATHMovil_Checkout_Button_payment div {
  width: 80% !important;
  margin: auto;
  text-align: center;
}
      #pagar {padding: 20px 0}
      #pagar .btn-primary {
          padding: 10px 20px!important;
      }
/*          #pagar li p {display: inline-block; width:57%; } */
     .servir-content h1 {
       margin-bottom: 15px;
    }
    .servir-content .btn { /* Target all buttons inside servir-content */
       font-size: 14px !important;
       /* Stack buttons */
       display: block;
       width: 100%;
       max-width: 200px; /* Max width for stacked buttons */
       margin: 0 auto 15px auto; /* Center stacked buttons */
    }
    .servir-content .btn-primary {
       padding: 5px 25px !important;
    }
    .servir-content .btn-secondary {
       padding: 5px 20px !important;
       margin-left: auto; /* Reset margin from inline-block state */
       /* margin-bottom: 0; /* Removed - Handled by :last-of-type below */
    }
    .servir-content .btn:last-of-type { /* More robust way to target last button */
       margin-bottom: 0;
    }

    /* --- Rule for Contact Details --- */
    #formulario .contact-details {
        margin-right: 0; /* Remove the large margin on small screens */
    }
    #formulario .contact-icon {
        /* Optional: Adjust icon margin slightly if needed */
        /* margin-right: 8px; */
    }
    /* --- End Rule for Contact Details --- */


    /* Further adjustments if needed for other sections at this small size */
    #contribucion .col-sm-7 h1 { font-size: 1.5em; } /* Smaller heading */
    .mv-text { font-size: 0.8rem; } /* Smaller text */


    /* --- NEW Rules for Smaller Images below 480px --- */
    #contribucion .col-sm-5 img{
        max-width: 50%;   /* Make image take up 85% of its column width */
                          /* Adjust 85% as needed (e.g., 80%, 90%) */
        height: auto;     /* Maintain aspect ratio */
        display: block;   /* Ensure it's a block element for centering */
        margin-left: auto; /* Center the image horizontally */
        margin-right: auto;/* Center the image horizontally */
    }
      
      #historia-row .col-sm-5 img{
          max-width: 55%;
      }

    /* Add some space below stacked elements */
    #contribucion .col-sm-5 {
        margin-bottom: 20px; /* Space below image before text */
    }
    #historia .col-sm-6 { /* Target text column as it comes first */
        margin-bottom: 20px; /* Space below text before image */
    }
    /* --- End NEW Rules for Smaller Images --- */

 } /* End of @media (max-width: 480px) */
  @media (max-width: 370px) {
          #popup-zelle .mod {
    max-width: 100%;
    margin: 10% auto;
    padding: 100px 10px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    position: relative;
  }
      .mod h3 {
    font-size: 18px;
  }
      .mod p {font-size: 15px}
  #pagar li p {display: inline-block; width:65%; margin-left: 0px}
}