@import url('https://fonts.googleapis.com/css2?family=Jersey+25&family=Konkhmer+Sleokchher&family=Kosugi&family=Rock+3D&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    margin: 0; 
}


header {
    height: 5vw;
    background-color: #FDFDFC;
    display: flex;
    align-items: center;
    justify-content: center; 
    font-family: "Konkhmer Sleokchher";
    position: sticky; 
    top: 0;
    z-index: 1000; 
}


header h5 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    font-size: 1em;
}


header img {
    position: absolute;
    left: 11px; 
    margin: 0;
    white-space: nowrap;
    max-height: 65%;
    font-size: .5em; 
}


header h6 {
   position: absolute;
   right: 2%;
    margin: 0;

    
}


header h6:hover {
    color: #355C42;
    transform: scale(1.05);
}


header h6 a {
    text-decoration: none; 
    color: inherit; 
}

header h6 a:visited {
    color: inherit; 
}



#section-1 {
    background-color: rgb(196, 215, 216);
    position: relative;  
    width: 100vw;
    height: 100vw; 
    display: flex;
    justify-content: center;
    align-items: center;
}


#section-1 img {
    position: absolute;
    width: 50vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    transition: transform 0.5s ease-in-out;
}


#section-1 img[alt="Beach GIF"] {
    transform: translate(-5%, 4%) rotate(0deg) scale(.75);
    z-index: 0;
    top: 0;
}

#section-1 img[alt="p11"] {
    transform: translate(-50%, 31%) rotate(0deg) scale(1.75);
    z-index: 1;
    top: 0;
}

#section-1 img[alt="PUREGROUND"] {
    position: relative;
    transform: translate(-117%, -76%) rotate(0deg) scale(1.5);
    z-index: 2;
   
}


#section-2 {
    background-color: rgb(123, 176, 178);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    padding-bottom: 15%;
    width: 100vw; 
    position: relative;
}
#section-2 img {
    width: 90vw; 
}


#section-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: auto;
    position: relative; 
    background: none;
}

#section-3 img {
    width: 100vw;
    height: auto;
    display: block;
    z-index: 0
}


#section-3::after {
    content: '';
    position: absolute;
    width: 30vw; 
    height: 100%;
    background: #FDFDFC;
    top: 0;
    right: 0; 
    z-index: 1; 
}


#section-3 .text-container {
    position: absolute;
    width: 30vw;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    padding: 2rem; 
    box-sizing: border-box; 
    overflow: hidden; 
}


#section-3 .text-container p {
    position: absolute;
    padding: 2rem;
    color: black; 
    font-family: 'Kosugi', sans-serif;
    font-size: 1.85vw;
    text-align: center; 
    margin: 0;
    max-width: 100%; 
    word-wrap: break-word; 
}

#section-4 {
    background-color: rgb(123, 176, 178);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    height: 200vh;
    overflow: hidden;
}

#section-4::before {
    content: '';
    position: absolute;
    width: 11%; 
    height: 16%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;  
}

@keyframes rotate-center {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#section-4 img[alt="PUREGROUND 1"] {
    position: relative;
    z-index: 1;
    width: 26vw;
    max-width: 300px;
    animation: rotate-center 8s linear infinite; /* 8 seconds for one full rotation */
    transform-origin: center center; /* Ensures rotation around center point */
}

#section-4 img[alt="PUREGROUND 2"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 51%;
    max-width: 344px;
    z-index: 3;
}

#section-4 img[alt="PUREGROUND 4"] {
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 71vw;
    max-width: 446px;
    z-index: 3;
}

#section-4 img:not([alt="PUREGROUND 1"]):not([alt="PUREGROUND 2"]):not([alt="PUREGROUND 4"]) {
    z-index: 2;
    position: absolute;
    width: 43vw;
    max-width: 85%;
    transition: transform 0.5s ease-in-out;
    padding: 1%;
}

/* NORMAL STATE */
#section-4 img:nth-child(1) { transform: translate(-4%, -30%) rotate(-10deg) scale(1.1); }
#section-4 img:nth-child(2) { transform: translate(-37%, -30%) rotate(-10deg) scale(1.1); }
#section-4 img:nth-child(3) { transform: translate(31%, -40%) rotate(5deg) scale(1.2); }
#section-4 img:nth-child(4) { transform: translate(-25%, 10%) rotate(-7deg) scale(0.9); }
#section-4 img:nth-child(5) { transform: translate(7%, 20%) rotate(15deg) scale(1); }
#section-4 img:nth-child(6) { transform: translate(12%, 35%) rotate(-5deg) scale(1.1); }
#section-4 img:nth-child(7) { transform: translate(5%, -20%) rotate(3deg) scale(1.2); }
#section-4 img:nth-child(8) { transform: translate(-33%, -10%) rotate(-12deg) scale(1); }

/* HOVER TRANSFORM :) */
#section-4:hover img:nth-child(1) { transform: translate(-120%, -130%) rotate(-20deg) scale(1.1); }
#section-4:hover img:nth-child(2) { transform: translate(-120%, -130%) rotate(-20deg) scale(1.1); }
#section-4:hover img:nth-child(3) { transform: translate(115%, -140%) rotate(15deg) scale(1.2); }
#section-4:hover img:nth-child(4) { transform: translate(-125%, 110%) rotate(-17deg) scale(0.9); }
#section-4:hover img:nth-child(5) { transform: translate(130%, 120%) rotate(25deg) scale(1); }
#section-4:hover img:nth-child(6) { transform: translate(-110%, 135%) rotate(-15deg) scale(1.1); }
#section-4:hover img:nth-child(7) { transform: translate(105%, -120%) rotate(13deg) scale(1.2); }
#section-4:hover img:nth-child(8) { transform: translate(-130%, -110%) rotate(-22deg) scale(1); }