/* ======================= MAIN STYLES ======================= */
*,
*::before,
*::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

html {
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
  background: #000;
  color: var(--color-white);
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6,
li,
a,
p {
  font-family: "Raleway", sans-serif;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 145%;
  font-family: "Raleway-bd", sans-serif;
}

p {
  line-height: 130%;
}

button {
  font-family: "Raleway-md", sans-serif;
  color: var(--color-black);
}

.page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100vh;
}

.container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 0.625rem;
}

footer {
  margin-top: auto;
}

/* HEADER */
.header {
  position: relative;

  margin-bottom: 20px;

  /* padding-top: 35px; */
  padding-bottom: 35px;

  border-bottom: 1px solid rgb(255, 255, 255, 0.1);

  &::before {
    content: "";
    position: absolute;

    width: 100vw;
    height: 100vh;

    background: url("../assets/images/bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: -1;
  }
}

.header__wrapper {
  padding-top: 35px;
}

.header__logo {
  width: 253px;
  height: 100px;

  @media (max-width: 375px) {
    width: 200px;
    height: auto;
  }
}

.header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 40px;

  @media (max-width: 1300px) {
    display: none;
    position: absolute;
    flex-direction: column;
    left: 0%;
    right: 0%;
    top: 135px;
    padding: 20px;
    width: 100vw;
    height: 100vh;
    background: var(--color-black);
    font-size: 20px;
    font-weight: 600;

    z-index: 99;
  }
}

.header__nav.active,
.header__right.active {
  display: flex;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 60px;

  @media (max-width: 1300px) {
    display: none;
    position: absolute;
    flex-direction: column;
    left: 0;
    right: 0;
    top: 70%;
    z-index: 99;
  }

  @media (max-height: 600px) {
    top: 75%;
  }
}

.header__right a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}

.header__right-language {
  display: flex;
  gap: 10px;
  padding: 20px;

  border: 1px solid var(--color-yellow);
  border-radius: var(--border-radius-md);
  color: var(--color-white);

  background: none;
}

.header__menu {
  padding: 20px;
  width: 60px;
  height: 60px;
  background: var(--color-yellow-transparent);
  border-radius: var(--border-radius-md);

  display: none;

  @media (max-width: 1300px) {
    display: block;
  }
}

.header__menu div {
  position: relative;

  width: 30px;
  height: 2px;
  margin-top: 10px;
  margin-left: -3px;

  background: var(--color-white);
  border-radius: var(--border-radius-sm);

  &::before {
    content: "";
    position: absolute;

    top: 10px;

    width: 30px;
    height: 2px;

    background: var(--color-white);
    border-radius: var(--border-radius-sm);
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 10px;

    width: 30px;
    height: 2px;

    background: var(--color-white);
    border-radius: var(--border-radius-sm);
  }
}

/* HOME HEAD */
.home__head-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 1332px) {
    flex-direction: column;
  }
}

.home__head-left {
  display: flex;
  flex-direction: column;

  gap: 40px;

  @media (max-width: 1332px) {
    order: 1;
  }
}

.home__head-left h1 {
  font-size: 46px;
  text-transform: uppercase;

  position: relative;

  &::before {
    content: "";
    position: absolute;

    top: -40px;

    width: 140px;
    height: 1px;

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

  @media (max-width: 375px) {
    font-size: 32px;
    margin-top: 60px;
  }
}

.home__head-left ul {
  display: flex;
  position: relative;

  gap: 30px;

  &::before {
    content: "";
    position: absolute;

    right: 10%;
    top: 10%;

    width: 320px;
    height: 148px;

    border: 1px solid rgba(255, 187, 0, 0.506);
    opacity: 0.5;

    z-index: -1;
  }

  &::after {
    content: "";
    position: absolute;

    left: 2%;
    top: 10%;

    width: 320px;
    height: 148px;

    border: 1px solid rgba(255, 187, 0, 0.506);
    opacity: 0.5;

    z-index: -1;
  }

  @media (max-width: 1332px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 1332px) {
  .home__head-left ul::before {
    display: none;
  }

  .home__head-left ul::after {
    display: none;
  }
}

.home__head-left ul > li {
  width: 320px;
  height: 148px;
  padding: 30px;

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(7px);

  @media (max-width: 375px) {
    width: auto;
  }
}

.home__head-left ul > li h3 {
  font-size: 22px;
}

.home__head-left ul > li p {
  font-size: 16px;
  opacity: 0.6;
  margin-top: 10px;
}

.home__head-left button {
  position: relative;
  overflow: hidden;

  padding: 20px 30px;

  background: var(--color-yellow);
  border-radius: var(--border-radius-md);
}

.home__head-left button::after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.4;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 210;

  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: ease;
}

.home__head-left button:hover {
  &::after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }
}

.home__head-right {
  position: relative;

  @media (max-width: 1332px) {
    order: 0;
  }
}

.home__head-right > img {
  @media (max-width: 1332px) {
    width: 100%;
    height: 100%;
  }
}

.home__head-right > a {
  position: absolute;

  top: 80%;
  left: 80%;

  text-align: center;

  width: 88px;
  height: 88px;

  background: var(--color-yellow);
  border-radius: 50%;

  @media (max-width: 375px) {
    width: 44px;
    height: 44px;
  }
}

.home__head-right > a > img {
  margin-top: 30px;

  @media (max-width: 375px) {
    margin-top: 10px;
  }
}

/* ADVANTAGES */
.home__advantages {
  margin-top: 180px;
}

.home__advantages-wrapper {
  display: flex;
  flex-direction: column;

  gap: 60px;
}

.home__advantages-wrapper h1 {
  font-size: 42px;
  text-transform: uppercase;

  position: relative;

  &::before {
    content: "";
    position: absolute;

    top: -40px;

    width: 140px;
    height: 1px;

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

  @media (max-width: 559px) {
    font-size: 32px;
  }

  @media (max-width: 320px) {
    font-size: 26px;
  }
}

.home__advantages-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 20px;
}

.home__advantages-wrapper ul > li {
  width: 440px;
  height: 168px;

  padding: 40px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(7px);
}

.home__advantages-wrapper ul > li h3 {
  text-transform: uppercase;
  font-size: 22px;
}

.home__advantages-wrapper ul > li p {
  opacity: 0.6;
  margin-top: 10px;
  font-size: 16px;
}

.home__advantages-wrapper button {
  position: relative;
  overflow: hidden;

  padding: 20px 30px;

  background: var(--color-yellow);
  border-radius: var(--border-radius-md);
}

.home__advantages-wrapper div {
  position: relative;

  &::before {
    content: "";
    position: absolute;

    width: 100%;
    height: 4px;

    background: url("../assets/icons/long-arrow.svg");
    background-position: center;
    background-repeat: no-repeat;

    left: 11%;
    top: 45%;
  }
}

.home__advantages-wrapper button::after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.4;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 210;

  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: ease;
}

.home__advantages-wrapper button:hover {
  &::after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }
}

/* OUR CLUB */
.home__our-club {
  margin-top: 290px;
}

.home__our-club--top h1 {
  font-size: 42px;
  text-transform: uppercase;
  position: relative;

  &::before {
    content: "";
    position: absolute;

    top: -40px;

    width: 140px;
    height: 1px;

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

.slider-image {
  background: rgb(31, 31, 31);
  border-radius: 50%;

  width: 300px;
  height: 300px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  transition: background 0.2s ease;
}

.slider-image img {
  width: 100%;
  height: 100%;
}

.swiper-slide h2 {
  margin-top: 30px;
  font-size: 24px;
  line-height: 130%;
  text-align: center;
}

.swiper-slide p {
  margin-top: 10px;
  line-height: 145%;
  font-size: 16px;
  text-align: center;
}

.home__our-club-wrapper {
  display: flex;
  justify-content: space-between;

  padding: 30px;
  width: 100%;

  @media (max-width: 375px) {
    padding: 10px;
  }
}

.home__our-club--slider .swiper-slide ul {
  display: none;
  gap: 20px;
  margin-top: 50px;
}

.home__our-club--slider .swiper-slide ul.active {
  display: flex;
}

.home__our-club--slider .swiper-slide ul img {
  width: 30px;
  height: 30px;
}

.home__our-club--slider .swiper-slide {
  position: relative;

  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;

  height: 570px !important;
  margin-bottom: 40px;

  cursor: pointer;

  &:before {
    content: "";
    position: absolute;

    left: 1%;

    width: 97%;
    height: 0%;

    top: 20%;

    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-lg);

    z-index: -1;

    transition: all 0.2s linear;
  }
}

.home__our-club--slider .swiper-slide:hover .slider-image {
  background: var(--color-yellow);
}

.home__our-club--slider .swiper-slide:hover::before {
  height: 75%;
}

.home__our-club--slider .swiper-slide p {
  width: 300px;
}

.home__our-club--top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 60px;
}

.home__our-club-wrapper {
  display: flex;
  flex-direction: column;
}

.swiper-wrapper {
  width: 1300px !important;

  @media (max-width: 1385px) {
    width: 1000px !important;
  }

  @media (max-width: 1076px) {
    width: 700px !important;
  }

  @media (max-width: 786px) {
    width: 300px !important;
  }
}

.home__navigation button {
  padding: 20px;
  border: 1px solid var(--color-yellow);
  background: none;
  border-radius: 50%;
}

/* LEARN MORE */
.home__learn-more {
  margin-top: 80px;
  margin-bottom: 100px;
}

.home__learn-more--left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home__learn-more--left p {
  line-height: 145%;
  font-size: 18px;
  width: 770px;

  @media (max-width: 1250px) {
    width: auto;
    padding-right: 10px;
  }
}

.home__learn-more--left h2 {
  line-height: 130%;
  font-size: 36px;
  text-transform: uppercase;
  font-family: "Raleway-bd", sans-serif;
}

.home__learn-more--wrapper {
  display: flex;
  justify-content: space-between;

  padding: 60px;
  width: 100%;

  background: var(--color-red);
  border-radius: var(--border-radius-lg);

  @media (max-width: 900px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.home__learn-more--right {
  display: flex;
  flex-direction: column;
  gap: 20px;

  @media (max-width: 900px) {
    margin-top: 30px;
    flex-direction: row;
  }

  @media (max-width: 537px) {
    flex-direction: column;
  }
}

.home__learn-more--right a {
  width: 260px;
  padding: 20px 25px;

  text-align: center;
  background: none;

  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.home__learn-more--right a > img {
  margin-right: 14px;
}

/* REZEDENTS */
.home__rezidents {
  padding: 120px 0;
}

.home__rezedents-top h1 {
  font-size: 42px;
  line-height: 130%;
  font-family: "Raleway-bd", sans-serif;
  position: relative;

  &::before {
    content: "";
    position: absolute;

    top: -40px;

    width: 140px;
    height: 1px;

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

  @media (max-width: 425px) {
    font-size: 32px;
  }
}

.home__rezedents-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 60px;
}

.home__rezedents-slide--image {
  padding: 20px 46px;

  border-radius: var(--border-radius-md);
  background: var(--color-white);
}

.home__rezedents-slider .swiper-slide img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}

.home__rezedents-slider ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 271px !important;
  height: 180px !important;

  padding: 40px 90px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  @media (max-width: 468px) {
    width: 200px !important;
  }

  @media (max-width: 404px) {
    width: 120px !important;
  }
}

.home__rezedents-slider {
  height: 600px;

  @media (max-width: 1400px) {
    width: 910px;
  }

  @media (max-width: 950px) {
    width: 455px;
  }

  @media (max-width: 468px) {
    width: 385px;
  }

  @media (max-width: 404px) {
    width: 305px;
  }
}

/* EVENTS */
.home__events {
  margin-top: 80px;
  margin-bottom: 80px;
}

.home__events-left > h2 {
  font-size: 42px;
  line-height: 130%;
  text-transform: uppercase;

  font-family: "Raleway-bd", sans-serif;
}

.home__events-left img {
  margin-top: 60px;
  width: 900px;
  height: 560px;
  object-fit: cover;

  border-radius: var(--border-radius-lg);
}

.home__events-wrapper {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */

  @media (max-width: 1440px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.home__events-card {
  display: flex;
  flex-direction: column;

  position: relative;

  width: 420px;
  height: 260px;
  padding: 30px;
  border-radius: 21px;

  &:first-child {
    background: url("../assets/images/crad-yellow.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  &:last-child {
    background: url("../assets/images/crad-black.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  &::before {
    content: "";
    position: absolute;

    top: 25%;
    right: 35%;

    width: 100%;
    height: 100%;

    background: url("../assets/icons/curly-line-left.svg");
    background-position: center;
    background-repeat: no-repeat;
  }

  &::after {
    content: "";
    position: absolute;

    left: 35%;
    bottom: 25%;

    width: 100%;
    height: 100%;

    background: url("../assets/icons/curly-line-right.svg");
    background-position: center;
    background-repeat: no-repeat;
  }

  @media (max-width: 441px) {
    width: 340px;
    height: 180px;
  }

  @media (max-width: 375px) {
    width: 310px;
    height: 170px;
  }
}

.home__events-left > img {
  width: 900px;
  height: 560px;
  object-fit: cover;

  @media (max-width: 908px) {
    width: 100%;
    height: 100%;
  }
}

.home__events-right {
  display: flex;
  flex-direction: column;
  gap: 40px;

  margin-top: 8.5%;

  @media (max-width: 1440px) {
    flex-direction: row;
  }

  @media (max-width: 908px) {
    flex-direction: column;
  }
}

.home__events-card > h5 {
  font-size: 18px;
  line-height: 145%;
}

.home__events-card > div {
  margin-top: auto;
  text-align: right;
}

.home__events-card p {
  font-size: 16px;
  line-height: 145%;
}

.home__events-card h3 {
  font-size: 24px;
  line-height: 130%;
  font-family: "Raleway-bd", sans-serif;
}

.home__events-button {
  margin-top: 60px;
}

.home__events .home__events-button {
  position: relative;

  &::before {
    content: "";
    position: absolute;

    width: 100%;
    height: 4px;

    background: url("../assets/icons/long-arrow.svg");
    background-position: center;
    background-repeat: no-repeat;

    left: 11%;
    top: 45%;
  }
}

.home__events button {
  position: relative;
  overflow: hidden;

  padding: 20px 30px;

  background: var(--color-yellow);
  border-radius: var(--border-radius-md);
}

.home__events button::after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.4;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 210;

  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: ease;
}

.home__events button:hover {
  &::after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }
}

/* Contacts */
.home__contacts {
  margin-top: 80px;
  margin-bottom: 80px;
}

.home__contacts iframe {
  border: none;
  border-radius: var(--border-radius-lg);
}

.home__contacts-main {
  padding: 40px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(7px);
  width: 490px;

  border-radius: var(--border-radius-lg);

  @media (max-width: 1186px) {
    right: 0%;
  }

  @media (max-width: 937px) {
    width: 300px;
  }

  @media (max-width: 1390px) {
    width: 100%;
  }
}

.home__contacts-main h2 {
  font-size: 42px;
  line-height: 130%;
  text-transform: uppercase;
  font-family: "Raleway-bd", sans-serif;

  @media (max-width: 413px) {
    font-size: 26px;
  }
}

.home__contacts-main ul {
  margin-top: 30px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home__contacts-main ul:last-child {
  flex-direction: row;
}

.home__contacts-main ul > li a {
  display: flex;
  align-items: center;
  gap: 10px;

  &:hover {
    text-decoration: underline;
  }

  @media (max-width: 413px) {
    font-size: 14px;
  }
}

.home__contacts-wrapper {
  display: flex;
  gap: 60px;

  @media (max-width: 1390px) {
    flex-direction: column;
  }
}

.home__contacts-wrapper iframe {
  @media (max-width: 1390px) {
    width: 100%;
  }
}

/* FOOTER */
.footer {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__main {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 50px;

  &::before {
    content: "";
    position: absolute;

    width: 120vw;
    height: 1px;

    left: -20%;
    bottom: 0;

    background: rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 1415px) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 555px) {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 1415px) {
  .footer__main::before {
    display: none;
  }
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 18px;

  @media (max-width: 1133px) {
    display: none;
  }
}

.footer__main > .footer__contacts > div {
  display: flex;
  flex-direction: column;

  font-size: 24px;
  gap: 10px;
}

.footer__main > .footer__contacts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__main > .footer__contacts a {
  font-family: "Raleway-md", sans-serif;
}

.footer__copyright {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;

  @media (max-width: 687px) {
    flex-direction: column;
    gap: 20px;
  }
}

/* OTHER */
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: var(--color-white) !important;
  opacity: 0.2 !important;
}

.swiper-pagination-bullet-active {
  background: var(--color-yellow) !important;
  opacity: 1 !important;
}

.home__events-slider .swiper-wrapper {
  width: 900px !important;

  @media (max-width: 1080px) {
    width: 600px !important;
  }

  @media (max-width: 637px) {
    width: 400px !important;
  }

  @media (max-width: 425px) {
    width: 350px !important;
  }

  @media (max-width: 365px) {
    width: 320px !important;
  }
}

.home__events-slider .swiper-wrapper img {
  @media (max-width: 1080px) {
    width: 600px;
    height: auto;
  }

  @media (max-width: 637px) {
    width: 400px;
  }

  @media (max-width: 425px) {
    width: 300px;
  }

  @media (max-width: 425px) {
    width: 350px !important;
  }

  @media (max-width: 365px) {
    width: 320px !important;
  }
}

.home__events-slider .swiper-slide {
  width: 900px !important;
  height: auto !important;
  cursor: grab !important;

  @media (max-width: 1080px) {
    width: 600px !important;
  }

  @media (max-width: 637px) {
    width: 400px !important;
  }

  @media (max-width: 425px) {
    width: 350px !important;
  }

  @media (max-width: 365px) {
    width: 320px !important;
  }
}