html, body {
  height: 100%;
  margin: 0;
  font-family: 'Glory', sans-serif;
  background-color: black;

}

.font-section{
	font-size: 1.5rem !important;
}

@media (max-width: 768px) {
.font-section{
	font-size: 1.1rem !important;
}
}


.section {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}


.primary{
	color:#2F7890;
}

.primary-dark{
	color: #101B2D;
}

.primary-light{
	color: #CBF2FF;
}
	
.secondary{
	color: #d6b26a;
}

.secondary-light{
	color: #FFE3A3;
}

.secondary-dark{
	color: #B66222;
}


.page-wrapper {
  background-color: #111;
  position: relative;
}

/* =======================
 NAVBAR
======================= */

.bg-dark-blue {
  background-color: #0f1f35;
}

.collapse-animate {
  overflow: hidden;
  transition:
    height 0.15s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.collapse-animate.show {
  opacity: 1;
  transform: translateY(0);
}

.collapse-animate:not(.show) {
  opacity: 0;
  transform: translateY(-20px);
}

.navbar {
  position: absolute;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 1%;
}

.navbar-toggler {
	background-color: rgba(16, 27, 45);
}

.navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(203, 242, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: rgba(203, 242, 255);
}

.navbar-nav .nav-link:hover {
  color: #f0c040;
}
.navbar-logo {
  height: 80px;  
  width: auto;    
  object-fit: contain;
}

.navbar-lang {
  height: 25px;  
  width: auto;    
  object-fit: contain;
}

.navbar-lang {
  width: 28px;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.lang-btn:not(.active) .navbar-lang {
  filter: grayscale(100%);
  opacity: 0.6;
}

.lang-btn:not(.active):hover .navbar-lang {
  filter: grayscale(0%);
  opacity: 1;
}

.lang-btn.active .navbar-lang {
  filter: none;
  opacity: 1;
}

/* =======================
 intro SECTION
======================= */
.intro-section {
  position: relative;
}

.intro-bg {
  position: absolute;
  inset: 0;
  height: 100vh;
  background: url("../img/bg-hero.png") center/cover no-repeat;
}
.intro-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 180px; 
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.95) 100%
  );
}

.intro-content {
  position: relative;
  min-height: 100vh;
  padding: 10rem 2rem 4rem;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.intro-overlay {
  width: 100%;

  display: flex;
  flex-direction: column;

  padding: 5rem 2rem 4rem;
  box-sizing: border-box;

	  background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.20) 35%,   
		rgba(0, 0, 0, 0.75) 65%,    
		rgba(0, 0, 0, 0.95) 85%,    
		rgba(0, 0, 0, 1) 100%    
	  );
  z-index: 1;
}
@media (max-width: 768px) {
	.intro-overlay.is-expanded {
	  background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.35) 35%,   
		rgba(0, 0, 0, 0.75) 65%,    
		rgba(0, 0, 0, 0.95) 85%,    
		rgba(0, 0, 0, 1) 100%    
	  );
	}
}


.hidden-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition:
    max-height 0.8s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}

.hidden-content.show {
  max-height: 2000px; /* alto seguro */
  opacity: 1;
  transform: translateY(0);
}

.intro-overlay > .container.section {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* =======================
 ABOUT SECTION
======================= */
.about-section {
  height: 100vh;
  background: url("../img/gothicArcs.jpg") center/cover no-repeat;
  position: relative;
}

.overlay.blue {
  background: rgba(15, 35, 60, 0.75);
  margin-left: 9%;
  margin-right: 9%;
}

.overlay.gold {
  margin: 5%;
}

@media (max-width: 1440px) {
	.overlay.blue {
	  background: rgba(15, 35, 60, 0.75);
	  margin-left: 1%;
	  margin-right: 1%;
	}
}

.about-text {
  max-width: 900px;
  margin: auto;
  font-size: 1rem;
  line-height: 1.8;
}

.about-title {
	color:rgba(182, 98, 34);
}

.subabout {
	margin: 3%;
	margin-bottom: 10%;
}

.subabout-title {
	color: #d6b26a;
}

.subabout-section {
	  background: radial-gradient(
      circle at top,
      #14243a 0%,
      #0b1626 60%
  );
  	padding: 2rem;
}

.container-donate{
	background: radial-gradient(
      circle at top,
      #14243a 0%,
      #0b1626 60%
    );
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 27%;
	position: relative;
	padding-bottom: 1%;
	min-height: 30vh;

}

.container-donate .donate-btn {
  position: absolute;
  bottom: -35%;  
  left: 50%;
  transform: translateX(-50%);
}


.process-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;   
  background-color: #fff; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.process-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;    
}

.item-text{
	  color: #d6b26a;
      text-align: center;
}

/* =======================
THANKS SECTION
======================= */

.thanks-title {
	color: black;
}

.thanks-section{
  background: url("../img/thanksBackground.jpg") center/cover no-repeat;
  position: relative;
}

.thanks-section .text-warning{
	color: #2f7890 !important;
}

.text-warning-br{
	color: #2f7890 !important;
}

.video-box {
  width: 90%;              
  aspect-ratio: 2 / 1;       
  background: black;
  overflow: hidden;
  border-radius: 12px;       
}

.video-box iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .video-box {
    width: 90%;
  }
}


.margin-video {
  margin-left: 15%;
  margin-right: 15%;
}

@media (max-width: 1440px) {
	.margin-video {
	  margin-left: 10%;
	  margin-right: 10%;
	}
}

@media (max-width: 576px) {
	.margin-video {
	  margin-left: 1%;
	  margin-right: 1%;
	}
}




/* =======================
COMMENTS SECTION
======================= */

.comments-section {
  height: 150vh;
  background: url("../img/fabricBackground.jpg") center/cover no-repeat;
  position: relative;
}
.comments-title {
	color: #d6b26a;
}

.comments-section .overlay {
	background: rgba(0, 0, 0, 0.4);
}

.comments-card {
  background: #ece9ff;
  border-radius: 4px;
  padding: 1rem;
  max-width: 800px;
  min-height: 400px;
  margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.placeholder img {
  width: 64px;
  opacity: 0.8;
}


/* =======================
 FUNDRAISING SECTION
======================= */
.fundraising-section {
  position: relative; 
  overflow-y: auto;
}

.fundraising-section .text-warning{
	color: #2f7890 !important;
}

.fundraising-section .navbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

@media (max-width: 768px) {
  .fundraising-right {
	background: url("../img/henry-movil.PNG") center / cover no-repeat !important;
	  min-height: 150vh !important;

  }
  
  .fundraising-left {
	  min-height: 120vh !important;
	}
	
	.about-section {
		height: 150vh !important;
	}
}

.fundraising-right {
  background: url("../img/henry.PNG") center / cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}


.fundraising-left {
  background: url("../img/pirkstein.PNG") center / cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.fundraising-left .content {
  position: relative;
  z-index: 2;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.8;
}

.subtitle a{
	color: #CBF2FF;
}

/* =======================
 QUOTES SECTION
======================= */

.quote-section {
  position: relative;
  background: radial-gradient(
    circle at top,
    #14243a 0%,
    #0b1626 60%
  );
  color: #d9f2ff;
  text-align: center;
  padding: 4rem 2rem;
}

.quote-hero {
  min-height: 40vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote-content.active {
  display: block;
  opacity: 1;
}

.quote-content.slide-in-right {
  animation: slideInRight 0.4s ease;
}

.quote-content.slide-in-left {
  animation: slideInLeft 0.4s ease;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.quote-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: pre-line;
}

.quote-content blockquote {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 2rem;
}

.quote-author strong {
  display: block;
  font-size: 1.1rem;
  color: #e6f6ff;
}

.quote-author span {
  font-size: 0.95rem;
  color: #5fb3c4;
}


.quote-nav {
  position: absolute;
  top: 9rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 3rem;
  color: #f0c66b;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 768px) {
	.quote-content {
		padding-left: 6%;
		padding-right: 6%;
	}
	.more-quotes-h{
		height: 80em!important;
	}

}

@media (max-width: 1399px) and (min-width: 992px){
	.more-quotes-h{
		height: 40em !important;
	}

}
@media (max-width: 991px) and (min-width: 769px) {
	.more-quotes-h{
		height: 60em !important;
	}

}

#more-quotes-container {
	overflow-y: auto;
}
.quote-nav.left {
  left: 1rem;
}

.quote-nav.right {
  right: 1rem;
}

.quote-nav:hover {
  opacity: 0.8;
  transform: translateY(-50%) scale(1.1);
}

.more-quotes-section {
  margin-top: 4rem;
  overflow: hidden;

  max-height: 0;
  opacity: 0;
  transform: translateY(20px);

  transition:
    max-height 0.7s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}

.more-quotes-section.show {
  max-height: 5000px;
  opacity: 1;
  transform: translateY(0);
}

.more-quotes-h{
	height: 35em;
}

.quote-card {
  border: 1px solid #d4af37;
  padding: 25px;
  color: #fff;
  background: transparent;
  white-space: pre-line;
}



#quotes-container {
  display: block;
}


.quote-card {
  border: 1px solid #d4af37;
  padding: 25px;
  color: #fff;
  background: transparent;
}

.quote-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
}

.quote-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #d1d5db;
}

.dots{
  padding: 8px 10px;
  color: #ccc;
  font-weight: bold;
}

.quotes-pagination {
  margin-top: 2% !important;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.quotes-pagination button {
  background: #e5f4ff;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
}

.quotes-pagination button.active {
  background: #2b7a9a;
  color: #fff;
}

.quotes-pagination button:hover {
  background: #bde7ff;
}

#quotes-pagination {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#quotes-pagination > .page-item {
  display: list-item; 
}

#quotes-pagination .page-link {
  border: 1px solid #dee2e6;
  background-color: transparent;
}

#quotes-pagination .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

#quotes-pagination .page-item.disabled .page-link {
  pointer-events: none;
  color: #6c757d;
}

.quotes-pagination-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:2%;
}

.quotes-page-select{
  padding:6px 10px;
  border-radius:4px;
  border:1px solid #ccc;
  background:#e5f4ff;
  cursor:pointer;
}

/* =======================
 BUTTONS
======================= */
.btn-gold {
  background: #d6b26a;
  color: #0d223a;
  border-radius: 999px;
  padding: 0.6rem 2rem;
  font-weight: 600;
  border: none;
}

.btn-gold:hover {
  background: #c6a158;
}

.btn-blue {
  background: #2c6f8e;
  border-radius: 999px;
  padding: 0.6rem 2rem;
  font-weight: 600;
  border: none;
}

.btn-blue:hover {
  background: #255e78;
}

.btn-gold:focus,
.btn-gold:active,
.btn-gold:focus:active {
  background: #d6b26a;
  color: #0d223a;
  border: none;
  box-shadow: none;
}


.btn-blue:focus,
.btn-blue:active,
.btn-blue:focus:active {
  background: #2c6f8e;
  border-radius: 999px;
  padding: 0.6rem 2rem;
  font-weight: 600;
  border: none;
}
/* =======================
 FOOTER
======================= */
.footer-section {
  background: url("../img/gothicArcs.jpg") center/cover no-repeat;
  position: relative;
}

.footer-section .overlay {
  background: rgba(0,0,0,0.75);
}

.footer-section .label {
  font-size: 0.85rem;
  opacity: 0.7;
}

.socials{
  display:flex;
  gap:10px;
}

.socials a{
  width:40px;
  height:40px;
  background:#e6edf3;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  transition:background 0.2s ease;
}

.socials a:hover{
  background:#cfd8df;
}

.socials img{
  width:20px;
  height:20px;
}


#scrollTopBtn{
  position:fixed;
  bottom:25px;
  right:25px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  pointer-events:none;

  transition:opacity .3s ease, transform .2s ease;
}

#scrollTopBtn.show{
  opacity:1;
  pointer-events:auto;
}

#scrollTopBtn:hover{
  transform:scale(1.1);
  background:rgba(0,0,0,0.65);
}