#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}

#loaderGif {
width: 100px;
height: auto;
}

[class^=swiper-button-] {
transition: all 0.3s ease;
}

.swiper-slide {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

#wrapper {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}

.swiper-container {
width: 80%;
height: 100vh;
float: left;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-container.nav-slider {
width: 100%;
height: 20vh;
padding-top: 5px;
position: absolute;
bottom: 0;
left: 0;
}
.swiper-container.nav-slider .swiper-slide {
width: auto;
opacity: 0.4;
transition: opacity 0.3s ease;
cursor: pointer;
}
.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
opacity: 1;
}
.swiper-container.nav-slider .swiper-slide .content {
width: 100%;
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.swiper-container.loading {
opacity: 0;
visibility: hidden;
}

.swiper-slide {
position: relative;
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0.4;
background-color: transparent;
z-index: 1;
}
.slide-bgimg::before {
  content: "";
  position: absolute;
  inset: 0;  
  background-color: var(--slider-color-variable);
  pointer-events: none;  
  z-index: 1;            
}
.swiper-slide .slide-bgimg {
position: relative;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
z-index: 0;
}
.swiper-slide .entity-img {
display: none;
}

.swiper-slide .content .caption {
display: block;
font-size: 1em;
line-height: 1.4;
transform: translateX(50px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.7s ease;
}[class^=swiper-button-] {
transition: all 0.3s ease;
}

.swiper-slide {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

#wrapper {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}

.swiper-container {
width: 80%;
height: 100vh;
float: left;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-container.nav-slider {
width: 100%;
height: 20vh;
padding-top: 5px;
position: absolute;
bottom: 0;
left: 0;
}
.swiper-container.nav-slider .swiper-slide {
width: auto;
opacity: 0.4;
transition: opacity 0.3s ease;
cursor: pointer;
}
.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
opacity: 1;
}
.swiper-container.nav-slider .swiper-slide .content {
width: 100%;
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.swiper-container.loading {
opacity: 0;
visibility: hidden;
}

.swiper-slide {
overflow: hidden;
cursor: auto;
}
.swiper-slide .entity-img {
display: none;
}
.swiper-slide .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
z-index: 2;
color: #fff;
}
.swiper-slide .content .caption {
display: block;
font-size: 1em;
line-height: 1.4;
transform: translateX(50px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.7s ease;
}
.swiper-slide .content .caption.show {
transform: translateX(0);
opacity: 1;
}

[class^=swiper-button-] {
width: 44px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.swiper-button-prev {
transform: translateX(50px);
}

.swiper-button-next {
transform: translateX(-50px);
}

.swiper-container.main-slider {
width: 100%;
height: 80vh; /* Main slider takes up 80% of the height */
position: relative;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-slide .content .caption.show {
transform: translateX(0);
opacity: 1;
}

.swiper-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
transition: background-color 0.3s ease;
}

.swiper-slide.swiper-slide-active {
opacity: 1;
background-color: transparent;
transition: opacity 0.3s ease, background-color 0.3s ease;
}

.swiper-slide.swiper-slide-active::before {
background-color: transparent;
transition: none;
}

.swiper-slide:not(.swiper-slide-active):hover {
opacity: 0.6;
transition: opacity 0.3s ease;
}

[class^=swiper-button-] {
width: 44px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.swiper-button-prev {
transform: translateX(50px);
}

.swiper-button-next {
transform: translateX(-50px);
}

.swiper-container.main-slider {
width: 100%;
height: 80vh;
position: relative;
transition: opacity 0.6s ease, transform 0.3s ease;
}

.title-link {
text-decoration: none;
color:  var(--button-color-alt) !important;
}

.title.no-link {
color: #a9a8a8 !important;
}

.title {
font-size: 3.6em;
font-weight: bold;
margin-bottom: 20px;
-webkit-text-stroke: 1px rgb(255, 255, 255);
}

.explore-link {
display: inline-block;
padding: 10px 20px;
font-size: 1.2em;
font-weight: bold;
color:  var(--button-color-alt);
background-color: white;
border-radius: 20px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.explore-link:hover {
background-color:  var(--button-color-alt);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
color: #fff;
}

.no-link ~ .explore-link {
display: none;
}