@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unbounded:wght@200..900&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-family: "Mariupol";
  color: #fff;
  outline: none;
}

h1,
h2,
h3,
h4,
p,
span,
div,
li,
ul {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-family: "Unbounded";
}

body {
  background-color: #e6e6e4;
  color: #000;
  font-size: 12px;
  font-family: "Unbounded", sans-serif;
  font-weight: 400;
}

.container {
  max-width: 1300px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 13px;
}

.section-color {
  background: url(../img/bg-mob.jpg) no-repeat;
  background-size: cover;
}

.section-title {
  font-family: "Roboto";
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.91px;
  color: #302f2f;
  margin-bottom: 10px;
  text-align: center;
}

.button-style {
  font-family: "Inter";
  font-weight: 500;
  color: #c5c5c5;
  border: 1px solid #3b3a3a;
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0px 1.04px 1.04px #202020;
}

/*h1*/
.vol {
  text-align: center;
  width: 100%;
  padding: 0px 0 50px 0;
  color: #595E48;
  font-size: 3rem;
}
/*About*/
.about__text {
  padding-block: 15px 23px;
}

.about__button {
  text-align: center;
}

.about__button_style {
  padding: 9px 42px;
  margin-bottom: 10px;
}

.mySwiper-about {
  margin-bottom: 8px;
}

/*Mission*/
.mission__text {
  padding-block: 14px 28px;
  color: #ffffff;
}

.mission__title {
  color: #ffffff;
}

/*Actions*/
.actions__text {
  padding: 15px 10px 0 10px;
}

.actions__title {
  font-size: 22px;
  color: #000000;
  letter-spacing: 0.77px;
  text-align: left;
}

.actions__title_span {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.actions__list-wrap {
  padding-block: 15px 20px;
}

.actions__list {
  list-style: none;
  padding-inline: 10px;
}

.actions__item:not(:last-child) {
  margin-bottom: 20px;
}

.actions__item_title {
  font-size: 16px;
  font-weight: 500;
}

/*Cta*/
.cta__text {
  padding-block: 20px 28px;
  color: #ffffff;
}

.cta__title {
  font-size: 26px;
  letter-spacing: 0.91px;
  color: #ffffff;
  margin-bottom: 20px;
}

.cta__desc {
  max-width: 80%;
  text-align: center;
  margin: auto;
  margin-bottom: 15px;
}

.cta__button {
  text-align: center;
}

.cta__button_style {
  padding: 8.5px 15px;
}

/*Media*/
.media__text {
  padding-block: 15px;
  padding-inline: 10px;
}

.media__title {
  margin-bottom: 15px;
}

.media__desc:not(:last-child) {
  margin-bottom: 15px;
}

.mySwiper-media {
  margin-bottom: 15px;
}

/*mySwiper-feedback*/
.mySwiper-feedback .swiper-slide {
  margin-bottom: 50px;
}

.mySwiper-feedback .swiper-slide a img {
  display: block;
  object-fit: cover;
  opacity: 0.6;
  width: 228.86px;
  height: 463.85px;
}

.mySwiper-feedback .swiper-slide a img:hover {
  transition: opacity 0.3s ease;
  opacity: 1;
}

/*mySwiper*/
.mySwiper-work .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mySwiper-work .swiper-slide a img {
  display: block;
  object-fit: cover;
  width: 236px;
  height: 378px;
  opacity: 0.5;
  border-radius: 30px 0;
  box-shadow: 0 4px 4px #202020;

}

.mySwiper-work .swiper-slide a img:hover {
  opacity: 1;
}


.mySwiper-work .swiper-slide::after {
  content: url('../img/play.png');
  height: 112px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mySwiper-work .swiper-wrapper {
  margin-bottom: 50px;
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  width: 100%;
  max-width: 100%;
}

.mySwiper-work .swiper-slide:hover::after {
  opacity: 1;
}

.swiper-scrollbar-drag {
  background: linear-gradient(38.9deg, #0534A8 -10.04%, #053CA1 -6.26%, #053CA1 1.02%, #053CA1 8.48%, #053CA1 16.51%, #8A9A43 53.18%, #B9BE08 73.87%, #D5D305 84.45%);
  height: 4.15px;
}

.swiper-scrollbar__wrap {
  max-width: 700px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
}











/*FOR PC - 1400*/
@media (min-width: 1400px) {
  /*General*/
  body {
    font-size: 15px;
  }

  .section-color {
    background: url(../img/bg.jpg) no-repeat;
    background-size: cover;
  }

  .section-title {
    font-size: 30px;
    letter-spacing: 1.05px;
    margin-bottom: inherit;
  }

  .button-style {
    font-size: 18px;
    border-radius: 30px;
    box-shadow: 0px 4px 4px #202020;
    transition: background-color 0.6s ease-in-out;
  }

  .button-style:hover {
    cursor: pointer;
    background-color: #333232;
    color: #ffffff;
    transition: 0.6s;
  }

  /*About*/
  .about {
    margin-bottom: 50px;
  }
  .about__text {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 378px;
  }

  .about__text {
    padding-block: 50px 70px;
  }

  .about__title {
    display: block;
  }

  .about__button_style {
    text-transform: lowercase;
    padding: 20.5px 50px;
    margin-bottom: 10px;
  }

  .mySwiper-about {
    margin-bottom: 77px;
  }

  /*Mission*/
  .mission__text {
    padding-block: 69px 100px;
  }

  .mission__title {
    margin-bottom: 15px;
  }

  .mission__desc {
    font-size: 18px;
    text-align: center;
    max-width: 66%;
    margin: auto;
  }
  /*Actions*/
  .actions__wrap {
    display: flex;
    gap: 30px;
    padding-block: 90px 60px;
  }

  .actions__text {
    max-width: 438px;
    padding: 0;
  }

  .actions__title {
    font-size: 30px;
    letter-spacing: 1.05px;
    margin-bottom: 32px;
  }

  .actions__title_span {
    font-size: inherit;
    letter-spacing: inherit;
    display: block;
  }

  .actions__list-wrap {
    max-width: 876px;
    padding-block: 0;
  }

  .actions__list {
    padding-inline: 0;
  }

  .actions__item:not(:last-child) {
    margin-bottom: 20px;
  }

  .actions__item_title {
    font-size: 17px;
  }

  /*Cta*/
  .cta__text {
    padding-block: 57px 47px;
  }

  .cta__title {
    font-size: 30px;
    letter-spacing: 1.05px;
    margin-bottom: 24px;
  }

  .cta__desc {
    max-width: 57%;
    margin-bottom: 44px;
  }

  .cta__button_style {
    padding: 20.5px 50px;
  }

  /*Media*/
  .media {
    margin-bottom: 50px;
  }
  .media__text {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 87px;
    padding-block: 89px 50px;
    padding-inline: 0;
  }

  .media__title {
    color: #000000;
    text-align: left;
  }

  .media__desc {
    grid-column: 3;
  }
  .media__desc:not(:last-child) {
    margin-bottom: 26px;
  }

  .mySwiper-media {
    margin-bottom: 100px;
  }
}


@media (max-width: 765px) {
  /*slide*/
  .mySwiper-feedback .swiper-slide a img,
  .mySwiper-work .swiper-slide a img {
    width: 128.86px;
    height: 262.85px;
  }
  .media {
    margin-bottom: 50px;
  }
  .vol {
      padding: 30px 0 0px 0;
      font-size: 2rem;
  }
}