.svyatyni-single-header {
   background-color: var(--body-color);
   border-bottom: .7px solid rgba(0 0 0/ .15);
   display: flex;
   justify-content: center;
   align-items: center;
   height: clamp(3.9rem, 3.5831rem + 1.3521vw, 4.8rem);
   position: sticky;
   top: 0;
   z-index: var(--z-fixed);
}

.svyatyni-single-btn {
   color: var(--black-color);
   font-size: var(--fs-navs);
   transition: var(--general-transition);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: clamp(0.625rem, -2.6761rem + 14.0845vw, 10rem);
   font-size: clamp(0.9rem, 0.8824rem + 0.0751vw, 0.95rem);
   padding: .4rem .7rem;
   width: max-content;
}

.svyatyni-single-btn i {
   font-size: 1.15rem;
   transition: var(--general-transition);
}

.svyatyni-single-btn i:is(:hover, :active) {
   color: var(--btn-bg);
}

.svyatyni-single-header-title {
   color: var(--title-color);
   font-weight: 500;
   font-family: var(--ff-heading);
   font-size: var(--fs-section-subtitle);
}

.svyatyni-single-container {
   padding-block-end: 2rem;
   padding-inline: var(--padding-inline);
   margin: auto;
   max-width: 63rem;
}

.carousel-container {
  position: relative;
  padding-block: 3rem;
}

.carousel-wrapper {
   position: relative;
   overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: all .85s ease;
}

.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;
  max-width: 100%;
}

.carousel-item img {
   border-radius: var(--border-radius);
   width: 100%;
   height: clamp(16rem, 11.0704rem + 21.0329vw, 30rem);
   object-fit: cover;
}

.carousel-nav {
   display: flex;
   justify-content: space-between;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
   width: 100%;
}

.carousel-prev,
.carousel-next {
   background-color: transparent;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.7rem;
   height: 2.7rem;
}

.carousel-prev i,
.carousel-next i {
   color: var(--white-color);
   font-size: 1.5rem;
}

.carousel-pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   margin-top: 1rem;
}

.carousel-pagination-item {
   background-color: rgba(0 0 0 / .07);
   border-radius: 50%;
   border: 1px solid rgba(0 0 0 / .2);
   cursor: pointer;
   width: 8.5px;
   height: 8.5px;
   transition: var(--general-transition);
}

.carousel-pagination-item.carousel-pagination-item-active {
   background-color: var(--black-color);
   border-radius: .25rem;
   height: 7.5px;
   width: 16.5px;
}

.svyatyni-single-content-heading-container {
   display: flex;
   flex-direction: column;
   gap: .5rem;
   margin-bottom: 2.5rem;
}

.svyatyni-single-content-title {
   color: var(--title-color);
   font-size: var(--fs-news-single-title);
   font-family: var(--ff-heading);
}

.tab-btn-container {
   display: flex;
   flex-wrap: wrap;
   gap: clamp(0.5rem, 0.3768rem + 0.5258vw, 0.85rem);
   margin-bottom: clamp(2rem, 1.8239rem + 0.7512vw, 2.5rem);
}

.tab-btn {
   border: 1px solid rgba(0 0 0 / .3);
   border-radius: var(--btn-border-radius);
   color: var(--text-color);
   padding: clamp(0.35rem, 0.3324rem + 0.0751vw, 0.4rem) 
            clamp(0.55rem, 0.5148rem + 0.1502vw, 0.65rem);
   font-size: clamp(0.85rem, 0.8324rem + 0.0751vw, 0.9rem);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: clamp(10rem, 6.4789rem + 15.0235vw, 20rem);
}

.tab-btn.tabBtnActive {
   background-color: var(--btn-bg);
   border: 1px solid var(--btn-bg);
   color: var(--white-color);
}

.tab-content {
   display: none;
}

.tab-content.tabContentActive {
   display: block;
}

.tab-content-wrapper {
   display: flex;
   flex-direction: column;
   row-gap: 1.5rem;
}

.tab-content-image {
   border-radius: var(--border-radius);
   width: 100%;
   height: clamp(18.5rem, 11.8099rem + 28.5446vw, 37.5rem);
   object-fit: cover;
}