@font-face {
font-family: 'Catchy Mager';
font-style: normal;
font-weight: 400;
src: local('Catchy Mager'), url('f/Catchy Mager.woff') format('woff');
}

html {
scrollbar-gutter: stable;
}

body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
background-color: #efebe5;
color: #623e2a;
}

.video-container {
position: relative;
height: 100vh;
overflow: hidden;
width: 100%;
}

.video-container video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -65%);
object-fit: cover;
}

hr {
opacity: 1;
height: 2px;
border: 2px solid #e5dccf;
background-color: #e5dccf;
}

a, .link {
color: #623e2a;
text-decoration: none;
}

a:hover {
border-bottom: 2px solid #e5dccf;
}

.overlay-text {
font-size: clamp(3rem, 16vw, 8rem);
text-align: center;
font-family: 'Catchy Mager', sans-serif;
color: white;
line-height: 70%;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.subheader {
font-family: 'Catchy Mager', sans-serif;
font-size: 2.5rem;
text-align: center;
}

.floating-top-right {
position: fixed;
top: 0.6rem;
right: 1.5rem;
z-index: 1050;
animation: slideInRight 0.8s ease-out forwards;
animation-delay: 2s;
opacity: 0;
}

.btn-custom {
background-color: #e2d9cb;
color: #333;
font-weight: bold;
border: 1px solid white;
border-radius: 15px;
padding: 8px 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-custom:hover {
border: 2px solid white;
background-color: #d3c8b8;
transform: scale(1.05);
color: #222;
}

@keyframes slideInRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

.swiper {
width: 100%;
height: auto;
}

.thumbnail-container {
height: auto;
overflow: hidden;
}

.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper-pagination {
position: relative;
margin-top: -20px;
text-align: center;
}

.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: white;
opacity: 0.5;
margin: 0 4px;
border-radius: 50%;
display: inline-block;
transition: opacity 0.3s;
}

.swiper-pagination-bullet-active {
opacity: 1;
}

#viewer img {
width: 100%;
height: 100%;
object-fit: contain;
}

.viewer-swiper {
height: 100%;
}

.overlay-text span {
display: block;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1s ease-out forwards;
}

.overlay-text span:nth-child(1) {
animation-delay: 0.3s;
}

.overlay-text span:nth-child(2) {
animation-delay: 0.6s;
}

.overlay-text span:nth-child(3) {
animation-delay: 0.9s;
}

.animate-text {
display: block;
opacity: 0;
transform: translateY(20px);
}

.animate-text.visible {
animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

.animate-right {
opacity: 0;
transform: translateX(40px);
}

.animate-right.visible {
animation: fadeInLeft 1s ease-out forwards;
}

@keyframes fadeInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}

.menu-toggle {
width: 28px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: none;
border: none;
padding: 0;
z-index: 1051;
opacity: 0.5;
}

.menu-toggle .bar {
height: 3px;
width: 100%;
background-color: #623e2a;
transition: 0.3s;
border-radius: 2px;
box-shadow: 0 0 1px white, 0 0 2px white, 0 0 4px white;
}

.menu-toggle:hover {
opacity: 1;
}

.menu-toggle.open .bar:nth-child(1) {
transform: rotate(45deg) translateY(10px);
}

.menu-toggle.open .bar:nth-child(2) {
opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
transform: rotate(-45deg) translateY(-10px);
}

.side-menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: auto;
background-color: #623e2a;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1050;
opacity: 0.9;
border-right: 2px solid #e5dccf;
}

.side-menu.open {
transform: translateX(0);
}

.nav-link:hover {
transform: translateX(7px);
transition: transform 0.5s ease;
border: none;
}