@import url(./fonts.css);

:root {
  --background-primary: #111111;
  --background-secondary: #000000;
  --text-color: #eaeaea;
  --accent-color: #ffae3b;
  --accent-secondary: #e64a19;
  --font: "Montserrat";
}
/*? === GLOBAL SETTINGS === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font);
  ::-webkit-scrollbar {
    width: 12px;
  }
  ::-webkit-scrollbar-track {
    background: var(--background-primary);
    cursor: pointer;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    cursor: pointer;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
  }
}

body {
  background-color: #111111e0;
  height: 100%;
  position: relative;
  visibility: hidden;
}
html.wf-active body {
  visibility: visible;
}
hr {
  width: 5px;
  height: 5px;
  background-color: var(--accent-secondary);
  color: var(--accent-secondary);
  border: none;
  border-radius: 50%;
}

.header-text {
  color: var(--text-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-text h2 {
  margin-bottom: clamp(10px, 1vw, 1rem);
  font-size: clamp(18px, 2vw, 30px);
}
.header-text p {
  font-size: clamp(14px, 2vw, 20px);
}

.btn-01 {
  color: var(--background-primary);
  text-decoration: none;
  display: block;
  padding: 10px;
  background-color: var(--accent-color);
  width: 200px;
  border-radius: 5px;
  margin: 50px 0 0 0;
  transition: all 0.3s ease-in-out;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 0 10px 0 var(--accent-color);
}
.btn-01:hover {
  background-color: #db8f00;
  box-shadow: 0 0 15px 1px var(--accent-secondary);
  cursor: pointer;
}

.date-contact {
  position: fixed;
  right: 0;
  right: 25px;
  bottom: 80px;
  z-index: 999;
  background-color: var(--background-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 3px solid var(--background-primary);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.date-contact svg {
  margin: 0px 0 -3px 0;
  fill: var(--accent-color);
  width: 60px;
  height: 50px;
  border: 1px solid var(--accent-color);
  border-radius: 8px;
}

.date-contact a {
  text-decoration: none;
  color: var(--background-primary);
}

.date-contact:hover {
  transition: all 0.3s ease;
  box-shadow: 0 0 10px -1px var(--accent-color);
}

.scroll-up {
  background-color: var(--background-primary);
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 40px;
  height: 40px;
  z-index: 99;
  fill: var(--accent-color);
  border: 2px solid var(--accent-color);
  border-radius: 10px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}

.show {
  opacity: 1;
  visibility: visible;
}

.scroll-up svg {
  margin-top: 2px;
  width: 40px;
  height: 40px;
  fill: var(--accent-color);
}
.scroll-up:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 0 5px -1px var(--accent-secondary);
}

/*? === NAVIGATION === */
/*? DESKTOP NAVIGATION */
.desktop-nav {
  width: 100%;
  background-color: #111111;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  letter-spacing: 2px;
  position: absolute;
  top: 0;
  z-index: 99;
  height: 60px;
  text-transform: uppercase;
  color: var(--accent-color);
  font-size: clamp(18px, 1vw, 20px);
}
.desktop-nav div {
  position: absolute;
  left: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, 2vw, 18px);
}

.desktop-nav img {
  width: 60px;
  height: 60px;
  mix-blend-mode: screen;
}

.desktop-nav ul {
  margin-right: 2vw;
  display: flex;
  column-gap: 2vw;
  list-style: none;
  transition: all 0.3s ease;
}

.desktop-nav ul:hover > :not(:hover) {
  filter: blur(1px);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.desktop-nav ul a {
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.desktop-nav ul a:hover {
  color: #e64a19;
}

/*? MOBILE NAVIGATION */

.mobile-nav {
  width: 100%;
  background-color: #111111;
  display: none;
  justify-content: flex-end;
  align-items: center;
  letter-spacing: 2px;
  position: absolute;
  z-index: 99;
  height: 60px;
  text-transform: uppercase;
  color: var(--accent-color);
  font-size: clamp(18px, 1vw, 20px);
}
.mobile-nav div {
  position: absolute;
  left: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(15px, 2vw, 18px);
}

.mobile-nav img {
  width: 60px;
  height: 60px;
  mix-blend-mode: screen;
}

.mobile-nav .menue-btn {
  font-size: 1.5rem;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translate(-50%, -50%);
  padding: 0.1rem 0.5rem 0.3rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px double var(--text-color);
  border-radius: 5px;
  transition: all 0.3s ease;
  background-color: var(--background-primary);
}

.menue-btn:hover {
  cursor: pointer;
  box-shadow: 0 0 10px -3px var(--text-color);
}

.menue-list {
  position: fixed;
  right: -100%;
  top: 60px;
  height: 100vh;
  padding: 5px 20px 0 10px;
  background-color: var(--background-primary);
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 3vw;

  transition: all 0.5s ease;
}

.menue-list-visible {
  animation: visible 1s forwards;
}

@keyframes visible {
  0% {
    right: -100%;
  }
  100% {
    right: 0;
  }
}

.menue-list span {
  padding: 5px;
  width: 20px;
  height: 20px;
}

.mobile-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  text-decoration: none;
  letter-spacing: 1px;
  color: var(--secondary-text-color);
  font-size: 1rem;
  transition: all 0.5s ease;
  padding: 3px 0;
}
.mobile-nav a:hover {
  color: var(--accent-secondary);
  text-decoration-line: underline;
}

@media screen and (max-width: 1023px) {
  .mobile-nav {
    display: flex;
  }
  .desktop-nav {
    display: none;
  }
}

/*? === FOOTER === */

.footer {
  height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  background-color: #111111;
  padding: 0 0 20px 0;
}

.footer img {
  position: absolute;
  left: 1%;
  top: 8%;
  height: clamp(100px, 15vw, 150px);
  width: clamp(100px, 15vw, 150px);
  mix-blend-mode: screen;
}

.footer .links {
  display: flex;
  list-style: none;
  column-gap: 20px;
  margin-bottom: 10px;
  mix-blend-mode: none;
  position: relative;
}

.footer .links a {
  color: var(--text-color);
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: clamp(16px, 2vw, 18px);
}
.footer .links a:hover {
  color: #e64a19;
}

/*! ~~~ INDEX SITE ~~~ */
/*? === HERO SECTION === */

.hero-section {
  background-color: var(--background-secondary);
  position: relative;
  width: 100%;
  height: 100svh;
  transition: all 0.5s ease;
}

.img-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--background-secondary);
  overflow: hidden;
}

.img-slider .slide {
  z-index: 1;
  position: absolute;
  width: 100%;
  /* clip-path: inset(0 100% 0 0); */
  clip-path: circle(0% at 0 50%);
  background-color: #111111a9;
  box-shadow: 0 0 20px 25px var(--background-primary) inset;
}

.img-slider .slide.active {
  /* clip-path: inset(0 0 0 0); */
  clip-path: circle(150% at 0 50%);
  transition: clip-path 2s ease;
}

.img-slider .slide img {
  z-index: 1;
  width: 100%;
  height: 100vh;
  border-radius: 5px;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.img-slider .slide:nth-child(3) img {
  transform: scaleX(-1);
}

.img-slider .slide .info {
  position: absolute;
  left: 1vw;
  bottom: 100px;
  padding: 15px 30px;
}
.img-slider .slide:nth-child(1) .info {
  position: absolute;
  top: 200px;
  padding: 15px 30px;
}
.img-slider .slide:nth-child(3) .info {
  position: absolute;
  bottom: 150px;
  padding: 15px 30px;
}
.img-slider .slide:nth-child(5) .info {
  position: absolute;
  top: 100px;
  padding: 15px 30px;
}

.img-slider .slide .info h2 {
  color: var(--text-color);
  font-size: clamp(32px, 4vw, 45px);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 2px;
}

.img-slider .slide .info p {
  color: var(--text-color);
  background-color: rgba(0, 0, 0, 0.1);
  font-size: clamp(18px, 3vw, 28px);
  width: 80%;
  padding: 10px 10px;
  margin: 30px 0;
  border-radius: 4px;
}

.img-slider .navigation {
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.img-slider .navigation .btn {
  background-color: rgba(255, 255, 255, 0.5);
  width: 15px;
  height: 15px;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.img-slider .navigation .btn.active {
  width: 40px;
  border-radius: 10px;
  transition: all 1.5s;
  background: #ffa500;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-device-width: 767px) and (orientation: landscape) {
  .img-slider .slide .info h2 {
    font-size: clamp(22px, 3vw, 45px);
  }

  .img-slider .slide .info p {
    font-size: clamp(18px, 2vw, 28px);
    padding: 5px 10px;
  }
  .img-slider .slide:nth-child(1) .info,
  .img-slider .slide:nth-child(2) .info,
  .img-slider .slide:nth-child(3) .info,
  .img-slider .slide:nth-child(4) .info,
  .img-slider .slide:nth-child(5) .info {
    top: 60px;
  }
}

/*? === OPENING SCROLLER === */

.opening-scroller {
  width: 100%;
  height: 30px;
  color: var(--accent-secondary);
  background-color: var(--background-secondary);
  box-shadow: 0 0 10px 1px var(--background-secondary) inset;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0 2rem 0;
  position: relative;
  z-index: 11;
}

.animated-opening ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  padding: 0;
}

.open_scroller {
  margin-left: 2.5%;
  margin-right: 2.5%;
}

.open_scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.open_scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.open_scroller[data-animated="true"] .open_scroller__inner {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  flex-wrap: nowrap;
  -webkit-animation: openingScroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
  animation: openingScroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.open_scroller[data-direction="left"] {
  --_animation-direction: forwards;
}
.open_scroller[data-speed="slow"] {
  --_animation-duration: 90s;
}

@-webkit-keyframes openingScroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
@keyframes openingScroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* ? === TRAININGS SECTION === */

.trainings {
  position: relative;
  background-color: var(--background-secondary);
  overflow: hidden;
}

.animated-cards ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  padding: 0;
}

.trainings-head {
  position: absolute;
  z-index: 10;
  top: 0;
  right: -25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  height: clamp(200px, 15vw, 250px);
  width: 150%;
  border-bottom: 5px solid #0000002a;
  border-radius: 0 0 66% 66%;
}
.trainings-head header,
.trainings-foot header {
  padding: 0 20%;
}

.trainings-foot {
  position: absolute;
  z-index: 10;
  bottom: 0;
  right: -25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  height: clamp(200px, 15vw, 250px);
  width: 150%;
  border-top: 5px solid #0000002b;
  border-radius: 66% 66% 0 0;
}

.rotate {
  background: linear-gradient(#111111, #111111) padding-box,
    linear-gradient(var(--angle), #e64a19, #ffae3b, #111111, #111111) border-box;
  animation: 15s rotate linear infinite;
}
.rotate-reverse {
  background: linear-gradient(#000, #111111) padding-box,
    linear-gradient(var(--angle), #111111, #111111, #ffae3b, #e64a19) border-box;
  animation: 15s rotate linear infinite reverse;
}
@keyframes rotate {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@media screen and (max-width: 1023px) {
  .trainings-head {
    border-radius: 0 0 50% 50%;
    width: 150%;
    right: -25%;
  }
  .trainings-foot {
    border-radius: 50% 50% 0 0;
    width: 150%;
    right: -25%;
  }
}

.cards {
  height: clamp(800px, 55vw, 911px);
  background-color: #111111e5;
  outline: 6px ridge #ffae3b;
  margin-left: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 280px;
  height: clamp(300px, 44%, 360px);
  border-radius: 10px;
  color: var(--text-color);
  border: 2px solid var(--text-color);
  box-shadow: 0 0 10px 10px #111111;
}

.card-content > h1 {
  font-size: 1.9rem;
  text-align: center;
  text-decoration: underline;
  border-radius: 5px;
  letter-spacing: 4px;
}

.card-content > img {
  width: 100%;
  filter: drop-shadow(0 0 10px 5px #000);
  object-fit: cover;
}
.card-content > p {
  border-radius: 5px;
  text-align: center;
  height: 70px;
  font-size: 0.8rem;
  margin: 0;
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}
.scroller {
  margin-left: 2.5%;
  margin-right: 2.5%;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller[data-animated="true"] .scroller__inner {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  flex-wrap: nowrap;
  -webkit-animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
  animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}
.scroller[data-speed="slow"] {
  --_animation-duration: 90s;
}

@-webkit-keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/*? === VIDEO SECTION === */

.video-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(17, 17, 17);
  background: -moz-linear-gradient(180deg, rgba(17, 17, 17, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(17, 17, 17, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(180deg, rgba(17, 17, 17, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#111111",endColorstr="#000000",GradientType=1);
  padding: 2% 0 5% 0;
}

.video-section video {
  width: 75%;
  border: 3px solid var(--accent-color);
  border-radius: 10px;
  box-shadow: 0 0 20px 10px var(--background-secondary);
  margin: 0;
}

@media screen and (max-width: 1023px) {
  .video-section video {
    width: 95%;
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    margin: 2rem;
    box-shadow: 0 0 20px 10px var(--background-secondary);
  }
}

/*? === PRICES SECTION ===  */
.prices-section {
  position: relative;
  padding: 5% 0 5% 0;
  background: rgb(17, 17, 17);
  background: -moz-linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#111111",endColorstr="#000000",GradientType=1);
  overflow: hidden;
}

.prices-section > .header-text > p:nth-child(1n + 3) {
  color: var(--accent-color);
  font-weight: 500;
  text-decoration: underline;
  margin: 3px;
}
.price-cards-ctn {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  width: 100%;
  padding: 5% 0%;
}

.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 40px;
  border-radius: 12px;
  color: #fff;
  overflow: hidden;
  position: relative;
  background: linear-gradient(#111111, #000) padding-box;
}
.price-card ul {
  transform: translateZ(20px);
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 10px 5%;
  margin-top: 20px;
}

.price-card li {
  font-size: 16px;
}

.price-head {
  text-align: center;
  margin-bottom: 20px;
}

.price-head > h3 {
  font-weight: 600;
  color: var(--accent-color);
}

.price-head > h3 > span {
  position: relative;
  font-weight: 400;
  font-size: 12px;
  top: -5px;
}

.price-card:nth-child(2) h1 {
  color: var(--accent-color);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(1);
  font-size: 30px;
  animation: pulse 2s ease;
  filter: drop-shadow(0 0 3px #e64a19);
}

.price-head > h1 > span {
  margin-right: 10px;
}

.price-head h2 {
  text-align: center;
  text-decoration: underline;
  margin-bottom: 20px;
}

.card-middle {
  height: 100%;
  width: clamp(320px, 25vw, 400px);
  border: 3px solid #ffad3b1c;
  background: linear-gradient(#111111, #000) padding-box,
    linear-gradient(var(--angle), #111111, #111111, #ffae3b, #ffae3b) border-box;
  animation: 15s rotate linear infinite;
  margin: 0 5vw;
  box-shadow: -10px -10px 15px -17px #ffae3b inset, 10px 10px 15px -17px #ffae3b inset;
}

.card-left {
  height: 85%;
  width: clamp(250px, 25vw, 350px);
  transform: perspective(800px) rotateY(-10deg);
  transform-origin: left right;
  transform-style: preserve-3d;
  box-shadow: -10px -10px 15px -17px #ffae3b inset, 10px 10px 15px -10px #000 inset;
}

.card-right {
  height: 85%;
  width: clamp(250px, 25vw, 350px);
  transform: perspective(800px) rotateY(10deg);
  transform-origin: right left;
  transform-style: preserve-3d;
  box-shadow: -10px 10px 15px -10px #000 inset, 10px -10px 15px -17px #ffae3b inset;
  margin: 0 1vw;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@media screen and (max-width: 1023px) {
  .prices-section {
    padding: 5% 0 20% 0;
  }
  .price-cards-ctn {
    flex-wrap: wrap;
    row-gap: 50px;
    height: 100%;
  }

  .prices-section .price-card {
    height: clamp(650px, 5vw, 690px);
    width: clamp(320px, 40vw, 400px);
  }
  .prices-section .price-cards-ctn:nth-of-type(2) {
    order: 1;
  }
  .card-left {
    order: 2;
    transform: perspective(0px) rotateY(0deg);
    box-shadow: -10px -10px 15px -17px #ffae3b inset, 10px 10px 15px -17px #ffae3b inset;
  }
  .card-right {
    order: 3;
    transform: perspective(0px) rotateY(0deg);
    box-shadow: -10px -10px 15px -17px #ffae3b inset, 10px 10px 15px -17px #ffae3b inset;
  }
  .card-right.price-head,
  .card-left.price-head {
    margin-top: -20px;
  }
}

@media screen and (max-width: 767px) {
  .price-cards-ctn {
    flex-direction: column;
  }
}

/*! ~~~ PRICES SITE ~~~ */
/*? === PRICES === */

.prices-main-content {
  padding: 100px 2vw 1vw 2vw;
  position: relative;
  background-image: linear-gradient(
    to bottom,
    #000000,
    #000000,
    #000000,
    #000000,
    #000000,
    #020202,
    #030303,
    #050505,
    #080808,
    #0c0c0c,
    #0f0f0f,
    #111111
  );
}

.prices-main-content > .header-text > h1 {
  color: var(--accent-color);
  text-decoration: underline;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.prices-main-content .price-cards-ctn {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  padding: 0;
}

.prices-main-content .btn-01 {
  margin: 0 0 50px 0;
  padding: 5px 20px;
  text-align: center;
  box-shadow: 0 0 10px 1px var(--accent-color);
}
.prices-main-content .btn-01:hover {
  background-color: #db8f00;
  box-shadow: 0 0 15px 1px var(--accent-secondary);
}
.prices-main-content > .price-cards-ctn .card-middle ul {
  margin: 60px 0 0 0;
  padding: 30px 0;
}

.prices-adult,
.prices-students {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.prices-adult .price-card,
.prices-students .price-card {
  height: 600px;
  width: 400px;
  margin: clamp(1rem, 3vw, 100px);
  box-shadow: 0 0 10px -5px var(--accent-color) inset;
  pointer-events: none;
}

@media screen and (max-width: 1023px) {
  .prices-adult .price-cards-ctn .price-card:nth-child(2),
  .prices-students .price-cards-ctn .price-card:nth-child(2) {
    order: 1;
  }
  .prices-adult .price-cards-ctn .price-card:nth-child(1),
  .prices-students .price-cards-ctn .price-card:nth-child(1) {
    order: 2;
  }
  .prices-adult .price-cards-ctn .price-card:nth-child(3),
  .prices-students .price-cards-ctn .price-card:nth-child(3) {
    order: 3;
  }
  .prices-students .price-cards-ctn .price-card:nth-child(4) {
    order: 4;
  }
  .prices-adult .price-card,
  .prices-students .price-card {
    height: 620px;
    width: clamp(320px, 40vw, 400px);
    margin: clamp(1rem, 0.2vw, 100px);
    box-shadow: 0 0 10px -5px var(--accent-color) inset;
    pointer-events: none;
  }
}

/*! ~~~ LOCATION SITE ~~~ */
/*? LOCATION & APPROACH */

.location {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background-primary);
  padding-top: 100px;
  color: var(--text-color);
  letter-spacing: 1px;
}

.location-header {
  text-align: center;
  color: var(--text-color);
  text-transform: uppercase;
  margin-bottom: 30px;

  h1 {
    text-decoration: underline;
    font-size: clamp(24px, 4vw, 40px);
    letter-spacing: 2px;
    color: var(--accent-color);
  }
  p {
    font-size: clamp(16px, 2vw, 20px);
    padding: 10px 10px 0 10px;
  }
}

.location-01,
.location-02 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  h2 {
    color: var(--accent-color);
    font-size: clamp(22px, 2vw, 30px);
  }
}

.loc-img-ctn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2vw;
  padding: 30px 3.5vw;

  img {
    height: 210px;
    width: 320px;
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    transition: all 0.5s ease;
    filter: brightness(0.8);
  }
}

.loc-data-ctn {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 30px 2vw;

  .address {
    color: var(--text-color);
    font-weight: 500;
    text-align: left;
    font-size: clamp(16px, 3vw, 20px);
    list-style: none;
    margin: 10px 3vw;
  }

  .address li:nth-child(6) {
    list-style: disc;
    list-style: inside;
  }
  .address li ul li:nth-child(1n + 1) {
    list-style: disc;
    list-style: inside;
  }

  .map {
    width: clamp(300px, 25vw, 400px);
    height: 300px;
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    filter: brightness(0.8);
    margin: 10px 3vw;
  }
}

/*! ~~~ CONTACT SITE ~~~ */
/*? === CONTACT ===  */

.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background-primary);
  padding: 100px 0 50px 0;
  color: var(--text-color);
  letter-spacing: 1px;
  width: 100%;
  height: 100%;
}

.contact-header {
  text-align: center;
  color: var(--text-color);

  margin-bottom: 30px;

  h1 {
    text-decoration: underline;
    font-size: clamp(24px, 4vw, 40px);
    letter-spacing: 2px;
    color: var(--accent-color);
    text-transform: uppercase;
  }
  p {
    margin-top: 20px;
    font-size: clamp(16px, 2vw, 18px);
    padding: 10px 10px 0 10px;
  }
}

.contact-ctn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  height: 100%;
}

.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 66%;
  border: 2px solid var(--accent-color);
  border-radius: 5px;
  padding: 30px 1.5rem 50px 1.5rem;
  margin: 3rem 2vw;

  label {
    font-size: 1.1rem;
  }

  input {
    margin-bottom: 20px;
    padding: 0.7rem;
    font-size: 1.1rem;
    background-color: var(--background-primary);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    color: var(--text-color);
  }
  input::marker {
    color: var(--text-color);
  }

  .btn-01 {
    border: none;
    width: 100%;
    box-shadow: 0 0 10px -2px var(--accent-color);
  }
  textarea {
    margin-bottom: 20px;
    padding: 0.7rem;
    font-size: 1.1rem;
    background-color: var(--background-primary);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    color: var(--text-color);
    resize: vertical;
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--accent-color);
    opacity: 0.3;
  }
}
.contact-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 25%;
  border: 2px solid var(--accent-color);
  border-radius: 5px;
  padding: 30px 1rem 50px 1rem;
  margin: 0 2vw;
  height: 650px;

  h2 {
    margin-bottom: 50px;
  }
  h3 {
    margin-top: 50px;
  }

  ul {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    list-style: none;
    font-size: 1.1rem;
    margin-top: 10px;
  }

  label {
    font-size: 1.1rem;
  }
  a {
    font-size: 1.1rem;
    color: var(--accent-color);
  }
}

@media screen and (max-width: 1023px) {
  .contact-ctn {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .contact-data {
    width: 66%;
    height: 100%;
    padding: 30px 1rem 50px 1rem;
  }
  .contact-form {
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .contact-data {
    width: 98%;
    padding: 30px 1.5rem 50px 1.5rem;

    h2 {
      margin: 0;
    }
  }
  .contact-form {
    width: 98%;
    padding: 30px 0.5rem 50px 0.5rem;
    margin: 3rem 2vw;
  }
}

.legalnotice-ctn, .dataprivacy-ctn {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background-primary);
  padding: 100px 0 50px 0;
  color: var(--text-color);
  letter-spacing: 1px;
  width: 100%;
  height: 100%;
}

.legalnotice-header, .dataprivacy-header {
  text-align: center;
  color: var(--text-color);

  margin-bottom: 30px;

  h1 {
    text-decoration: underline;
    font-size: clamp(24px, 4vw, 40px);
    letter-spacing: 2px;
    color: var(--accent-color);
    text-transform: uppercase;
  }
}

.legalnotice, .dataprivacy {
  width: 90%;

  strong {
    color: var(--accent-color);

  }
  h3 {
    margin-top: 20px;
        color: var(--accent-color);
  }

}