/* foto exp */

.foto_exp {
  margin-top: clamp(30px, 2.083vw, 40px);
}

.foto_exp_title {
  color: var(--black-text-light);
  font-family: var(--font-gilroy);
  font-weight: 600;
  font-size: clamp(40px, 2.778vw, 53.33px);
  line-height: 110%;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
}

.foto_exp_wrapper {
  margin-top: clamp(30px, 2.083vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 1.389vw, 26.67px);
}

.foto_exp_item {
  border-radius: clamp(32px, 2.222vw, 42.67px);
  width: 100%;
  height: clamp(400px, 27.778vw, 533.33px);
  object-fit: cover;
}

/* mob hero */

.mob_hero {
  display: none;
  margin-top: -40px;
  width: 100%;
  height: 420px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 13.33%, #02416f 112.86%),
    var(--rsg-work-cover, url(../images/works/foto_exp_1.png)) no-repeat center;
  background-size: cover;
}

.mob_content {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 420px;
  padding-bottom: 20px;
}

.mob_hero_navigation {
  width: fit-content;
  background: #ffffff26;
  backdrop-filter: blur(12px);
  padding: 9px 13px;
  border-radius: 300px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob_hero_navigation a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffffffbf;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: -2%;
}

.mob_hero_navigation a i {
  font-size: 10px;
}

.mob_hero_navigation .active {
  color: var(--white);
}

.mob_hero_title {
  padding-top: 15px;
  color: var(--white);
  font-family: var(--font-gilroy);
  font-weight: 600;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -2%;
}

.mob_hero_date_avatar {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.mob_hero_date {
  color: #ffffffe5;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: -3%;
}

.hero_mob_avatars {
  display: flex;
}

.hero_mob_avatars img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  margin-left: -5px;
}

.hero_mob_avatars img:first-child {
  margin-left: 0;
}

/* info */

.info_desc {
  color: var(--black-text-light);
  font-weight: 500;
  font-size: clamp(16px, 1.111vw, 21.33px);
  line-height: 130%;
  letter-spacing: -0.02em;
  text-align: justify;
}

.info_list {
  padding-top: clamp(15px, 1.042vw, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.694vw, 13.33px);
  list-style: disc;
  padding-left: clamp(17px, 1.181vw, 22.67px);
}

.info_list li {
  color: #222222bf;
  font-weight: 500;
  font-size: clamp(16px, 1.111vw, 21.33px);
  line-height: 130%;
  letter-spacing: -0.02em;
  text-align: justify;
}

.info_list li::marker {
  color: var(--primary);
}

/* plan */

.plan_wrapper {
  margin-top: clamp(30px, 2.083vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 1.389vw, 26.67px);
}

.plan_item {
  height: clamp(346px, 24.028vw, 461.33px);
  border-radius: clamp(32px, 2.222vw, 42.67px);
  background: var(--dark-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(32px, 2.222vw, 42.67px);
}

.plan_item.is-hidden {
  display: none;
}

.plan_content {
  padding-top: clamp(16.5px, 1.146vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6.5px, 0.451vw, 8.67px);
}

.plan_zoom {
  width: clamp(9px, 0.625vw, 12px);
  height: clamp(9px, 0.625vw, 12px);
}

.plan_title {
  width: clamp(220px, 15.278vw, 293.33px);
  color: var(--black-text-light);
  font-weight: 500;
  font-size: clamp(16px, 1.111vw, 21.33px);
  line-height: 130%;
  letter-spacing: -0.02em;
  text-align: center;
}

.plan_img {
  width: 100%;
  height: clamp(225px, 15.625vw, 300px);
  object-position: top;
  object-fit: cover;
}

.plan_look_btn {
  width: 100%;
  height: clamp(40px, 2.778vw, 53.33px);
  color: var(--primary);
  font-weight: 500;
  font-size: clamp(16px, 1.111vw, 21.33px);
  line-height: 130%;
  letter-spacing: -0.02em;
  border-radius: 300px;
  border: 1px solid var(--primary);
  background: transparent;
  margin-top: clamp(30px, 2.083vw, 40px);
  transition: 0.3s ease-in-out;
}

.plan_look_btn:hover {
  background: #02416f12;
}

/* work_exp_title */

.work_exp_title {
  width: clamp(870px, 60.417vw, 1160px);
  color: var(--primary);
  font-family: var(--font-gilroy);
  font-weight: 600;
  font-size: clamp(28px, 1.944vw, 37.33px);
  line-height: 110%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* image */

.image {
  margin-top: clamp(30px, 2.083vw, 40px);
}

.iamge_wrapper {
  margin-right: calc((100vw - 95.44vw) / -2);
}

.image_swiper_before,
.image_swiper_affter,
.image_swiper_start {
  margin-top: clamp(20px, 1.389vw, 26.67px);
  width: 100%;
  overflow: hidden;
}

.image_swiper_item-before p,
.image_swiper_item-affter p {
  display: none;
}

.image_swiper_item {
  width: clamp(212px, 14.722vw, 282.67px) !important;
  height: clamp(193px, 13.403vw, 257.33px) !important;
}

.image_swiper_item a {
  height: 100%;
}

.image_item_foto {
  width: 100%;
  height: 100%;
  border-radius: clamp(24px, 1.667vw, 32px);
  object-fit: cover;
}

.blue_control-image_before,
.blue_control-image_affter,
.blue_control-image_start {
  margin-top: clamp(30px, 2.083vw, 40px);
  padding-bottom: clamp(10px, 0.694vw, 13.33px);
}

/* workers */

.workers_wrappepr {
  margin-top: clamp(20px, 1.389vw, 26.67px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 1.389vw, 26.67px);
}

.worker_item {
  width: auto;
  height: clamp(362px, 25.139vw, 482.67px);
  background: radial-gradient(
    121.91% 219.25% at -6.58% 0%,
    #02253e 0%,
    #0281dd 75%,
    #0069b4 100%
  );
  border-radius: clamp(32px, 2.222vw, 42.67px);
  padding: clamp(15px, 1.042vw, 20px);
}

.worker_avatar {
  width: 100%;
  height: clamp(253px, 17.569vw, 337.33px);
  object-fit: cover;
  object-position: center top;
  border-radius: clamp(16px, 1.111vw, 21.33px);
}

.worker_content {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.694vw, 13.33px);
  margin-top: clamp(15px, 1.042vw, 20px);
}

.worker_name {
  color: var(--white);
  font-weight: 500;
  font-size: clamp(20px, 1.389vw, 26.67px);
  line-height: 130%;
  letter-spacing: -0.02em;
}

.worker_role_button {
  display: grid;
  grid-template-columns: 1fr clamp(28px, 1.944vw, 37.33px);
  gap: clamp(5px, 0.347vw, 6.67px);
}

.worker_role {
  width: auto;
  height: clamp(28px, 1.944vw, 37.33px);
  background: var(--white);
  border-radius: 300px;
  color: var(--primary);
  font-weight: 500;
  font-size: clamp(14px, 0.972vw, 18.67px);
  line-height: 130%;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.worker_btn {
  width: clamp(28px, 1.944vw, 37.33px);
  height: clamp(28px, 1.944vw, 37.33px);
  background: var(--white);
  border-radius: 50%;
  color: var(--primary);
  font-size: clamp(12px, 0.833vw, 16px);
  transform: rotate(-45deg);
}

/* media */

@media (max-width: 400px) {
  /* foto_exp */

  .foto_exp {
    display: none;
  }

  /* mob_hero */

  .mob_hero {
    display: flex;
  }

  /* info */

  .info_list li {
    font-size: 14px;
  }

  .plan_wrapper {
    margin-top: 15px;
  }

  .plan_zoom {
    display: none;
  }

  .plan_item {
    border-radius: 16px;
    height: 243px;
    padding: 7px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: start;
  }

  .plan_content {
    padding-top: 10px;
  }

  .plan_title {
    width: 100%;
    text-align: start;
    font-size: 12px;
  }

  .plan_img {
    width: 100%;
    height: 168px;
    object-position: center;
    border-radius: 12px;
    border: 1px solid #0000001a;
  }

  .plan_look_btn {
    margin-top: 15px;
    font-size: 14px;
  }

  .work_exp_title {
    width: 100%;
    font-size: 20px;
  }

  .work_exp_title-affter {
    display: none;
  }

  /* image */

  .image_swiper_before {
    margin-top: 10px;
    overflow: visible;
  }

  .image_swiper_affter {
    margin-top: 0px;
    overflow: visible;
  }

  .iamge_wrapper {
    margin-left: -20px;
    margin-right: -20px;
  }

  .image_swiper_item-before,
  .image_swiper_item-affter {
    height: 326px !important;
    border-radius: 32px;
    display: flex !important;
    flex-direction: column;
  }

  .image_swiper_item-before {
    background: var(--dark-white);
  }

  .image_swiper_item-start {
    width: 250px !important;
    height: 288px !important;
  }

  .image_swiper_item-before p {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: var(--black-text-light);
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -2%;
    text-align: center;
  }

  .image_swiper_item-affter p {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: var(--white);
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -2%;
    text-align: center;
  }

  .image_swiper_item-before img,
  .image_swiper_item-affter img {
    flex: 1;
    min-height: 0;
    display: block;
  }

  .image_swiper_item-affter {
    background: radial-gradient(
      97.79% 269.47% at 2.21% 3.33%,
      #002f51 0%,
      #0178cf 75%,
      #0061a7 100%
    );
  }

  .blue_control-image_before .blue_swiper_btns,
  .blue_control-image_affter .blue_swiper_btns {
    display: none;
  }

  .blue_control-image_before,
  .blue_control-image_affter {
    width: 210px;
    min-width: 210px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .blue_control-image_start {
    margin-top: 15px;
  }

  /* workers */

  .workers {
    margin-top: 30px;
  }

  .workers_wrappepr {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .worker_item {
    padding: 10px;
    display: flex;
    gap: 10px;
    border-radius: 20px;
    height: 127px;
  }

  .worker_avatar {
    max-width: 107px;
    height: 107px;
    border-radius: 16px;
  }

  .worker_content {
    width: 100%;
    justify-content: space-between;
    margin-top: 0;
  }

  .worker_name {
    width: 100px;
    font-size: 16px;
  }

  .worker_role_button {
    width: 100%;
    grid-template-columns: 1fr 26px;
  }

  .worker_role {
    height: 28px;
    font-size: clamp(9.6px, 3vw, 12px);
  }

  .worker_btn {
    width: 26px;
    height: 26px;
  }
}