#SGColure {
    position: relative; /* Relative positioning to keep it within the authBackgroundSection */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: auto; /* Ensure interactions pass through */
}

.SGColureImage {
    width: 600px;
    height: 600px;
    position: absolute;
    /*transform: translate(-50%, -50%); !* Center the image *!*/
    transform-origin: center; /* Ensure it rotates around its center */
    pointer-events: none; /* Ensure interactions pass through */
    opacity: 0; /* Start with images hidden */
}

/******Layer 1******/
#image1
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}

#image2
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image3
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
#image4
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image5
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
#image6
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image7
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
#image8
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
/*[end] Layer 1*/
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/******Layer 2******/
#image9
{
    animation: slowRotate360CounterClockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image10
{
    animation: slowRotate360CounterClockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
/*[end] Layer 2*/
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/******Layer 3******/
#image11
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image12
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
/*[end] Layer 3*/
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/******Layer 4******/
#image13
{
    animation: slowRotate360CounterClockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image14
{
    animation: slowRotate360CounterClockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
/*[end] Layer 4*/
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/******Layer 5******/
#image15
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 1s forwards 0s; /* Apply the rotation animation */
}
#image16
{
    animation: slowRotate360Clockwise 60s linear infinite, fadeIn 2s forwards 0s; /* Apply the rotation animation */
}
#authLogo {
    width: 111px;
    height: 100px;
    position: absolute;
    /*transform: translate(-50%, -50%); !* Center the image *!*/
    transform-origin: center; /* Ensure it rotates around its center */
    pointer-events: none; /* Ensure interactions pass through */
    opacity: 0; /* Start with images hidden */
    animation: fadeIn 1s forwards 1s; /* Apply the rotation animation */
}
/*[end] Layer 5*/
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/******Layer 6******/
#image17
{
    visibility: hidden;
}
#image18
{
    visibility: hidden;
}
#image19 {
    animation: rotateTranslateFadeOutLeft 3s linear forwards;
}

#image20 {
    animation: rotateTranslateFadeOutRight 3s linear forwards;
}
/*[end] Layer 6*/
/*-------------------------------------------------*/
/*#################################################*/
/*################ SECTION 2 [END] ################*/
/*#################################################*/

/* Define the keyframes for the rotation animation */
@keyframes slowRotate360Clockwise {
    0% {

        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Define the keyframes for the counter-clockwise rotation animation */
@keyframes slowRotate360CounterClockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* Define the keyframes for the rotation animation */
@keyframes slowRotate90Clockwise {
    0% {

        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}

/* Define the keyframes for the counter-clockwise rotation animation */
@keyframes slowRotate90CounterClockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}

/* Define the keyframes for the fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Define the keyframes for the fade-out animation */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Define the keyframes for rotating, translating, and fading out (right direction) */
@keyframes rotateTranslateFadeOutRight {
    0% {
        transform: rotate(0deg) translateX(0);
        opacity: 1;
    }
    25% {
        transform: rotate(-90deg) translateX(0);
        opacity: 1;
    }
    50% {
        transform: rotate(-90deg) translateY(100px);
        opacity: 0;
    }
    100% {
        transform: rotate(-90deg) translateY(100px);
        opacity: 0;
    }
}

/* Define the keyframes for rotating, translating, and fading out (left direction) */
@keyframes rotateTranslateFadeOutLeft {
    0% {
        transform: rotate(0deg) translateX(0);
        opacity: 1;
    }
    25% {
        transform: rotate(-90deg) translateX(0);
        opacity: 1;
    }
    50% {
        transform: rotate(-90deg) translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: rotate(-90deg) translateY(-100px);
        opacity: 0;
    }
}

/* Define the keyframes for the fade-in and fade-out animation */
@keyframes heartBeatFade {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}