:root {
--primary-color: #FBF9F8; 
--primary-color-rgb: 251, 249, 248; 
--primary-color-inverse: #3B3A38; 
--secondary-color: #646362;
--secondary-color-inverse: #FFFFFF;
--third-color: #DEDBD6;
--third-color-inverse: #3B3A38;
--fourth-color: #00CEC9;
--fourth-color-inverse: #FFFFFF;
--heading-color: #273c75;
--primary-font-set: proxima-nova, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
html, body {
background-color: var(--primary-color);
background-color: rgb(237, 242, 247);
font-family: var(--primary-font-set);
color: var(--primary-color-inverse);
}

.swiper { display: none; }

.close-btn {
display: block;
position: absolute;
right: 0;
width: 48px;
height: 48px;
background-color: transparent;
z-index: 1000;
}
.arrow {
position: absolute;
height: 3px;
width: 25px;
background-color: rgba(255,255,255,1);
top: 24px;
left: 11px;
}

.a1 { transform: rotate(45deg); }
.a2 { transform: rotate(-45deg); }

.swiper.is-active {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(15, 23, 42, 0.9);
z-index: 1000000;
}

.swiper-slide img {
width: 94%;
max-width: 1000px;
margin: 0 3%;
}

.swiper-container {
width: 90%;
width: calc(100vw - 100px);
}

@media  screen and (max-width:1023px) {
.swiper-container {
max-width:100%;
width: 100vw;
}
}
.swiper-lazy {
display: none;
}
.swiper-lazy.swiper-lazy-loaded {
display: block;
}
.swiper-button.swiper-button-prev,
.swiper-button.swiper-button-next{
color: rgba(255,255,255,0.5);
}

.swiper-container {
max-width: 100%;
max-height: 80%;
width: 100vw;
height: 90vh;
}
.swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.swiper-slide p {
margin-top: 1rem;
color: white;
text-align: center;
font-size: 0.9rem;
}