#titlebox {
align-items: center; /* vertical centering */
}

#boxcontainer {
width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fafafa;
padding-top: 112px;
padding-bottom: 10px;
flex: 1; /* ← THIS IS THE MAGIC */
min-height: 90%;
}

@media screen and (max-width:1142px){
#boxcontainer {
width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fafafa;
padding-top: 152px;
padding-bottom: 10px;
flex: 1; /* ← THIS IS THE MAGIC */
min-height: 90%;
}} /* THIS MEDIA QUERRY FOR TABLET STYLE MENU*/

.textcontainer {
position: relative;
width: 600px;
height: auto;
box-sizing: border-box;
padding-bottom:0px;
}

#imagecontainer1 {
position: relative;
width: 600px;
height: auto;
box-sizing: border-box;
padding-bottom: 24px;
}

#imagecontainer2 {
position: relative;
width: 900px;
height: auto;
box-sizing: border-box;
padding-bottom: 24px;
}

.slideshow-container {
position: relative; /* This is the anchor for the dots */
max-width: 1000px;
width: 100%;
margin-top:24px;
margin-bottom:0px;
background: transparent;
}

.slidescaption {
position: relative;
margin: auto;
margin-top: 4px;
margin-bottom: 12px;
width: 600px;
height: auto;
background-color: transparent;
box-sizing: border-box;
z-index: 5;
text-align: center;
}

.slide {
position: relative;
}

.slide img {
width: 100%;
display: block;
}

.boxnext {
position: absolute;
top: 294px;
transform: translateY(-50%);
width: 56px;
height: 120px;
right: -56px;
background-color: #434343;
border-top: 3px solid #1c1c1c;
border-right: 3px solid #1c1c1c;
border-bottom: 3px solid #1c1c1c;
border-left: 0px solid #1c1c1c;
border-radius: 0px 12px 12px 0px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
z-index: ;
transition: background-color 0.3s ease, color 0.3s ease;
}

.boxnext:hover {
background-color: #1c1c1c;
}

.boxnext:visited {
background-color: #434343;
}

@media screen and (max-width:1142px){
.boxnext {
position: absolute;
top: 300px;
transform: translateY(-50%);
width: 36px;
height: 96px;
right: 0px;
background-color: #434343;
border-top: 0px solid #1c1c1c;
border-right: 0px solid #1c1c1c;
border-bottom: 0px solid #1c1c1c;
border-left: 0px solid #1c1c1c;
border-radius: 24px 0px 0px 24px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
z-index: ;
transition: background-color 0.3s ease, color 0.3s ease;
}}

.boxprevious {
position: absolute;
top: 294px;
transform: translateY(-50%);
width: 56px;
height: 120px;
left: -56px;
background-color: #434343;
border-top: 3px solid #1c1c1c;
border-right: 0px solid #1c1c1c;
border-bottom: 3px solid #1c1c1c;
border-left: 3px solid #1c1c1c;
border-radius: 12px 0px 0px 12px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
font-family:Playfair Display,sans-serif;
font-size: 32pt;
background-color: #434343;
z-index: ;
transition: background-color 0.3s ease, color 0.3s ease;
}

@media screen and (max-width:1142px){
.boxprevious {
position: absolute;
top: 300px;
transform: translateY(-50%);
width: 36px;
height: 96px;
left: 0px;
background-color: #434343;
border-top: 0px solid #1c1c1c;
border-right: 0px solid #1c1c1c;
border-bottom: 0px solid #1c1c1c;
border-left: 0px solid #1c1c1c;
border-radius: 0px 24px 24px 0px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
font-family:Playfair Display,sans-serif;
font-size: 32pt;
color: #7f7f7f;
z-index: ;
transition: background-color 0.3s ease, color 0.3s ease;
}}

.boxprevious:hover {
background-color: #1c1c1c;
}

.boxprevious:visited {
background-color: #434343;
}

/* LIGHT DOTS OPTION */
.dotlight{
position: relative;
height:12px;
width:12px;
margin:4px;
margin-top:0px;
margin-bottom:0px;
border:2px solid #fafafa;
border-radius:50%;
display:inline-block;
transition:background-color 0.2s ease-in-out,transform 0.2s ease;cursor:pointer}

.dotlight:hover{background-color:#1c1c1c}

.dotlight.active {
background-color: #fafafa;
}

/* DARK DOTS OPTION */
.dotdark{
position: relative;
height:8px;
width:8px;
margin:4px;
margin-top:0px;
margin-bottom:24px;
border:2px solid #434343;
border-radius:50%;
display:inline-block;
transition:background-color 0.2s ease-in-out,transform 0.2s ease;cursor:pointer}

.dotdark:hover{background-color:#1c1c1c}

.dotdark.active {
background-color: #7f7f7f;
}

.dots-container {
position: relative; /* Keeps dots in one fixed spot relative to the container */
top: 100%;
width: 100%;
text-align: center;
z-index: 10; /* Ensures dots stay on top of images */
margin-top: 0px; /* Remove margins that cause shifting */
margin-bottom: 0px;
background-color: transparent;
}

.divider {
border: none;
border-top: 1pt solid #b2b2b2;
margin: 40px 0;
width: 300px;
}

.footer {
margin-top: auto;
}

.footer {
flex-shrink: 0; /* footer stays at bottom */
}

.footer{flex-shrink: 0;background-color: #404040; display:flex;justify-content:center;flex-direction:column;margin-bottom:0; padding-top:40px; padding-bottom:16px}.footer-icons{display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;gap:6px}.footer-text{display:flex;align-items:center;text-align:center}

#wrapper {
flex: 1 0 auto; /* wrapper takes remaining space */
}

main {
flex: 1;
display: flex;
flex-direction: column;
}

html, body {
height: 100%;
margin: 0;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
background-repeat: no-repeat;
background-position: 100% 0;
background-color: ;
}

#linkbox{display:inline-block;position:relative; width:600px; height:116px;background:transparent;transition:0.3s; border: 0px; margin-top: 36px; margin-bottom: 36px}

.linkboxtext {border-radius: 0px;background-color: lightpink;border: 2px solid #1c1c1c;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);box-shadow: 3px 3px 0px 0px #1c1c1c;transition: 0.3s;width: 256px;height: 110px;display: flex; justify-content: center; align-items: center;}

.linkboxtext:hover {background-color: #ec98a5;}