:root {
/* rewrite */
  --bs-white: #FAF5F0;
  --bs-white-rgb: 250, 245, 240;
/* new colors */
  --bs-cozy-copper: #E34F2D;
    
  --bs-peoples-purple: #BD4B80;
  --bs-granted-green: #369C9C;
}

.bg-granted-green {
  background-color: var(--bs-granted-green);
}

.bg-cozy-copper {
  background-color: var(--bs-cozy-copper);
}

.text-granted-green {
  color: var(--bs-granted-green);
}

.text-cozy-copper {
  color: var(--bs-cozy-copper);
}

.font-source-serif-4 {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 400; /* pick a real weight like 400, 600, 700 */
  font-style: normal;
}

.navigation-title-selected {
  font-size: 25px;
}

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

.font-inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* pick a real weight like 400, 600, 700 */
  font-style: normal;
}

.fade-text {
  transition: opacity 0.05s ease-out;
  margin-bottom: 0 !important;
}

.logo-size {
  width: 272px;
  height: 43px;
}

.logo-size img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btn-apply {
  height: 39px;
  padding: 0 .5vw 0 .5vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.btn-apply:hover {
  background-color: #369C9C;
}
.apply-here-btn {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 137px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: white;
  color: var(--bs-granted-green); 
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, background-color 0.3s ease, color 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.apply-here-btn:hover {
  background-color: #e0f4f2;
}

.apply-here-btn.visible {
  opacity: 1;
  pointer-events: auto;
}


.header-spacing {
  padding-top: 50px;
  padding-bottom: 30px; 
}

.scroll-content {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (max-width: 767px) {
  /* Rimuovi il background rosso e aggiungi queste regole più specifiche */
  .scroll-content .row {
    align-items: flex-start !important;
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }
}

.scroll-content.visible {
  opacity: 1;
}