/*LARGER MOBILE LAYOUT SIZES STARTS HERE*/

@media screen and (min-width:901px){
.navbar{overflow:hidden;background-color:;position:fixed;height:36px;top:0;width:100%;z-index:1;margin-top:0;margin-left:0;padding:0;border:none}

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

#boxcontainer {
flex: 1;
width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fafafa;
padding-top: 152px;
padding-bottom: 48px;
}

.textcontainer {
position: relative;
width: 600px;
height: auto;
box-sizing: border-box;
padding-bottom:20px;
background-color:#fafafa;
}

#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: auto;
margin-top:24px;
margin-bottom:0px;
}

.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: 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;
}

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

.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;
z-index: ;
transition: background-color 0.3s ease, color 0.3s ease;
}

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

.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;
max-width: 300px;
width: 60%;
}

.footer{flex-shrink: 0;background-color: #404040; display:flex;justify-content:center;flex-direction:column;margin-bottom:0; padding-left:16px; padding-right:16px; padding-top:24px; padding-bottom:2px}.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}

.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}

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

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

#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;}

}

/*LARGER MOBILE LAYOUT SIZES ENDS HERE*/

/*SMALLER MOBILE LAYOUT SIZES STARTS HERE*/

@media screen and (max-width:900px) {
.navbar{overflow:hidden;background-color:transparent;position:fixed;height:36px;top:0;width:100%;z-index:1;margin-top:0;margin-left:0;padding:0;border:none}

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

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

.textcontainer {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding-left: 80px;
padding-right: 80px;
padding-bottom:20px;
background-color:#fafafa;
}

#imagecontainer1 {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding-left: 80px;
padding-right: 80px;
padding-bottom: 24px;
}

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

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

.slidescaption {
position: relative;
display: block;
margin-left:80px;
margin-right:80px;
margin-top: 0px;
margin-bottom: 7px;
width: auto;
height: auto; /* Allows growth */
background-color: transparent; /* Black as requested */
padding: 0;
text-align: center;
}

.slide {
position: relative;
}

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

.image-wrapper {
position: relative;
}

.boxnext {
position: absolute;
top: 50%; /* Centered vertically on the image-wrapper */
transform: translateY(-50%);
width: 32px;
height: 96px;
right: 0px;
background-color: #434343;
border-top: 0px solid #434343;
border-right: 0px solid #fafafa;
border-bottom: 0px solid #434343;
border-left: 0px solid #434343;
border-radius: 24px 0px 0px 24px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s ease, color 0.3s ease;
}

.boxnext:hover {
background-color: #b2b2b2;
}

.boxprevious {
position: absolute;
top: 50%; /* Centered vertically on the image-wrapper */
transform: translateY(-50%);
width: 32px;
height: 96px;
left: 0px;
background-color: #434343;
border-top: 0px solid #434343;
border-right: 0px solid #434343;
border-bottom: 0px solid #434343;
border-radius: 0px 24px 24px 0px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s ease, color 0.3s ease;
}

.boxprevious:hover {
background-color: #b2b2b2;
}

.dotdark{
position: relative;
height:8px;
width:8px;
margin:4px;
margin-top:;
margin-bottom:0px;
border:1px solid #434343;
border:1px 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:#7f7f7f}

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

.dots-container {
position: relative;
top: 50%; /* distance from bottom of image */
left: 0;
width: 100%;
text-align: center;
z-index: 20;
background: transparent; /* remove purple */
margin-bottom: 28px;
}

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

.footer{flex-shrink: 0;background-color: #404040; display:flex;justify-content:center;flex-direction:column;margin-bottom:0; padding-left:16px; padding-right:16px; padding-top:24px; padding-bottom:2px}
.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}

body{display:flex;flex-direction:column;min-height:100vh}

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

body{background-repeat:no-repeat;background-position:100% 0;background-color:#fafafa;width:100%;height:100%;margin:0;overflow-x:hidden;overflow-y:scroll}

@media screen and (max-width:620px){.boxprevious{
position: absolute;
top: 50%; /* Centered vertically on the image-wrapper */
transform: translateY(-50%);
width: 28px;
height: 96px;
left: 0px;
background-color: #434343;
border-top: 0px solid #434343;
border-right: 0px solid #434343;
border-bottom: 0px solid #434343;
border-left: 0px solid #fafafa;
border-radius: 0px 24px 24px 0px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s ease, color 0.3s ease;
}

.boxnext {
position: absolute;
top: 50%; /* Centered vertically on the image-wrapper */
transform: translateY(-50%);
width: 28px;
height: 96px;
right: 0px;
background-color: #434343;
border-top: 0px solid #434343;
border-right: 0px solid #fafafa;
border-bottom: 0px solid #434343;
border-left: 0px solid #434343;
border-radius: 24px 0px 0px 24px;
box-shadow:0px 0px 0px 0px #1c1c1c;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s ease, color 0.3s ease;
}

.boxnext:hover,
.boxprevious:hover {
background-color: #b2b2b2;
}
}

@media screen and (max-width:717px){
.textcontainer {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding-left: 80px;
padding-right: 80px;
padding-bottom:20px;
background-color:#fafafa;
}}

#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;}

}

/*SMALLER MOBILE LAYOUT SIZES ENDS HERE*/

/*SMALLEST MOBILE LAYOUT SIZES STARTS HERE*/

@media screen and (max-width: 522px) {

.navbar {
overflow: hidden;
/* background-color:; ❌ removed empty value */
position: fixed;
height: 36px;
top: 0;
width: 100%;
z-index: 1;
margin: 0;
padding: 0;
border: none;
}

#titlebox {
display: flex; /* needed for align-items to work */
align-items: center;
}

#boxcontainer {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fafafa;
padding-top: 42px;
padding-bottom: 48px;
flex: 1;
height: auto;
}

.textcontainer {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 16px 20px 16px;
background-color: #fafafa;
}

#imagecontainer1 {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 16px 24px 16px;
}

#imagecontainer2 {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 0px 24px 0px;
}

.slideshow-container {
position: relative;
max-width: 522px;
width: 100%;
margin: auto;
margin-top:24px;
margin-bottom:0px;
}

.slidescaption {
display: block;
margin: 6px 16px 4px 16px;
text-align: center;
}

.slide {
position: relative;
}

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

.image-wrapper {
position: relative;
}

.boxnext {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 86px;
right: 0;
background-color: #434343;
border: 0px solid #434343;
border-right: 0;
border-radius: 24px 0 0 24px;
cursor: pointer;
/* z-index: ; ❌ removed */
transition: background-color 0.3s ease;
}

.boxprevious {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 86px;
left: 0;
background-color: #434343;
border: 0px solid #434343;
border-left: 0;
border-radius: 0 24px 24px 0;
cursor: pointer;
/* z-index: ; ❌ removed */
transition: background-color 0.3s ease;
}

.boxnext:hover,
.boxprevious:hover {
background-color: #b2b2b2;
}

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

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

.dots-container {
width: 100%;
text-align: center;
margin-bottom: 28px;
}

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

.footer {
flex-shrink: 0;
background-color: #404040;
display: flex;
justify-content: center;
flex-direction: column;
padding: 24px 16px 2px 16px;
}

.footer-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}

.footer-text {
display: flex;
align-items: center;
text-align: center;
}

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

body {
background-repeat: no-repeat;
background-position: 100% 0;
background-color: #fafafa;
min-width: 320px;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
min-height: 200vh;
display: flex;
flex-direction: column;
}

#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;}

}

/*SMALLEST MOBILE LAYOUT SIZES ENDS HERE*/