.pl-55 {
  padding-left: 70px;
}

.pl-4 {
  padding-left: 20px !important;
}

.mt-50 {
  margin-top: 6rem !important;
}

.display-big {
  font-size: calc(3.625rem + 4.5vw);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.65px;
}

.umbrella-red {
  color: #ff0505;
}

.leather-yellow {
  color: #493c13;
}

@media (min-width: 1200px) {
  .display-big {
    font-size: 8rem;
    letter-spacing: -4px;
  }
}

.shadow-A {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.shadow-B {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.shadow-C {
  text-shadow:
    0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.navbar-trans .navbar-brand {
  color: #fff;
}

.navbar-trans .navbar-brand:hover,
.navbar-trans .navbar-brand:focus {
  color: #fff;
}

.navbar-trans .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-lexend);
}

.navbar-trans .navbar-nav .nav-link:hover,
.navbar-trans .navbar-nav .nav-link:focus {
  color: #fff;
}

.navbar-trans .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.4);
}

.navbar-trans .navbar-nav .show > .nav-link,
.navbar-trans .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-trans .navbar-toggler {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0);
}

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

.navbar-trans .navbar-text {
  color: rgba(255, 255, 255, 0.65);
}

.navbar-trans .navbar-text a,
.navbar-trans .navbar-text a:hover,
.navbar-trans .navbar-text a:focus {
  color: #fff;
}

.navbar-expand-sm.navbar-trans {
  background-color: transparent;
}

.navbar-expand-md.navbar-trans {
  background-color: transparent;
}

.navbar-expand-lg.navbar-trans {
  background-color: transparent;
}

.navbar-expand-xl.navbar-trans {
  background-color: transparent;
}

.navbar-expand.navbar-trans {
  background-color: transparent;
}

.navbar-trans {
  transition:
    background-color 0.1s ease-in-out,
    box-shadow 0.1s ease-in-out;
  background-color: transparent;
}

.navbar-trans .nav-item {
  border-color: rgba(255, 255, 255, 0.15);
}

.navbar-trans .nav-item:hover .nav-link:not(.disabled) {
  color: #fff;
}

.navbar-trans .nav-item.active .nav-link:not(.disabled) {
  color: #fff;
}

.navbar-trans .navbar-nav .dropdown-menu {
  border-left-color: rgba(255, 255, 255, 0.15);
}

.navbar-trans.navbar-stuck {
  background-color: transparent;
}

.greyscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.rotateimg180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotateimg90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bottom-70 {
  bottom: 70% !important;
}

.bg-trans-white {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Responsive Button Behaviors - No Visual Changes */
.btn {
  -webkit-tap-highlight-color: transparent; /* Remove iOS blue flash */
  touch-action: manipulation; /* Prevent double-tap zoom */
  will-change: transform; /* Optimize for touch interactions */
  transition: transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px); /* Subtle press feedback */
}

.btn:focus {
  outline: 2px solid #0066cc; /* Keyboard navigation */
  outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
  outline: none; /* Hide outline for mouse users */
}

/* Responsive layout behavior for button groups */
@media (max-width: 480px) {
  .d-md-flex {
    flex-direction: column; /* Stack buttons vertically on very small screens */
    flex-wrap: wrap; /* Allow wrapping if needed */
  }

  .me-3 {
    margin-right: 0 !important; /* Remove right margins when stacked */
    margin-bottom: 0.75rem; /* Add bottom margin instead */
  }

  .me-3:last-child {
    margin-bottom: 0; /* No margin on last button */
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .d-md-flex {
    flex-wrap: wrap; /* Allow wrapping on medium screens */
  }
}