.modal-close {
  height: 60px;
  padding: 10px;
  background-color: transparent;
}

.gsc-button {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  border: 2px solid transparent;
  margin-bottom: 20px;
  display: inline-block;
  clear: both;
  color: var(--clr-black) !important;
  cursor: pointer;
  font-family: var(--ff-primary), serif !important;
}

.gsc-button.medium {
  background: var(--clr-yellow);
  font-size: 14px;
  border-radius: 12px;
  padding: 6px 20px;
  border: 2px solid var(--clr-yellow) !important;
  font-weight: 600;
  min-width: 128px;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  line-height: 20px;
  min-height: 36px;
}

.gsc-button.cet-secondary {
  border-color: var(--clr-black);
  background: transparent;
}
.gsc-button.cet-secondary:hover {
  border-color: var(--clr-yellow);
  background-color: var(--clr-yellow);
}

.gsc-button.small:hover,
.gsc-button.medium:hover,
.gsc-button.large:hover {
  background-color: transparent;
  border-color: var(--clr-yellow);
}
.gsc-button.small.cet-secondary:hover,
.gsc-button.medium.cet-secondary:hover,
.gsc-button.large.cet-secondary:hover {
  background-color: var(--clr-yellow);
  border-color: var(--clr-yellow);
}

.modal-close a {
  display: inline-flex;
  padding: 2px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 128px;
  min-height: 36px;
  position: relative;
  left: -10px;
  text-decoration: none;
}

.modal-close a > span {
  color: var(--clr-white);
  font-size: 18px;
  text-decoration: none;
  position: relative; /* Add this to create positioning context for :after */
}

.modal-close a:hover > span {
  color: var(--clr-white);
  text-decoration: none;
}
.modal-close a:hover > span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background-color: var(--clr-white);
  transform: scaleX(1); /* Ensure consistent sizing */
  transition: transform 0.2s ease; /* Smooth transition */
}

.modal-close a:focus {
  color: var(--clr-white);
  text-decoration: none;
  border-radius: 12px;
  border: none;
  /* Create double border effect */
  box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 4px rgba(255, 255, 255, 0.5);
  outline: none;
}

.modal-close a:focus > span {
  text-decoration: none;
}

.gsc-button.medium:focus {
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 4px var(--clr-black);
  outline: none;
}
.gsc-button.medium.cet-secondary:focus {
  border-radius: 12px;
  border: 2px solid var(--clr-yellow) !important;
  box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 4px var(--clr-black);
  outline: none;
}

/*Animation*/

.bigger-container {
  position: relative; /* Context for absolute positioning */
  display: inline-block;
}

.bigger-one,
.bigger-two {
  display: inline-block; /* Needed for proper animation */
  text-shadow: none; /* Start with no halo */
  font-weight: normal; /* Ensure starting weight is normal */
  /* Make sure bold version doesn't affect layout initially */
  position: relative;
  visibility: visible; /* Base text is visible */
  transform-origin: left center; /* Scale from the left edge */
  opacity: 1;
}

.bigger-two-container {
  display: inline-block; /* Container for tilting */
  position: relative; /* Keep for potential future use, but underline is removed */
}

/* Styles for the initially hidden bold versions */
.bigger-bold {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700; /* Or "bold" */
  opacity: 0; /* Start invisible */
  visibility: hidden; /* Hide until animation starts */
}

.modal-backdrop .show {
  opacity: 0.8 !important;
}


.modal-theme-transition_assistance {
  .modal-dialog {
    min-width: 360px;
    height: 360px;
  }

  .modal-content {
    background: linear-gradient(to right, #000000, #37006e);
  }

  h1 {
    text-align: center;
    font-size: 3rem;
    line-height: 60px;
    color: var(--clr-white);
  }

  .modal-text {
    padding: 30px 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-text p {
    font-size: 26px;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
    line-height: 36px;
    color: var(--clr-white);
  }

  .modal-text a.gsc-button:hover {
    color: var(--clr-white) !important;
  }
  .gsc-button.medium:focus {
    border-radius: 12px;
    border: 2px solid var(--clr-yellow) !important;
    box-shadow: 0 0 0 2px var(--clr-white), 0 0 0 4px var(--clr-dark-gray);
    outline: none;
  }
}