:root {
  --border-radius-rounded: 0.7em;
  --border-radius-circle: 50%;
  --border-radius-pill: 999em;

  --primary-background-color: #f5d7c6;
  --secondary-color: #c02455;
  --darker-secondary-color: rgb(177, 21, 70);
  --standard-button-background-color: #ca75f5;

  --standard-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.45);
  --dimmed-color: rgba(0, 0, 0, 0.7);

  --z-index-max: 99;
}

/*/ Utility classes                                                                                              /*/

.section-title {
  text-align: center;
  font-size: clamp(3.5rem, 12vw, 5rem);
  padding: 1rem;
  font-family: "Pacifico", cursive;
  margin-top: clamp(5rem, 15vw, 14rem);
  color: var(--secondary-color);
}

.section-anchor {
  position: absolute;
  top: -40%;
}

.display-flex {
  display: flex;
}

.display-none {
  display: none;
}

.invisible {
  opacity: 0;
}

.uninteractable {
  pointer-events: none;
  user-select: none;
}

.rotate-180 {
  transition: rotate 400ms ease;
  rotate: 180deg;
}

.standard-button {
  border-radius: var(--border-radius-rounded);
  background-color: var(--standard-button-background-color);
  color: #fff;
}

.binary-state {
  position: relative;
}

.binary-state input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.binary-state.bs-button input:checked + button {
  color: var(--bs-color, #fff);
  background-color: var(--bs-background-color, #000);
}

.binary-state.bs-button-text input:checked + button::after {
  content: var(--bs-button-text-content);
  text-decoration: var(--bs-button-text-decoration);
}

.binary-state.bs-button-i input:checked + button > i:first-of-type {
  rotate: var(--bs-rotate, 270deg);
}

.binary-state.bs-div input:checked ~ div:first-of-type {
  display: var(--bs-display, block);
}

.greyed-out {
  filter: grayscale(1) contrast(0.6);
  pointer-events: none;
}

/*- Effects                                          */

.standard-button:active,
.onactive-scaleup-effect:active {
  scale: 1.04;
  transform-origin: center center;
}

.standard-button,
.onhover-darken-effect {
  position: relative;
}

.standard-button::before,
.onhover-darken-effect::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 130ms;
  border-radius: inherit;
}

.standard-button:hover::before,
.onhover-darken-effect:hover:before {
  opacity: 1;
  transition: opacity 130ms;
}

/*-                                                  */

@media (hover: hover) and (pointer: fine) {
  .regular-button:hover::before {
    opacity: 1;
  }

  a:hover {
    text-decoration: underline;
  }
}

/** CHANGING DEFAULTS                                                                                            */

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  font-family: "Bricolage Grotesque", sans-serif;
  background-color: var(--primary-background-color);
  scroll-behavior: smooth;
  height: 100%;
}

body.modal-opened {
  overflow-y: hidden;
}

button {
  /*. Display .*/

  /*. Position .*/

  /*. Box model .*/
  box-shadow: var(--standard-box-shadow);
  padding: 0;

  /*. Font .*/
  font-size: inherit;
  text-align: center;
  font-family: inherit;

  /*. Border .*/
  border: none;

  /*. Colors .*/
  background-color: #fff;

  /*. Interactivity .*/
  cursor: pointer;
  user-select: none;

  /*. Transitions & animations .*/
}

a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

p {
  margin: 0;
}

textarea {
  resize: none;
  font-family: inherit;
}

dialog {
  animation: popUp 300ms forwards;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.8);
  scrollbar-width: none;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-rounded);
}

dialog[closing] {
  animation: popDown 300ms forwards;
}

dialog::backdrop {
  opacity: 0;
  cursor: pointer;
}

@keyframes popUp {
  from {
    opacity: 0;
    transform: scale(0);
  }

  80% {
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popDown {
  from {
    opacity: 1;
    transform: scale(1);
  }

  20% {
    transform: scale(1.1);
  }

  to {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes scaleUp {
  from {
    scale: 1;
  }

  60% {
    scale: 1.2;
  }

  to {
    scale: 1;
  }
}

/** APP BAR                                                                                                      */

.app-bar {
  width: 100vw;
  position: fixed;
  height: clamp(4rem, 10vw, 4.3rem);
  z-index: 2;
  background-color: var(--secondary-color);
  box-sizing: border-box;
}

.app-bar .app-bar-wrapper {
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  display: flex;
  padding-inline: 1rem;
}

/*- Hamburger button and drop down menu                              */

.app-bar .hamburger-button {
  display: none;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  background-color: transparent;
  box-shadow: none;
  color: #fff;
}

.app-bar .hamburger-button::before {
  width: 2em;
  height: 2em;
  border-radius: var(--border-radius-circle);
}

.app-bar .hamburger-button:active {
  transform: none;
}

.app-bar .drop-down-menu {
  display: none;
  flex-direction: column;
  align-items: center;

  font-size: clamp(1.4rem, 2vw, 1.7rem);

  background-color: var(--secondary-color);
}

.app-bar .drop-down-menu.active {
  display: flex;
}

#_about_btn {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}

#_about_btn:hover {
  text-decoration: underline;
}

/*- Anchors                                                          */

.app-bar .drop-down-menu a {
  padding-bottom: 1rem;
}

@media (max-width: 546px) {
  .app-bar .hamburger-button {
    display: block;
  }

  .app-bar .removed-anchor {
    display: none;
  }

  .app-bar .app-bar-wrapper {
    justify-content: space-between;
  }
}

/** INCANTO                                                                                                      */

.incanto-section .img-container {
  display: flex;
  aspect-ratio: 6/3.5;
  margin-inline: auto;
  margin-top: clamp(5rem, 10vw, 10rem);
  background-image: url(my_assets/svg/Incanto.svg);
  background-size: cover;
  background-position: center;
  max-width: 80rem;
}

/** LOCATIONS                                                                                                    */

.locations-section {
  position: relative;
}

#_locations-anchor {
  top: -5%;
}

.locations-section .buttons {
  padding: clamp(1rem, 2vw, 1.5rem);
  padding-top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.locations-section .buttons button {
  width: 85vw;
  flex-grow: 1;
  aspect-ratio: 1.5;
  background-size: cover;
  display: flex;
  align-items: end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-rounded);
}

.locations-section .buttons button div {
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  top: 100%;
  background-color: var(--dimmed-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: top 200ms ease-in-out;
}

.locations-section .buttons button div.hovered {
  top: 0;
}

.locations-section .buttons button p {
  font-size: clamp(1.1rem, 4vw, 1.3rem);
  background-color: rgba(0, 0, 0, 0.65);
  display: inline;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: var(--border-radius-rounded);
  height: fit-content;
  margin-bottom: 0.2rem;
}

.locations-section #_baška {
  background-image: url(my_assets/locations/baška.jpg);
}

.locations-section #_punat {
  background-image: url(my_assets/locations/punat.jpg);
}

.locations-section #_krk {
  background-image: url(my_assets/locations/krk.jpg);
}

@media (max-width: 1000px) {
  .locations-section .buttons {
    flex-direction: column;
  }
}

/** GALLERY                                                                                                      */

.gallery-swiper {
  width: clamp(20rem, 95%, 90rem);
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  position: relative;
  z-index: 0;
  border-radius: var(--border-radius-rounded);
}

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  position: relative;
}

.gallery .swiper-pagination-bullet {
  padding: 0.2vw;
  border: 2px solid black;
}

.gallery .arrow {
  position: relative;
  width: clamp(1rem, 7vw, 4rem);
  border-radius: 50%;
  box-shadow: 0 0 2px 2px #00000051;
  background-color: #fff;
  aspect-ratio: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-size: clamp(0.5rem, 4vw, 2.5rem);
}

.gallery .left {
  left: 2vw;
}

.gallery .right {
  right: 2vw;
}

.gallery-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#_1 {
  background-image: url(my_assets/gallery/1.jpg);
}
#_2 {
  background-image: url(my_assets/gallery/2.jpg);
}
#_3 {
  background-image: url(my_assets/gallery/3.jpg);
}
#_4 {
  background-image: url(my_assets/gallery/4.jpg);
}
#_5 {
  background-image: url(my_assets/gallery/5.jpg);
}
#_6 {
  background-image: url(my_assets/gallery/6.jpg);
}
#_7 {
  background-image: url(my_assets/gallery/7.jpg);
}
#_8 {
  background-image: url(my_assets/gallery/8.jpg);
}
#_9 {
  background-image: url(my_assets/gallery/9.jpg);
}

@media (max-width: 764px) {
  .gallery .arrow {
    display: none;
  }

  .gallery-swiper {
    margin: 2vw;
  }
}

@media (max-width: 1000px) {
  .gallery-swiper {
    width: clamp(30rem, 60vw, 40rem);
    aspect-ratio: 9/12;
  }
}

/** PROGRAMS                                                                                                     */

.program-swiper {
  width: 96%;
  max-width: 30rem;
  margin: auto;
  height: fit-content;
  position: relative;
}

.program-section .card-swiper-container {
  padding: 1rem;
}

.program-card {
  background-color: #fff;
  border-radius: 2em;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.program-card-image {
  width: 100%;
  aspect-ratio: 16/7;
  background-size: cover;
  background-position: center;
}

.program-card button {
  width: clamp(6rem, 10vw, 6.5rem);
  aspect-ratio: 1.8;
  font-size: 1.3rem;
}

#_kpir-program-image {
  background-image: url(my_assets/programs/kpir.png);
}

#_ms-program-image {
  background-image: url(my_assets/programs/ms.jpg);
}

#_sijd-program-image {
  background-image: url(my_assets/programs/sijd.jpg);
}

#_sp-program-image {
  background-image: url(my_assets/programs/sp.png);
  background-position-y: 66%;
}

#_ptzs-program-image {
  background-image: url(my_assets/programs/ptzs.jpg);
}

#_dfyip-program-image {
  background-image: url(my_assets/programs/dfyip.jpg);
}

#_dic-program-image {
  background-image: url(my_assets/programs/dic.jpg);
  background-position-y: 20%;
}

.program-card .texts-container {
  padding: 1rem;
  height: clamp(23rem, 60vw, 24rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.program-card .title {
  font-size: clamp(2rem, 6vw, 2.3rem);
  text-align: center;
  font-weight: 600;
}

.program-card .description {
  text-align: center;
  font-size: clamp(1.2rem, 3vw, 1.33rem);
}

/** PROGRAM DETAILS                                                                                              */

.program-details {
  width: clamp(30rem, 100vw, 55rem);
  text-align: center;
  overflow-y: hidden;
}

.program-details .image-container {
  display: none;
  margin-bottom: 1rem;
  aspect-ratio: 16/6;
}

#_kpir-program-details-image {
  background-image: url(my_assets/programs/kpir.png);
  background-repeat: round;
}

#_ms-program-details-image {
  background-image: url(my_assets/programs/ms.jpg);
  background-size: cover;
  background-position-y: -60%;
  background-repeat: no-repeat;
}

#_sijd-program-details-image {
  background-image: url(my_assets/programs/sijd.jpg);
  background-size: cover;
  background-position-y: 45%;
}

#_sp-program-details-image {
  background-image: url(my_assets/programs/sp.png);
  background-size: cover;
  background-position-y: 65%;
}

#_ptzs-program-details-image {
  background-image: url(my_assets/programs/ptzs.jpg);
  background-size: cover;
  background-position-y: 42%;
}

#_dfyip-program-details-image {
  background-image: url(my_assets/programs/dfyip.jpg);
  background-size: cover;
  background-position-y: 40%;
}

#_dic-program-details-image {
  background-image: url(my_assets/programs/dic.jpg);
  background-size: cover;
  background-position-y: 20%;
}

.program-details .active-program-details-image {
  display: block;
}

.program-details .program-description-container {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  padding-block: 0.5em;
  padding-inline: 1.5em;
}

.program-details .program-description {
  position: relative;
}

.program-details .program-description div {
  position: absolute;
  height: 10%;
  width: 100%;
  transition: opacity 20ms ease-in;
}

.program-details .program-description .top-effect {
  top: 0;
  background: linear-gradient(#fff, transparent);
}

.program-details .program-description .bottom-effect {
  top: 100%;
  transform: translateY(-100%);
  background: linear-gradient(transparent, #fff);
}

.program-details span {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 600;
}

.program-details p {
  text-align: start;
  max-height: clamp(15em, 45vh, 30em);
  overflow: auto;
  scrollbar-width: none;
}

.program-details .buttons-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem;
}

.program-details .buttons-container button {
  width: clamp(5.5rem, 10vw, 6.5rem);
  aspect-ratio: 1.8;
  font-size: 1.2rem;
}

/*/ SCHEDULE                                                                                                     /*/

.schedule-section > div {
  display: flex;
  justify-content: space-around;
  font-size: clamp(1.3em, 5vw, 1.5rem);
  padding: 2em;
  padding-top: 0;
  flex-wrap: wrap;
  gap: 1em;
}

.schedule-section button {
  width: 10em;
  aspect-ratio: 3;
  white-space: nowrap;
}

.schedule-section .binary-state {
  --bs-button-text-content: "Preuzmi raspored?";
  --bs-button-text-decoration: underline;
}

.schedule-section button::after {
  content: attr(data-text);
  position: absolute;
  translate: -50% -50%;
}

/*/ APPLY MODAL                                                                                                 /*/

.apply-modal {
  width: 40rem;
  max-width: 95%;
  background-color: var(--primary-background-color);
}

/*- Pre form title                                                  */

.apply-modal .title-row {
  /*. Display .*/
  display: flex;
  justify-content: space-between;
  align-items: center;

  /*. Box model .*/
  padding-top: clamp(0.4em, 2vw, 0.8em);
  padding-inline: clamp(0.4em, 2vw, 0.8em);

  /*. Font .*/
  font-weight: 600;
}

.apply-modal .title-row button {
  /*. Display .*/
  display: flex;
  justify-content: center;
  align-items: center;

  /*. Box model .*/
  width: 1.3em;
  aspect-ratio: 1;
  box-shadow: none;

  /*. Font .*/
  font-size: 2rem;

  /*. Border .*/
  border-radius: 50%;

  /*. Colors .*/
  background-color: transparent;
}

.apply-modal .title-container {
  font-size: 2.4rem;
  position: relative;
}

.apply-modal .info-icon-container {
  /*. Variables .*/
  --arrow-size: 1em;

  /*. Display .*/
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;

  /*. Position .*/
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-index-max);

  /*. Box model .*/
  width: 1.25em;
  margin-inline: 0.2em;

  /*. Font .*/
  font-size: 1.1rem;

  /*. Border .*/
  border-radius: var(--border-radius-circle);

  /*. Colors .*/
  background-color: #fff;

  /*. Interaction .*/
  pointer-events: none;

  /*. Transitions & animations .*/
  transform-origin: center top;
  rotate: -180deg;
  transform: translateY(-50%);
  transition:
    opacity 300ms,
    rotate 400ms,
    left 400ms;
}

.apply-modal .info-icon-container.displayed {
  pointer-events: all;
  opacity: 1;
  rotate: 0deg;
  left: 100%;
  animation: scaleUp 550ms 400ms ease-out;
}

/*- Tooltip                                                          -*/

/*. Arrow .*/
.apply-modal .info-icon-container::before {
  /*. Display .*/
  content: "";
  scale: 0;

  /*. Position .*/
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);

  /*. Box model .*/
  border: var(--arrow-size) solid transparent;
  border-bottom-color: var(--standard-button-background-color);

  /*. Font .*/

  /*. Border .*/

  /*. Colors .*/

  /*. Transitions & animations .*/
  transform-origin: 0% 50%;
  transition: scale 200ms;
}

/*. Tooltip box .*/
.apply-modal .info-icon-container::after {
  /*. Display .*/
  content: attr(data-tooltipText);
  scale: 0;

  /*. Position .*/
  position: absolute;
  top: calc(120% + var(--arrow-size));
  left: -1000%;

  /*. Box model .*/
  width: max-content;
  max-width: 16em;
  padding: 0.5em;

  /*. Font .*/

  /*. Border .*/
  border-radius: var(--border-radius-rounded);

  /*. Colors .*/
  background-color: var(--standard-button-background-color);
  color: #fff;

  /*. Transitions & animations .*/
  transform-origin: 80% 0%;
  transition: scale 200ms;
}

.apply-modal .info-icon-container:hover::before,
.apply-modal .info-icon-container:hover::after {
  scale: 1;
}

.apply-modal .info-icon {
  /* filter: invert(9%) sepia(100%) saturate(6139%) hue-rotate(247deg) brightness(98%) contrast(147%); */
  /* filter: invert(21%) sepia(79%) saturate(2292%) hue-rotate(321deg) brightness(90%) contrast(95%); */
  filter: invert(65%) sepia(50%) saturate(4883%) hue-rotate(233deg)
    brightness(101%) contrast(92%);
}

/*- Pre form progress bar                                             */

.apply-modal .progress-bar-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: clamp(0.2rem, 3vw, 2rem);
  z-index: -1;
}

.apply-modal .progress-bar-container::before {
  content: "";
  position: absolute;
  height: 4px;
  width: 96%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(128, 128, 128, 0.735);
}

.apply-modal .progress-bar {
  position: absolute;
  height: 4px;
  width: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--darker-secondary-color);
}

.apply-modal .progress-bar-step {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  width: clamp(2.5rem, 6vw, 3rem);
  aspect-ratio: 1;

  font-size: clamp(1.6rem, 5vw, 1.8rem);

  border-radius: var(--border-radius-circle);
  border: 0.23rem solid rgba(128, 128, 128, 0.735);

  background-color: #fff;
}

.apply-modal .progress-bar-step.completed {
  background-color: var(--darker-secondary-color);
  color: #fff;
  border-color: var(--darker-secondary-color);
}

.apply-modal .progress-bar-step.active {
  border-color: var(--darker-secondary-color);
}

/* Specifically targeting this icon because it is the only one with the smallest default font-size. */
#_clipboard-questionmark-icon {
  font-size: clamp(1.7rem, 5vw, 2rem);
}

/*- Form and buttons                                                 */

.apply-modal form {
  --checkbox-button-transition: background-color 120ms ease-in-out,
    color 120ms ease-in-out;
  box-sizing: border-box;
  padding: clamp(0.8em, 3vw, 1.3em);
  text-align: start;
  padding-top: 0;
}

.apply-modal .form-step {
  display: none;
}

.apply-modal .form-step.active {
  display: block;
}

.apply-modal .buttons-container {
  display: flex;
  justify-content: space-between;
  margin-block: 3em 0.5em;
}

.apply-modal .buttons-container button {
  font-size: 1.3rem;
  width: clamp(5.5rem, 15vw, 6.2rem);
  aspect-ratio: 1.8;
}

/*- Input and labels                                                 */

.apply-modal .input-group {
  position: relative;
}

.apply-modal .input-field,
.apply-modal textarea {
  /*. Display .*/

  /*. Position .*/

  /*. Box model .*/
  box-sizing: border-box;
  box-shadow: var(--standard-box-shadow);
  width: 100%;
  padding-block: clamp(0.5rem, 3vw, 0.8rem);
  padding-inline: 1rem;

  /*. Font .*/
  font-size: 1.2rem;

  /*. Border .*/
  border: transparent solid 3px;
  border-radius: var(--border-radius-rounded);

  /*. Colors .*/

  /*. Transitions & animations .*/
}

.apply-modal input:focus {
  border: transparent solid 3px;
}

.apply-modal .input-field {
  border-radius: var(--border-radius-pill);
}

.apply-modal label {
  /*. Display .*/
  display: block;

  /*. Position .*/
  position: relative;
  top: 0;

  /*. Box model .*/
  margin-block: 2em 0.1em;

  /*. Font .*/
  font-weight: 600;
  font-size: 1.3rem;

  /*. Transitions and animations .*/
  transition: top 150ms ease-out;
}

.apply-modal .input-error-message {
  /*. Display .*/
  display: inline-block;
  opacity: 0;

  /*. Position .*/
  position: absolute;
  top: -0.5em;

  /*. Font .*/
  font-size: clamp(0.9rem, 4vw, 1.25rem);
  font-weight: 600;

  /*. Colors .*/
  color: red;

  /*. Transitions and animations .*/
  transition:
    top 150ms ease-out,
    opacity 80ms ease-out;
}

.apply-modal .input-error-message.displayed {
  top: 0;
  opacity: 1;
}

.apply-modal .input-error-message.displayed ~ label {
  top: -1.1em;
}

.apply-modal .input-error-message.displayed ~ input {
  border: red solid 3px;
}

/*- Form programs                                                    */

.apply-modal #_choose-programs {
  --bs-display: flex;
  --bs-rotate: 180deg;
  font-size: 1.3rem;
}

.apply-modal #_choose-programs > button {
  /*. Box model .*/
  width: 100%;
  padding-block: clamp(0.5rem, 3vw, 0.8rem);
  padding-inline: 1.1rem;

  /*. Border .*/
  border-radius: var(--border-radius-pill);

  /*. Colors .*/
  background-color: #fff;
}

.apply-modal #_choose-programs > button > i {
  position: absolute;
  top: 50%;
  left: 90%;
  transform: translateY(-50%);
  transform-origin: center top;
  transition: rotate 300ms ease;
}

.apply-modal .form-program-buttons {
  /*. Display .*/
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;

  /*. Box model .*/
  width: fit-content;
  padding-block: 1em;
  padding-inline: clamp(0.3em, 3vw, 0.7em);
  margin-inline: auto;
  margin-top: 0.5em;
  box-shadow: var(--standard-box-shadow);

  /*. Font .*/
  font-size: 0.9rem;

  /*. Border .*/
  border-radius: var(--border-radius-rounded);

  /*. Colors .*/
  background-color: #fff;
}

.apply-modal .form-program-buttons button {
  /*. Box model .*/
  width: 100%;
  padding: 0.8em;
  box-shadow: none;

  /*. Border .*/
  border-radius: 3rem;
  border: 0.1em solid #000000df;

  /*. Transitions & animations .*/
  transition:
    background-color 140ms,
    color 140ms;
}

/*- Form locations                                                   */

.apply-modal .form-location-buttons {
  display: flex;
  justify-content: space-between;
}

.apply-modal .form-location-buttons button {
  width: clamp(6rem, 15vw, 7.5rem);
  padding-block: clamp(0.5rem, 3vw, 0.8rem);
  border-radius: var(--border-radius-pill);
  font-size: 1.3rem;
  transition:
    background-color 140ms,
    color 140ms;
}

.apply-modal .form-program-buttons > div,
.apply-modal .form-location-buttons > div {
  --bs-color: #fff;
  --bs-background-color: limegreen;
}

/* ABOUT */
#_about_modal {
  width: 40rem;
  max-width: 95%;
  background-color: var(--primary-background-color);
}