.circular-animation {
    margin: 0;
    height: 80vh; /* Changed from 200vh to 100vh */
    display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: -30px;
}

.circular-animation .cups {
    text-align: center;
}

.circle-container {
    position: relative;
    width: 100vw;
    height: 50vw;
    margin: 0 auto;
    overflow: hidden;
}

.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.circle-div {
    position: absolute;
    border-radius: 0;
    /* Common background properties for the image */
    background-image: url('../images/tumbler.png'); /* Set the image as background */
    background-size: contain; /* Ensure the entire image fits within the div */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center center; /* Center the image within the div */
    transition: transform 1s ease; /* Only transform transition here, as background color is removed */
    opacity: 1;
    top: 50%;
    left: 50%;
    /* Initial state: all divs are centered and scaled according to their specific size */
    transform-origin: center center; /* Ensure scaling happens from the center */
}

/* Initial sizes for each div, making them progressively smaller and controlling scale */
.div1 {
    width: 30vw;
    height: 40vw;
    transform: translate(-50%, -50%) scale(0.725);
}

.div2 {
    width: 30vw;
    height: 40vw;
    transform: translate(-50%, -50%) scale(0.9);
}

.div3 {
    width: 30vw;
    height: 40vw;
    transform: translate(-50%, -50%) scale(1.075);
}

.div4 {
    width: 30vw;
    height: 40vw;
    transform: translate(-50%, -50%) scale(1.25);
}

/* All divs will be the same size in the active state and positioned horizontally */
.active .div1 {
    /* Centered, then moved left by 45vw (half of 90vw total spread) */
    transform: translate(calc(-50% - 37.5vw), -50%) scale(1);
    opacity: 1;
}

.active .div2 {
    /* Centered, then moved left by 12.5vw */
    transform: translate(calc(-50% - 12.5vw), -50%) scale(1);
    opacity: 1;
}

.active .div3 {
    /* Centered, then moved right by 12.5vw */
    transform: translate(calc(-50% + 12.5vw), -50%) scale(1);
    opacity: 1;
}

.active .div4 {
    /* Centered, then moved right by 37.5vw */
    transform: translate(calc(-50% + 37.5vw), -50%) scale(1);
    opacity: 1;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: portrait) {
	
.circular-animation {
    height: 35vh;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: landscape) {
	
.circular-animation {
    height: 90vh;
}
}