/* Animations */
@keyframes pls-rotatebox {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pls-scroll-down {
    0% { transform: translateY(0); }
    50% { transform: translateY(20px); }
    100% { transform: translateY(0); }
}

/* Wrapper */
.pls-images-box-container {
    position: relative;
    /* Ensure container has dimensions or fits content.
       The original .box-wrapper was absolute positioned.
       If we make this an element, it should probably be relative layout
       or the user places it in a column.
       Original .box-wrapper had position: absolute; left: 0; top: 0;
       This implies it sits BEHIND or ON TOP of .about-thumb.
       To replicate the layout (Main Image + Floating Boxes),
       we need a container that holds both.
    */
    display: block;
    width: 100%;
    min-height: 500px; /* Placeholder height */
}

/* Main Image (About Thumb) */
.pls-about-thumb {
    position: relative;
    z-index: 2;
    text-align: center; /* Center the main image */
}

.pls-about-thumb img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Default style */
}

/* Box Wrapper */
.pls-box-wrapper {
    position: absolute;
    width: 450px;
    height: 450px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center it relative to container if needed */
    z-index: 1;
    pointer-events: none; /* Let clicks pass through to main image if needed */
}

/* If user wants original positioning (left:0, top:0), we might need options.
   But generally, centering the effect around the image is safer for a modular element.
   However, original CSS was:
   .box-wrapper { position: absolute; width: 450px; height: 450px; left: 0; top: 0; }
   And .about-thumb was separate.
   I'll try to center the .pls-box-wrapper behind the .pls-about-thumb.
*/
.pls-box-wrapper {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 575px) {
    .pls-box-wrapper {
        display: none;
    }
}

.pls-box1,
.pls-box2,
.pls-box3 {
    border-radius: 50%;
    border: 1px solid var(--pls-box-border-color, #E2E2E2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1300px) {
    .pls-box1,
    .pls-box2,
    .pls-box3 {
        /* display: none; In original, they hide on small screens.
           We might want to keep them or respect this. */
        display: none;
    }
}

/* Box 1 */
.pls-box1 {
    width: 600px;
    height: 600px;
    animation: pls-rotatebox 50s linear infinite;
}

.pls-box1 .box-element {
    position: absolute;
    width: auto;
}
.pls-box1 .box-element img {
    max-width: 100%;
}

.pls-box1 .element-one { top: 20px; right: 100px; }
.pls-box1 .element-two { top: 150px; right: 15px; }
.pls-box1 .element-three { bottom: 10px; right: 150px; width: 6%; }
.pls-box1 .element-four { bottom: 200px; left: 0px; width: 6%; }

/* Box 2 */
.pls-box2 {
    width: 450px;
    height: 450px;
    animation: pls-rotatebox 60s linear infinite;
}

.pls-box2 .box-element {
    position: absolute;
}

.pls-box2 .element-five { bottom: 0px; right: 150px; }
.pls-box2 .element-six { top: 100px; right: 10px; }

/* Box 3 */
.pls-box3 {
    width: 300px;
    height: 300px;
    border: 1px solid var(--pls-box-border-color, #E2E2E2);
}

/* Main Image Elements (if any) */
/* The user didn't explicitly ask for the 'scroll-down' elements of about-thumb,
   but they are part of the 'about-thumb' style in original CSS.
   I'll assume we focus on the boxes for now unless requested.
*/