@keyframes scaleUp {
from {
height: 300px;
}
to {
height:140%;
}

}

.desktopframe {
display:flex;
}

.mobileframe {
display:none;
}

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

.unique {
background: #ECE50F;
background: linear-gradient(to bottom right, #FCCD15 15%, #FF8C00 25%, #FF1E00 30%, #2158FF 50%);


-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

#large-div {
position: relative;
height: 200vh; /* A large height for the div */
background: #f4f4f4; /* Light background color */
width: 100%;
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%, rgba(242,225,255,1) 100%);
border-radius: 20px;
}

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

#video-scroll {
flex: 1 1 0;
width: 100%; /* Matches the width of the flex container */
height: 80vh; /* Set a consistent height for the canvas */
border-radius: 20px;
display: block;

}

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

.text.active {
opacity: 1;
transform: translateY(0); /* Move into place */
}

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


.image {
animation: scaleUp 1s forwards;
position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;bottom:-10%;aspect-ratio:1/1.2;height:140%;min-height:200px !important;max-height: 500px !important;
}

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

.background {
height:300px;
}

@keyframes scaleUp {
from {
height: 300px;
}
to {
height:140%;
}

}

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

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

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


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

    @keyframes scaleUp {
from {
height: 200px;
}
to {
height:140%;
}
}

.desktopframe {
display:none;
}
.mobileframe {
display:flex;
}
#video-scroll {
width: 100%; /* Ensure canvas takes full width in column layout */
flex: 2 1 0;
min-height: 0;
}

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

.pagetitle {
font-size: 50px;
}

.paintingtitle {
font-size:23px;
}
.background {
height:200px;
}

.image {
bottom: -50px;
}


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