.project-section {
  width: 100%;
  height: auto;
  counter-reset: section;
}
.project-section .project-row {
  padding: 0 32px;
}
.project-section .project-row .row-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.project-section .project-row .row-content .row-left-info {
  width: 30%;
}
.project-section .project-row .row-content .row-left-info .top-info {
  align-items: center;
  position: relative;
  font-family: var(--main-font-family);
}
.project-section .project-row .row-content .row-left-info .top-info .top-title {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
  padding-left: 44px;
  color: var(--text-muted);
}
.project-section
  .project-row
  .row-content
  .row-left-info
  .top-info
  .top-title::before {
  content: "";
  position: absolute;
  background: var(--border-light);
  width: 37px;
  height: 1px;
  top: 3%;
  left: 0;
  transform: translateY(-50%);
}
.project-section .project-row .row-content .row-left-info .top-info h2 {
  margin-bottom: 24px;
  font-size: 50px;
  line-height: 118%;
  color: var(--text-dark);
}
.project-section .project-row .row-content .row-left-info .top-info p {
  margin-top: 24px;
  font-size: 16px;
  line-height: 27px;
  width: 318px;
}
.project-section .project-row .row-content .row-left-info .top-info button {
  margin-top: 32px;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--text-light);
  padding: 14px 24px;
  border-radius: var(--border-radius);
  position: relative;
  z-index: 1;
  transition: var(--transition-smooth);
  font-weight: 600;
}
.project-section
  .project-row
  .row-content
  .row-left-info
  .top-info
  button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background: var(--gradient-primary);
  border-radius: 28px;
  width: 100%;
  height: 100%;
  transition: var(--transition-smooth);
  z-index: -1;
}
.project-section
  .project-row
  .row-content
  .row-left-info
  .top-info
  button:hover {
  color: var(--btn-dark-hover);
}
.project-section
  .project-row
  .row-content
  .row-left-info
  .top-info
  button:hover
  i {
  color: var(--text-light);
  transform: translateX(7px);
  transition: var(--transition-smooth);
}
.project-section
  .project-row
  .row-content
  .row-left-info
  .top-info
  button:hover::before {
  width: 52px;
}
.project-section
  .project-row
  .row-content
  .row-left-info
  .top-info
  button
  span
  i {
  margin-left: 10px;
}
.project-section .project-row .row-content .row-left-info .slider-arrow {
  padding-left: 42px;
}
.project-section .project-row .row-content .row-right-slider {
  width: 70%;
}
.project-section .project-row .row-content .row-right-slider .slider-box {
  width: 100%;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box {
  width: 100%;
  position: relative;
  cursor: pointer;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box
  .top-clip-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box
  .top-clip-hover,
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box
  .bottom-clip-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition-smooth);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box
  .top-clip-hover {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: translate(-100%, -100%);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box
  .bottom-clip-hover {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform: translate(100%, 100%);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box:hover
  .top-clip-hover,
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box:hover
  .bottom-clip-hover {
  transform: translate(0, 0);
}
/* .......... */
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box {
  clip-path: polygon(
    15% 0,
    100% 0,
    100% 20%,
    100% 80%,
    100% 100%,
    0 100%,
    0% 80%,
    0 17%
  );
  position: relative;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-img-box
  .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  font-size: 20px;
  color: var(--text-light);
  z-index: 1;
  text-align: center;
  padding-top: 13px;
  opacity: 0;
  transition: var(--transition-smooth);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box:hover
  .icon {
  opacity: 1;
  transition: var(--transition-smooth);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box {
  width: 100%;
  color: var(--text-muted);
  margin-top: 25px;
  position: relative;
  z-index: 1;
  font-family: var(--main-font-family);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box::before {
  counter-increment: section;
  content: "0" counter(section);
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 80px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.04);
  z-index: -1;
  line-height: 1;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box
  h2 {
  font-size: 29.712px;
  font-weight: 600;
  line-height: 140%;
  margin: 0 0 5px;
  transition: var(--transition-smooth);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box
  h2
  a:hover {
  color: var(--text-muted);
  transition: var(--transition-smooth);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box
  h2
  a {
  text-decoration: none;
  color: var(--text-dark);
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box
  p {
  margin-top: 10px;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box
  ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px;
  margin-top: 15px;
}
.project-section
  .project-row
  .row-content
  .row-right-slider
  .slider-box
  .row-card-box
  .work-box
  .work-content-box
  ul
  li {
  list-style-type: none;
  border: 1px solid var(--border-light);
  padding: 3px 14px;
  border-radius: var(--border-radius);
}

/* .... */

.our-work-vdtpl2vih-owlCarousel {
  position: relative;
}

.our-work-vdtpl2vih-owlCarousel .owl-nav {
  position: absolute;
  top: 57%;
  left: -400px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.our-work-vdtpl2vih-owlCarousel .owl-nav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: var(--transition-fast) !important;
  -webkit-transition: var(--transition-fast) !important;
  -moz-transition: var(--transition-fast) !important;
  -ms-transition: var(--transition-fast) !important;
  -o-transition: var(--transition-fast) !important;
}

/* Arrow Icon */
.our-work-vdtpl2vih-owlCarousel .owl-nav button span {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-light) !important;
  line-height: 52px;
  display: block;
}

/* Hover */
.our-work-vdtpl2vih-owlCarousel .owl-nav button:hover {
  background: var(--primary-light) !important;
  box-shadow: var(--shadow-medium) !important;
}

.our-work-vdtpl2vih-owlCarousel .owl-nav button:hover span {
  color: var(--primary-dark) !important;
}