.desktopframe {
display:flex;
}

.mobileframe {
display:none;
}
.boldtitle {
    font-size:30px;font-weight:700;
}
.secondtitle { 
    font-size:25px;font-weight:500;
}

@keyframes scaleUp {
from {
width: 300px;
height: 400px;
}
to {
width:calc(100vh / 2);
height:calc(100vh / 2 * 1.2);
}

}


.image-container {
margin-top: 50px;
width: 100%;
position: relative;
aspect-ratio: 9 / 5;
border-radius: 20px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
max-width:600px;

}

.animated-image {
position: absolute;
width: 50%;
max-width: 400px;
height: 100%;
object-fit: cover;
border-radius: 20px;
transition: transform 1s ease-out;
}

.animated-image.animate {
animation: splitAnimation 0.5s ease-out forwards;
}


@keyframes splitAnimation {
0% {
transform: translateX(0); /* Start at the center */
}
100% {
transform: translateX(calc(50% + 5px)); /* Move outward */ /* Reset to flex behavior after animation */
}
}

.animated-image:first-child.animate {
animation-delay: 0s;
animation-name: splitLeftAnimation; /* Custom animation for left image */
}

@keyframes splitLeftAnimation {
0% {
transform: translateX(0); /* Start at the center */
}
100% {
transform: translateX(calc(-50% - 5px)); /* Move outward to the left *//* Reset to flex behavior after animation */
}
}



.descriptiongroup {
gap:50px;padding:50px;
}

#large-div {
position: relative;
height: 200vh; /* A large height for the div */
background: #f4f4f4; /* Light background color */
width: 90%;
border-radius:20px;

}

#content-wrapper {
display: flex;
justify-content: space-evenly; /* Distribute items evenly with equal space */
align-items: center; /* Center items vertically */
height: calc(100vh - 80px); /* Full viewport height minus 80px */
width: 100%; /* Full width */
position: sticky; /* Makes the wrapper sticky during scroll */
top: 80px; /* Sticks to the top of the viewport */
box-sizing: border-box; /* Include padding/border in dimensions */
background: linear-gradient(145deg, rgba(244,244,244,1) 50%, #b0d1b7 100%);
border-radius: 20px;
padding:5%;
}

.description {
font-size: clamp(14px, 3.9vw, 20px);
}

.pagetitle {
font-size:71px;
}

.paintingtitle {
font-size:27px;
}
#text-container-1,
#text-container-2 {
flex: 1 1 0;
display: flex; /* Allow content inside to be aligned */
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
position: relative; /* Set relative position for children alignment */
max-width:500px
}
#text-container-2 {
display:none;
}

#video-settings {
width:100%;
flex: 1 1 0;
display:flex;
justify-content:center;
align-items:center;
}
#video-scroll {
height: 80vh; /* Set a consistent height for the canvas */
border-radius: 20px;
display: block;
aspect-ratio:1/1.7;

}

.text {
position: relative; /* Position relative to the text container */
font-size: 23px;
opacity: 0;
transform: translateY(20px); /* Start off slightly below */
transition: opacity 0.5s ease, transform 0.5s ease;
text-align: center; /* Align text inside the container */
}

.text-inner {
padding: 20px; /* Add padding inside the wrapper */
box-sizing: border-box; /* Include padding within the inner wrapper's dimensions */
width: 100%; /* Optional: Match parent width */
text-align: center; /* Align text */
display:flex;
justify-content:center;
align-items:center;
}

#text1 {
opacity: 1;
transform: translateY(0); /* Move into place */
}

#text1.hidden {
opacity: 0;
transform: translateY(20px);
}
#text2 {
opacity: 1;
transform: translateY(0); /* Move out above */
}

#text2.hidden {
opacity: 0;
transform: translateY(-20px); /* Move out above */
}

.backgroundimage {
max-width:1200px;width:100%;height:100%;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;border-radius:20px;object-fit:cover;box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.2);
}

.background {
position:relative;width:100%;height:500px;margin-top:50px
}


.image {
width:300px;height:400px;animation: scaleUp 1s forwards;
position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;bottom:-70px;
}

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

.descriptiongroup {
gap:10px;
align-items:center;
justify-content:center;
flex-direction:column;
}
.description {
text-align:center;
}
.descriptiontitle {
text-align:center;
}

.image {
bottom:-70px;
}

@keyframes scaleUp {
from {
width: 200px;
height: 300px;
}
to {
width: 300px;
height: 400px;
}

}

#content-wrapper {
flex-direction: column; /* Stack items vertically */
}

#video-settings {
flex: 3 1 0;
}
#video-scroll {
height: 100%; /* Ensure canvas takes full width in column layout */
min-height: 0;
max-width:500px;
aspect-ratio:1/2;
}

.text-inner {
height:100%;
}
.text {
font-size: clamp(14px, 3.9vw, 18px);
}
#text-container-1,
#text-container-2 {
min-height: 0;flex:none;height:200px
}


}
@media only screen and (max-width: 700px) {

@keyframes scaleUp {
from {
width: 100px;
height: 200px;
}
to {
width: 230px;
height: 350px;
}
}

.desktopframe {
display:none;
}
.mobileframe {
display:flex;
}

.mainapp {
margin-left:10px;margin-right:10px;
}
.pagetitle, .paintingtitle {
text-align:center;
}

.pagetitle {
font-size: 50px;
}

.paintingtitle {
font-size:23px;
}

.image {
bottom: -50px;
}


    .boldtitle {
        font-size:15px;
    }
    .secondtitle {
        font-size:15px;
    }
}
@media only screen and (max-width: 300px) {

}