/*
home menu colour: #dce5ff; 
about menu colour: #fff3cd;
work menu colour: #ffcbcb;

home accent colour: #e67c70;
home strong colour: #7091e6;
home dark colour: #1a1a3e;

about accent colour: #ffba52;
about strong colour: #ffb700;
about dark colour: #2e2615;

work accent colour: #ef526d;
work strong colour: #fd5555;
work dark colour: #2e1515;

*/



:root {
    --accent-colour: #e67c70;
    --strong-colour: #7091e6;
    --dark-colour: #1a1a3e;
}
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Protest Guerrilla", system-ui;
    max-width: 100vw;
    touch-action: pan-y;
    scroll-behavior: smooth;
}

html, body {
    max-width: 100vw;
    width: 100vw;
    left: 0;
    touch-action: pan-down pan-up;
}

strong {
    color: var(--accent-colour);
}

.border-bottom {
    width: 100vw;
    height: 2.5vh;
    position: fixed;
    bottom: 0vh;
    z-index: 10000;
    background-color: white;
}

.border-top {
    width: 100vw;
    height: 2.5vh;
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: white;
    position: fixed;
}

.border-left {
    width: 2.5vw;
    height: 100vh;
    position: fixed;
    z-index: 10000;
    background-color: white;
    left: 0;
    top: 0;
}

.border-right {
    width: 2.5vw;
    height: 100vh;
    position: fixed;
    z-index: 10000;
    background-color: white;
    right: 0;
    top: 0;
}



@media (max-width: 600px) {
    .border-top {
        height: 2.5vw;
        position: fixed;
    }
    .border-bottom {
        height: 2.5vw;
        position: fixed;
    }
}

@media (min-width: 950px) {
    .border-top {
        height: 2vh;
        top: 0;
        position: fixed;
    }

    .border-bottom {
        height: 2vh;
    }

    .border-left {
        width: 1vw;
    }

    .border-right {
        width: 1vw;
    }
}

@media (min-width: 1700px) {
    .border-left {
        width: 1vw;
    }

    .border-right {
        width: 1vw;
    }

    .border-top {
        position: fixed;
        height: 2.25vh;
    }

}

.load-screen-1 {
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    position: fixed;
    left: -100vw;
    background-color: #dce5ff;
    top: 0;
    transition: left 1s ease, background-color 1s ease;
    display: block;
}

.load-screen-1.active1 {
    left: 0;
}

.load-screen-1.active2 {
    background-color: #fff3cd; 
}

.load-screen-1.active3 {
    left: 100vw;
}

.load-screen-2 {
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    position: fixed;
    left: -100vw;
    background-color: #dce5ff;
    top: 0;
    transition: left 1s ease, background-color 1s ease;
    display: block;
}

.load-screen-2.active1 {
    left: 0;
}

.load-screen-2.active2 {
    background-color: #dce5ff; 
}

.load-screen-2.active3 {
    left: 100vw;
}

.home-page {
    display: block;
    background-color: #f4f8ff;
    width: 95vw;
    height: fit-content;
    margin-left: 2.5vw;
    padding-bottom: 3.5vw;
    color: var(--dark-colour);
}

.about-page {
    display: none;
    background-color: #fffcf1;
    width: 95vw;
    height: fit-content;
    padding-bottom: 3.5vw;
    margin-left: 2.5vw;
    padding-bottom: 3.5vw;
    color: var(--dark-colour);
}

.work-page {
    display: none;
    background-color: #fff8f8;
    width: 95vw;
    height: fit-content;
    padding-bottom: 3.5vw;
    margin-left: 2.5vw;
    color: var(--dark-colour);
    overflow-x: hidden;
    z-index: -2;
    overflow: hidden;
}

.work-page-container {
    z-index: auto;
}

@media (min-width: 1700px) {
    .home-page,
    .about-page,
    .work-page {
        margin-top: -2.5vh;
        width: 97vw;
        margin-left: 1.5vw; 
    }
} 

@media (min-width: 950px) and (max-width: 1700px) {
    .home-page,
    .about-page,
    .work-page {
        margin-top: -2vh;
        width: 97vw;
        margin-left: 1.5vw; 
    }
}

.header {
    width: 27vw;
    height: 12.5vw;
    display: flex;
    margin-left: 68vw;
    top: 5vh;
    position: fixed;
    z-index: 10;
    padding-left: 2.5vw;
    border-radius: 1vw;
    background-color: white;
    
}

.logo-1 {
    width: 15vw;
    height: 15vw;
    display: inline-block;
}

.logo-1 img {
    width: 10vw;
    margin-top: 1.25vw;
    height: 10vw;
    cursor: pointer;
}

#logo-img-1 {
    display: block;
}

#logo-img-2 {
    display: none;
}

#logo-img-3 {
    display: none;
}

.header-divider {
    display: inline-block;
    width: 0.25vw;
    height: 7.5vw;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    margin-top: 2.5vw;
    border-radius: 0.25vw;
    background-color: rgb(200, 200, 200);
}

.menu-btn {
    display: inline-block;
    width: 13vw;
}

.menu-btn {
    position: relative;
    height: 4vw; /* Adjust this based on your text size */
    overflow: hidden;
    cursor: pointer;
    font-size: 2vw;
    margin-left: 0vw;
    margin-top: 5.25vw;
}

.menu-btn span {
    color: rgb(64, 64, 64);
    letter-spacing: 0.3vw;
    position: absolute;
    text-align: center;
    transition: transform 0.1s ease, opacity 0.1s ease, color 0.2s ease, letter-spacing 0.2s ease;;
}

.menu-btn .menu-text:hover {
    color: var(--accent-colour);
    letter-spacing: 0.5vw;
    transition: color 0.2s ease, letter-spacing 0.2s ease;
}

.menu-btn .close-text:hover {
    color: var(--accent-colour);
    letter-spacing: 0.5vw;
    transform: translateX(-100px);
    transition: color 0.2s ease, letter-spacing 0.2s ease;
}

.menu-btn .close-text {
    transform: translateY(100%);
    opacity: 0;
}

.menu-btn.active .menu-text {
    transform: translateY(-10vw);
    opacity: 0;
}

.menu-btn.active .close-text {
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 600px) {
    .header {
        width: 28vw;
        height: 13vw;
        top: 4vw;
        margin-left: 68vw;
        border: 0.5vw solid var(--strong-colour);
    }

    .logo-1 img {
        width: 8vw;
        height: 8vw;
        margin-top: 2vw;
        margin-left: -1vw;
    }

    .header-divider {
        height: 5.4vw;
        margin-left: -6vw;
        margin-top: 3.5vw;
    }

    .menu-btn {
        font-size: 4vw;
        margin-top: 3.75vw;
    }
} 

@media (min-width: 1700px) {
    .header {
        width: 17vw;
        height: 8vw;
        margin-top: -0.75vw;
        margin-left: 80.5vw;
       } 
    
       .logo-1 img {
        width: 7vw;
        height: 7vw;
        margin-top: 0.25vw;
        margin-left: -1.25vw;
       }
    
       .header-divider {
        height: 5vw;
        margin-left: -2vw;
        margin-top: 1.5vw;
       }
    
       .menu-btn {
        font-size: 2vw;
        margin-top: 2.75vw;
        margin-left: -1.5vw;
        }
}


@media (min-width: 950px) and (max-width: 1700px) {
   .header {
    width: 17vw;
    height: 8vw;
    margin-top: -0.75vw;
    margin-left: 80.5vw;
   } 

   .logo-1 img {
    width: 7vw;
    height: 7vw;
    margin-top: 0.25vw;
    margin-left: -1.25vw;
   }

   .header-divider {
    height: 5vw;
    margin-left: -2vw;
    margin-top: 1.5vw;
   }

   .menu-btn {
    font-size: 2vw;
    margin-top: 2.75vw;
    margin-left: -1.5vw;
    }
}


.menu {
    position: fixed;
    background-color: #dce5ff;
    width: 95vw;
    height: 30vh;
    margin-left: 2.5vw;
    margin-top: 0vh;
    z-index: 3;
    display: none;
    transition: height 1.25s ease, transform 1.25s ease, background-color 0.5s ease;
}

@media (min-width: 950px) {
    .menu {
        margin-top: -0.75vh;
        padding-top: 3.5vw;
        width: 97.5vw;
        margin-left: 1.25vw;
    }
}

@media (min-width: 1700px) {
    .menu {
        top: 2.5vh;
        width: 97.5vw;
        margin-left: 1.25vw;
    }
}

.menu.active {
    height: 101vh; 
}

.menu.home {
    transform: translateY(100vh);
    height: 0;
    background-color: #dce5ff;
}

.menu.about {
    transform: translateY(100vh);
    height: 0;
    background-color: #fff3cd;
}

.menu.work {
    transform: translateY(100vh);
    height: 0;
    background-color: #ffcbcb;
}

.menu-contact-btn {
    width: 27.5vw;
    height: 8vw;
    cursor: pointer;
    margin-left: 5vw;
    margin-top: 7vw;
}

.menu-contact-btn img {
    width: 7.5vw;
}

#contact-img-1 {
    display: block;
}

#contact-img-2 {
    display: none;
}

#contact-img-3 {
    display: none;
}

.menu-contact-btn h1 {
    position: absolute;
    font-size: 3vw;
    margin-left: 9vw;
    margin-top: -6.5vw;
    line-height: 3vw;
    color: var(--dark-colour);
    transition: color 0.2s ease;
}

.menu-contact-btn h1:hover {
    color: var(--accent-colour);
}

.menu-options-container {
    width: 85vw;
    margin-left: 5vw;
    height: 50vw;
    margin-top: 10vw;
    border-bottom: 1px solid var(--strong-colour);
    padding-bottom: -5vw;
    opacity: 0;
}

.menu-options-container.active {
    opacity: 100;
}

.menu-options-1 {
    cursor: pointer;
    font-size: 7vw;
    margin-top: 4.5vw;
    color: var(--dark-colour);
    opacity: 0;
    transition: transform 0.75s ease, opacity 0.75s ease, color 0.2s ease;
}

.menu-options-1.active {
    transform: translateY(1vw);
    opacity: 100;
}

.menu-options-2 {
    cursor: pointer;
    font-size: 7vw;
    margin-top: 6.5vw;
    color: var(--dark-colour);
    opacity: 0;
    transition: transform 0.75s ease, opacity 0.75s ease, color 0.2s ease;
}

.menu-options-2.active {
    transform: translateY(1vw);
    opacity: 100;
}

.menu-options-3 {
    cursor: pointer;
    font-size: 7vw;
    margin-top: 6.5vw;
    color: var(--dark-colour);
    opacity: 0;
    transition: transform 0.75s ease, opacity 0.75s ease, color 0.2s ease;
}

.menu-options-1:hover,
.menu-options-2:hover,
.menu-options-3:hover {
    color: var(--accent-colour);
}

.menu-options-1,
.menu-contact-2,
.menu-contact-3 {
    width: 20vw;
}

.menu-options-3.active {
    transform: translateY(1vw);
    opacity: 100;
}

.lower-menu {
    display: flex;
    transition: opacity 0.5 ease;
    opacity: 0;
}

.lower-menu.active {
    opacity: 100;
}

.lower-menu-credits-container {
    display: inline-block;
    width: 45vw;
    height: 16vw;
    margin-left: 5vw;
    margin-top: 4vw;
    color: var(--dark-colour);
    border-right: 1px solid var(--strong-colour);
    line-height: 10vw;
    opacity: 0;
    transition: opacity 0.75s ease;
}

.lower-menu-credits-container h1 {
    font-size: 5vw;
    margin-top: -2vw;
}

.lower-menu-credits-container h2 {
    font-size: 4vw;
    margin-top: -3vw;
    transition: color 0.2s ease;
}

.lower-menu-credits-container h2:hover {
    color: var(--accent-colour);
}

.lower-menu-email-container {
    display: inline-block;
    width: 35vw;
    height: 40vw;
    margin-top: 4vw;
    margin-left: 5vw;
    color: var(--dark-colour);
    font-size: 2vw;
    opacity: 0;
    transition: opacity 0.75s ease;
}

.lower-menu-credits-container.active,
.lower-menu-email-container.active {
    opacity: 100;
}

.lower-menu-email-container strong {
    color: var(--accent-colour)
}

@media (min-width: 950px) {
    .menu-contact-btn {
        width: 15vw;
        height: 7vw;
        margin-top: 5vw;
    }

    .menu-contact-btn img {
        width: 6vw;
    }

    .menu-contact-btn h2 {
        font-size: 2.5vw;
        line-height: 1;
        margin-left: 7vw;
        margin-top: -5.5vw;
    }

    .menu-options-container {
        margin-top: 5vw;
    }

    .menu-options-1,
    .menu-options-2,
    .menu-options-3 {
        font-size: 5vw;
    } 

    .menu-options-2,
    .menu-options-3 {
        margin-top: 4vw;
    }

    .lower-menu  {
        display: block;
        margin-top: -57.5vw;
        margin-left: 65vw;
        border-left: 0.2vw solid var(--strong-colour);
        height: 35vw;
    }

    .lower-menu-credits-container {
        display: block;
        border-bottom: 0.2vw solid var(--strong-colour);
        width: 20vw;
        border-right: none;
        padding-bottom: 5vw;
    }

    .lower-menu-credits-container h1 {
        font-size: 4vw;
    }

    .lower-menu-credits-container h2 {
        font-size: 3vw;
        margin-top: -5vw;
    }


    .lower-menu-email-container {
        font-size: 1.5vw;
    } 
}

@media (min-width: 150px) {
    .menu-contact-btn {
        width: 15vw;
        height: 7vw;
        margin-top: 2vw;
    }
}

@media (max-width: 600px) {
    .menu-contact-btn {
        width: 19vw;
        height: 8vw;
        margin-top: 6vw;
    }

    .menu-contact-btn img {
        width: 10vw;
    }

    .menu-contact-btn h2 {
        font-size: 4vw;
        line-height: 1;
        margin-top: -9vw;
        margin-left: 11vw;
    }

    .menu-options-container {
        margin-top: 20vw;
        height: 90vw
    }

    .menu-options-1,
    .menu-options-2,
    .menu-options-3 {
        font-size: 15vw;
    }

    .lower-menu-credits-container {
        height: 30vw;
        margin-top: 5vw;
        width: 37.5vw
    }

    .lower-menu-credits-container h1 {
        font-size: 8vw;
        margin-top: 1vw;
    }

    .lower-menu-credits-container h2 {
        font-size: 6vw;
        margin-top: 0vw;
    }

    .lower-menu {
        display: flex;
    }

    .lower-menu-email-container {
        font-size: 3.5vw;
        margin-top: 7vw;
    }
}


.credits-page {
    width: 95vw;
    margin-left: 2.5vw;
    height: 95vh;
    margin-top: 0;
    position: fixed;
    z-index: 1000;
    background-color: #f0f4ff;
    border: 3px solid var(--dark-colour);
    display: none;
}

.credits-close-icon-container img {
    width: 7.5vw;
    margin-left: 85vw;
    margin-top: 2vw;
}

.credits-page h1 {
    margin-left: 2.5vw;
}

.credits-page ul {
    margin-left: 5vw;
}

/*Home page*/
.top-home-page {
    width: 95vw;
    height: fit-content;
    margin-left: 2.5vw;
    padding-bottom: 5vw;
}

.top-home-page {
    width: 95vw;
    padding-top: 2.5vw;
    padding-bottom: 5vw;
    margin-left: 2.5vw;
    margin-top: 2.5vw;
    height: fit-content;
    color: var(--dark-colour);
    text-align: center;
    
}


#top-home-page-header{
    font-size: 15vw;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

.top-home-page strong {
    color: var(--accent-colour);
}

#top-home-page-header-2 {
    font-size: 4vw;
    margin-top: 0vw;
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.top-home-page img {
    width: 40vw;
    margin-left: 0vw;
    margin-top: 10vw;
    opacity: 100;
}

#top-home-page-header.active,
#top-home-page-header-2.active {
    transform: translateY(2vw);
    opacity: 100;
}

.scroll {
    height: 20vw;
    width: 5.5vw;
    margin-left: 47.25vw;
    margin-top: 7vw;
}

.scroll h1 {
    font-size: 2vw;
    font-weight: 300;
    display: inline-block;
    animation: jump1 4s ease-in-out infinite;
}

.scroll-line {
    background-color: var(--dark-colour);
    height: 15vw;
    width: 0.2vw;
    margin-left: 2.65vw;
    margin-top: 1vw;
}

@media (min-width: 950px) {
    .top-home-page img {
        margin-left: 40vw;
        width: 32.5vw;
        margin-top: 9vw;
    }

    #top-home-page-header {
        margin-left: -25vw;
        margin-top: -30vw;
        text-align: center;
        font-size: 13vw;
    }

    #top-home-page-header-2 {
        margin-left: -25vw;
        font-size: 3.75vw;
        text-align: center;
    }

    .scroll {
        margin-top: 8vw;
    }
}

@media (min-width: 1500px) {
    .top-home-page img {
        margin-left: 40vw;
        width: 32.5vw;
        margin-top: 7vw;
    }
}

@media (max-width: 600px) {
    .top-home-page img {
        width: 70vw;
    }

    #top-home-page-header {
        font-size: 25vw;
    }

    #top-home-page-header-2 {
        font-size: 6vw;
    }

    .scroll h3 {
        font-size: 4vw;
        margin-left: -2.5vw;
    }

    .scroll-line {
        margin-top: 1vw;
    }
}

.second-box-home-page {
    width: 100%;
    margin-top: 60vw;
    display: flex;
}

.second-box-home-page-container {
    display: inline-block;
    width: 50vw;
    margin-left: 4vw;
    padding-right: 5vw;
}

.second-box-home-page-container h1 {
    font-size: 6vw;
}

.first-underline,
.second-underline,
.third-underline {
    width: 15vw;
    height: 0.3vw;
    background-color: var(--strong-colour);
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.third-underline {
    margin-left: 5vw;
    margin-top: 1vw;
    margin-bottom: -0.75vw;
}

@media (max-width: 600px) {
.first-underline,
.second-underline,
.third-underline {
    width: 30vw;
    height: 0.6vw;
    background-color: var(--strong-colour);
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.third-underline {
    margin-left: 5vw;
    margin-top: 1vw;
    margin-bottom: -0.75vw;
}
}

.second-box-home-page-container p {
    font-size: 2.5vw;
    line-height: 1.8;
    margin-top: 1vw;
}

.user-data-img-container {
    background-color: rgb(17, 49, 116);
    width: 36vw;
    height: 36vw;
    border-radius: 18vw;
    margin-left: 2.5vw;
    margin-top: 5vw;
    overflow-x: hidden;
}

.second-box-home-page img {
    display: inline-block;
    width: 30vw;
    height: 30vw;
    margin-left: 30vw;
    margin-top: 3.5vw;
    transition: margin-left 1.5s ease;
}

.second-box-home-page img.active {
    margin-left: 7.5vw;
}

.home-about-me-btn {
    width: 30vw;
    height: 7vw;
    background-color: transparent;
    border: 2px solid var(--strong-colour);
    border-radius: 3.5vw;
    color: var(--strong-colour);
    font-size: 3vw;
    position: relative;
    margin-top: 2.5vw;
    margin-left: 8vw;
    z-index: 2;
}

.home-about-me-btn:active {
   color:var(--accent-colour);
   border: 2px solid var(--accent-colour);
}

.home-about-me-btn-shadow {
    width: 30vw;
    height: 7vw;
    border-radius: 3.5vw;
    background-color: #dce5ff;
    z-index: 1;
    margin-top: -7vw;
    margin-left: 8vw;
}

@media (min-width: 950px) {
    .second-box-home-page-container h1 {
        font-size: 5vw;
    }

    .second-box-home-page-container p {
        font-size: 2vw;
    }

    .home-about-me-btn {
        top: -5vw;
        width: 22vw;
        height: 6vw;
        font-size: 2.5vw;
    }

    .home-about-me-btn-shadow {
        width: 22vw;
        height: 6vw;
        margin-top: -11vw;
    }

    .user-data-img-container {
        width: 27vw;
        height: 27vw;
        border-radius: 13.5vw;
    }

    .second-box-home-page img {
        width: 22.5vw;
        height: 22.5vw;
        margin-left: 20vw;
        margin-top: 2.5vw;
    }
}

@media (max-width: 600px) {
    .second-box-home-page {
        display: block;
        margin-top: 77.5vw;
    }

    .second-box-home-page-container h1 {
        font-size: 11vw;
    }

    .second-box-home-page-container {
        display: block;
        width: 90vw;
    }

    .second-box-home-page img {
        display: block;
    } 

    .second-box-home-page-container p {
        font-size: 4.5vw;
    }

    .user-data-img-container {
        width: 54vw;
        height: 54vw;
        border-radius: 27vw;
        margin-left: 22.5vw;
        margin-top: 35vw;
    }

    .second-box-home-page img {
        width: 45vw;
        height: 41vw;
        margin-top: 7vw;
        margin-left: 42.5vw;
    }

    .second-box-home-page img.active {
        margin-left: 12.5vw;
    }

    .home-about-me-btn {
        width: 45vw;
        height: 10.5vw;
        border-radius: 5.25vw;
        font-size: 6vw;
        margin-left: 25vw;
        top: -80vw;
    }

    .home-about-me-btn-shadow {
        width: 45vw;
        height: 10.5vw;
        border-radius: 5.25vw;
        margin-left: 26.5vw;
        margin-top: -88.5vw;
    }
}

.third-box-home-page {
    display: flex;
}

.heart-container {
    display: inline-block;
}

#love-heart-img {
    width: 15vw;
    margin-top: 40vw;
    margin-left: 15vw;
    margin-bottom: 12.5vw;
    animation: jump1 4s ease-in-out infinite;
}

#love-hands-img {
    width: 30vw;
    margin-left: -23vw;
}

.third-box-home-content {
    margin-top: 25vw;
    margin-left: 7.5vw;
    width: 45vw;
    height: fit-content;
    text-align: justify;
}

.third-box-home-content h1 {
    font-size: 6vw;
}

.third-box-home-content p {
    font-size: 2.5vw;
    line-height: 1.8;
}

.home-offer-btn {
    width: 30vw;
    height: 7vw;
    background-color: transparent;
    border: 2px solid var(--strong-colour);
    border-radius: 3.5vw;
    color: var(--strong-colour);
    font-size: 3vw;
    position: relative;
    margin-top: 3.5vw;
    margin-left: 52vw;
    z-index: 2;
}

.home-offer-btn:active {
   color:var(--accent-colour);
   border: 2px solid var(--accent-colour);
}

.home-offer-btn-shadow {
    width: 30vw;
    height: 7vw;
    border-radius: 3.5vw;
    background-color: #dce5ff;
    z-index: 1;
    margin-top: -7vw;
    margin-left: 52vw;
}

@media (min-width: 950px) {
    #love-heart-img {
        width: 11.25vw;
        margin-left: 20vw;
        margin-top: 32.5vw;
    }

    #love-hands-img {
        width: 22.5vw;
        margin-left: -17.25vw;
    }

    .third-box-home-content {
        margin-left: 12.5vw;
    }

    .third-box-home-content h1 {
        font-size: 5vw;
    } 

    .third-box-home-content p {
        font-size: 2vw;
        line-height: 1.8;
    }

    .home-offer-btn {
        width: 22vw;
        height: 6vw;
        top: -2vw;
        margin-left: 60vw;
        font-size: 2.5vw;
    }

    .home-offer-btn-shadow {
        width: 22vw;
        height: 6vw;
        margin-top: -8vw;
        margin-left: 60vw;
    }
}

@media (max-width: 600px) {
    .third-box-home-page {
        margin-top: 50vw;
        display: block;
    }

    .heart-container {
        display: block;
        margin-top: 150vw;
    }

    .third-box-home-content {
        display: block;
        margin-top: -165vw;
        width: 85vw;
        margin-left: 5vw;
    }

    .third-box-home-content h1 {
        font-size: 11vw;
    }

    .third-box-home-content p {
        font-size: 4.5vw;
    }

    #love-heart-img {
        width: 30vw;
        margin-left: 32.5vw;
    }

    #love-hands-img {
        width: 55vw;
        margin-left: 20vw;
        margin-top: -45vw;
    }

    .home-offer-btn {
        width: 45vw;
        height: 10.5vw;
        border-radius: 5.25vw;
        font-size: 6vw;
        margin-left: 22.5vw;
        margin-top: 10vw;
    }

    .home-offer-btn-shadow {
        width: 45vw;
        height: 10.5vw;
        border-radius: 5.25vw;
        margin-left: 27.5vw;
        margin-top: -8vw;
        margin-bottom: 10vw;
    }
}

.fourth-box-home-page {
    width: 92.5vw;
}

.fourth-box-home-page h1 {
    font-size: 6vw;
    margin-top: 15vw;
    margin-left: 5vw;
}

.fourth-box-home-page p {
    margin-left: 5vw;
    margin-top: 2.5vw;
}

.fourth-box-home-inner {
    display: flex;
    width: 100%;
}

.home-fourth-box-list {
    display: inline-block;
    width: 40%;
}

.fourth-box-home-page p {
    font-size: 2.5vw;
}

.fourth-box-home-page ul {
    margin-left: 7.5vw;
    margin-top: 2.5vw;
    list-style-type: disc;
}


.fourth-box-home-page li {
    font-size: 2.5vw;
}

li::marker {
    color: var(--accent-colour);
}

.fourth-box-img-container {
    display: inline-block;
    width: 40%;
    margin-left: 10vw;
    margin-top: 5vw;
}

.fourth-box-img-1 {
    width: 36vw;
    z-index: 1;
}

.fourth-box-img-2 {
    position: absolute;
    width: 12.5vw;
    z-index: 2;
    margin-left: -33.35vw;
    margin-top: 2.64vw;
}

.home-footer h1 {
    color: #00000023;
    font-size: 1.5vw;
    text-align: center;
    margin-top: 10vw;
}

#home-page-strong-text {
    color: var(--dark-colour);
    text-align: center;
}

@media (min-width: 950px) {
    .fourth-box-home-page h1 {
        font-size: 5vw;
    }

    .fourth-box-home-page p {
        font-size: 2.25vw;
        line-height: 1.5;
    }

    .fourth-box-home-page li {
        font-size: 2.25vw;
        line-height: 1.5;
    }

    .fourth-box-img-1 {
        width: 30vw;
    }

    .fourth-box-img-2 {
        width: 10.4vw;
        margin-left: -27.7vw;
        margin-top: 2.25vw;
    }

    .fourth-box-img-container {
        margin-left: 15vw;
        margin-top: 7.5vw;
    }
}

@media (max-width: 600px) {
    .fourth-box-home-page {
        margin-top: 90vw;
    }

    .fourth-box-home-page h1 {
        font-size: 11VW;
    }

    .fourth-box-home-page p {
        font-size: 4vw;
        line-height: 1.7;
        margin-top: 3vw;
    }

    .home-fourth-box-list {
        width: 60%;
        margin-top: 10vw;
        margin-bottom: 7vw;
    }

    .fourth-box-home-page li {
        font-size: 3.5vw;
    }

    .fourth-box-img-container {
        margin-top: 27.5vw;
        margin-left: 5vw;
    }
}


.about-top-box {
    width: 100%;
    padding-top: 20vw;
    text-align: center;
}

.about-top-box-text-container h1 {
    font-size: 20vw;
}

.about-top-box-text-container h2 {
    font-size: 5vw;
    margin-top: -3vw;
}

.about-top-main-img {
    width: 30vw;
    margin-left: -14vw;
    margin-top: 10vw;
    position: absolute;
}

.about-top-img-ani-1 {
    margin-left: 25vw;
    margin-top: 8vw;
}

.about-top-img-ani-1 img,
.about-top-img-ani-2 img {
    width: 7vw;
}

#about-top-img-ani-1-1 {
    display: block;
    animation: spin1 3s ease-in-out infinite;
    position: absolute;
    rotate: -10deg;
    margin-top: 7vw;
}

#about-top-img-ani-1-2 {
    display: block;
    animation: spin2 3s ease-in-out infinite;
    position: absolute;
    rotate: -12deg;
    margin-left: 10vw;
}

#about-top-img-ani-1-3 {
    display: block;
    animation: spin6 3s ease-in-out infinite;
    position: absolute;
    rotate: -5deg;
    margin-left: -3vw;
    margin-top: 17.5vw;
}

#about-top-img-ani-2-1 {
    display: block;
    animation: spin4 3s ease-in-out infinite;
    position: absolute;
    rotate: 10deg;
    margin-top: 7.5vw;
    margin-left: 64vw;
}

#about-top-img-ani-2-2 {
    display: block;
    animation: spin5 3s ease-in-out infinite;
    position: absolute;
    rotate: 12deg;
    margin-left: 53vw;
    margin-top: -0.5vw;
}

#about-top-img-ani-2-3 {
    display: block;
    animation: spin3 3s ease-in-out infinite;
    position: absolute;
    rotate: 5deg;
    margin-left: 68vw;
    margin-top: 18vw;
}

@media (min-width:950px) {
    .about-top-box {
        padding: 0;
        padding-top: 20vw;
    }

    .about-top-box-text-container h1 {
        font-size: 14vw;
        margin-left: -25vw;
    }


    .about-top-box-text-container h2 {
        font-size: 4vw;
        margin-left: -25vw;
    }

    .about-top-box-img-container {
        margin-top: -32.5vw;
        margin-left: 40vw;
    }

    .about-top-main-img {
        width: 22.5vw
    }

    #about-top-img-ani-1-1,
    #about-top-img-ani-1-2,
    #about-top-img-ani-1-3,
    #about-top-img-ani-2-1,
    #about-top-img-ani-2-2,
    #about-top-img-ani-2-3 {
        width: 5.25vw;
    }

    .about-top-img-ani-1 {
        margin-left: 10vw;
    }

    #about-top-img-ani-1-1 {
        margin-top: 7.75vw;
    }

    #about-top-img-ani-1-2 {
        margin-left: 7.5vw;
        margin-top: 2.5vw;
    }

    #about-top-img-ani-1-3 {
        margin-left: -2.25vw;
        margin-top: 15.625vw;
    }

    .about-top-img-ani-2 {
        position: relative;
        margin-left: -27.5vw;
    };

    #about-top-img-ani-2-1 {
        position: relative;
        left: 10vw;
    }

    #about-top-img-ani-2-2 {
        margin-top: 2.5vw;
        margin-left: 55vw;
    }

    #about-top-img-ani-2-3 {
        margin-top: 16vw;
        margin-left: 66vw;
    }
}

@media (min-width: 1500px) {
    .about-top-box {
        padding: 0;
        padding-top: 17.5vw;
    }
}

@media (max-width: 600px) {
    .about-top-box-text-container h1 {
        font-size: 30vw;
    }

    .about-top-box-text-container h2 {
        font-size: 7vw;
    }

    .about-top-main-img {
        width: 50vw;
        margin-left: -24vw;
        margin-top: 20vw;
        z-index: 1;
    }

    .about-top-img-ani-1 img,
    .about-top-img-ani-2 img {
        width: 12vw;
    } 

    #about-top-img-ani-1-1 {
        margin-top: 12vw;
        margin-left: -5vw;
        z-index: 2;
    }

    #about-top-img-ani-1-2 {
        margin-left: 7.5vw;
        margin-top: 1vw;
        z-index: 2;
    }

    #about-top-img-ani-1-3 {
        margin-left: -11.5vw;
        margin-top: 27vw;
        z-index: 2;
    }

    #about-top-img-ani-2-1 {
        margin-left: 67vw;
        margin-top: 12.5vw;
        z-index: 2;
    }

    #about-top-img-ani-2-2 {
        margin-top: 1vw;
        z-index: 2;
    }

    #about-top-img-ani-2-3 {
        margin-top: 28vw;
        z-index: 2;
    }
}

.about-us-main-container-1 {
    width: 85%;
    margin-left: 7.5%;
    border-bottom: 2px solid var(--strong-colour);
    padding-bottom: 10vw;
}

.about-us-main-container-1 h1 {
    font-size: 5vw;
    margin-top: 60vw;
}

.fourth-underline,
.fifth-underline,
.sixth-underline {
    height: 0.4vw;
    width: 11vw;
    background-color: var(--strong-colour);
}

.about-us-main-container-1 p {
    font-size: 2.5vw;
    text-align: justify;
    margin-top: 2vw;
}

.about-us-main-container-2 {
    width: 85%;
    margin-left: 7.5%;
    border-bottom: 2px solid var(--strong-colour);
    padding-bottom: 10vw;
}

.about-us-main-container-2 ul {
    list-style: none;
    color: var(--strong-colour);
    font-size: 6vw;
    font-weight: 50;
    text-align: center;
    margin-top: 10vw;
}

.about-us-main-container-2 li {
    margin-top: 2.5vw;
}

@media (min-width:950px) {
    .about-us-main-container-1 h1 {
        font-size: 5vw;
    }

    .about-us-main-container-1 p {
        margin-top: 2.5vw;
    }

    .about-us-main-container-2 ul {
        font-size: 4vw;
    }
}

@media (max-width: 600px) {
    .about-us-main-container-1 h1 {
        margin-top: 95vw;
    }

    .about-us-main-container-1 h1 {
        font-size: 11vw;
    }

    .about-us-main-container-1 p {
        font-size: 4vw;
    }

    .about-us-main-container-2 ul {
        font-size: 10vw;
    }

    .fourth-underline,
    .fifth-underline,
    .sixth-underline {
        width: 25vw;
        height: 0.8vw;
    }
}

.about-us-main-container-3 {
    width: 85%;
    margin-left: 7.5%;
    border-bottom: 2px solid var(--strong-colour);
    padding-bottom: 10vw;
    padding-top: 10vw;
}

.about-us-main-container-3 h1 {
    font-size: 5vw;
}

.about-us-main-container-3 p {
    font-size: 2.5vw;
    text-align: justify;
    margin-top: 2vw;
}

.about-us-main-container-4 {
    width: 85%;
    margin-left: 7.5%;
    padding-bottom: 2vw;
}

.about-us-main-container-4 img {
    height: 40vw;
    margin-left: 20vw;
    margin-top: 10vw;
}

.about-us-main-container-4 h1 {
    font-size: 5vw;
    margin-top: 10vw;
}

.about-us-main-container-4 p {
    font-size: 2.5vw;
    text-align: justify;
    margin-top: 2vw;
}

@media (min-width: 950px) {
    .about-us-main-container-3 h1 {
        font-size: 5vw;
    }

    .about-us-main-container-3 p {
        font-size: 2.5vw;
    }

    .about-us-main-container-4 h1 {
        font-size: 5vw;
    }

    .about-us-main-container-4 p {
        font-size: 2.5vw;
    }
}

@media (max-width: 600px) {
    .about-us-main-container-3 h1 {
        font-size: 11vw;
    }

    .about-us-main-container-3 p {
        font-size: 4vw;
    }

    .about-us-main-container-4 img {
        height: 60vw;
        margin-left: 10vw;
        margin-top: 20vw;
    }

    .about-us-main-container-4 h1 {
        font-size: 11vw;
    }

    .about-us-main-container-4 p {
        font-size: 4vw;
    }
}













.work-page-top-box {
    width: 60vw;
    margin-left: 5vw;
    padding-top: 22.5vw;
    height: 47.5vw;
}

.work-page-top-box h1 {
    font-size: 10vw;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
}

#work-page-header-1 {
    margin-top: 0.5vw;
    font-size: 4vw;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
}

#work-page-header-2 {
    margin-top: 0vw;
    font-size: 4vw;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
}

.project1 {
    overflow: hidden;
    width: 95vw;
    
}

.project-1-desc-container,
.project-2-desc-container {
    margin-top: 10vw;
    width: 90vw;
    margin-left: 2.5vw;
    margin-top: 10vw;
}

.project-2-desc-container {
    margin-top: 30vw;
}

.project-1-desc-container h1,
.project-2-desc-container h1 {
    font-size: 6vw;
    margin-top: 10vw;
}

.project-1-desc-container h1 {
    margin-top: 25vw;
}

.project-1-desc-container ul,
.project-2-desc-container ul {
    list-style: none;
    display: flex;
}

.project-1-label-1,
.project-1-label-2,
.project-1-label-3,
.project-2-label-1,
.project-2-label-2,
.project-2-label-3 {
    width: fit-content;
    height: fit-content;
    padding-left: 1.5vw;
    padding-top: 0.75vw;
    padding-bottom: 0.75vw;
    padding-right: 1.5vw;
    border-radius: 3vw;
    background-color: #ff9999;
    color: white;
    font-size: 1.75vw;
    opacity: 1;
}

.project-1-label-2,
.project-1-label-3,
.project-2-label-2,
.project-2-label-3   {
    margin-left: 1.5vw;
}

.project-1-desc-container h2,
.project-2-desc-container h2 {
    font-size: 2.5vw;
}

.project-1-background-text-container,
.project-2-background-text-container {
    overflow: hidden;
    width: 100%;
    margin-top: -19vw;
    height: 20vw;
    margin-left: 5vw;
}

#project-1-background-text,
#project-2-background-text {
    font-size: 23vw;
    position: absolute;
    color: black;
    opacity: 0.05;
    z-index: 1;
}

#project-2-background-text {
    margin-left: 10vw;
}

.project-1-desktop,
.project-2-desktop {
    height: 50vw;
    width: 85vw;
    border-radius: 2vw;
    margin-left: 30vw;
    margin-top: 15vw;
    border: 0.3vw solid #1a1a3e;
}

.project-1-desktop-tab,
.project-2-desktop-tab {
    width: 12vw;
    height: 2vw;
    border-bottom-left-radius: 0.75vw;
    border-bottom-right-radius: 0.75vw;
    background-color: black;
    position: absolute;
    margin-left: 34vw;
    margin-top: 0vw;
}

.project-1-desktop img {
    width: 95%;
    height: 100%;
    border-radius: 2vw;
}

.project-1-phone,
.project-2-phone {
    height: 32vw;
    width: 18vw;
    border-radius: 2vw;
    margin-left: 40vw;
    margin-top: -10vw;
    border: 0.25vw solid #1a1a3e;
}

.project-1-phone img {
    width: 100%;
    height: 100%;
    border-radius: 2vw;
}

.project-1-phone-tab,
.project-2-phone-tab {
    width: 6vw;
    height: 2vw;
    border-radius: 1vw;
    background-color: black;
    position: absolute;
    margin-left: 6vw;
    margin-top: 0.5vw;
}

#present-img {
    width: 15vw;
    margin-left: 37.5vw;
    margin-bottom: -7.5vw;
    margin-top: 40vw;
}

.project-1-desc-container {
    margin-top: -5vw;
}

.project-2-desktop {
    background-color: white;
}

.project-2-desktop h1 {
    font-size: 40vw;
    text-align: center;
    margin-top: 0vw;
    margin-left: -3vw;
}

.project-2-phone h1 {
    font-size: 15vw;
    text-align: center;
    margin-top: 6vw;
}

#present-img {
    width: 10vw;
    margin-left: 42.5vw;
}

@media (min-width: 950px) {
    .work-page-top-box {
        padding-top: 12.5vw;
    }
    .work-page-top-box h1 {
        font-size: 8vw;
    } 

    #work-page-header-1 {
        font-size: 3vw;
    }

    #work-page-header-2 {
        font-size: 3vw;
    }

    #project-1-background-text,
    #project-2-background-text {
        margin-top: -1vw;
        font-size: 20vw;
    }
    
    #project-2-background-text {
        margin-left: 12.5vw;
    }

    .project-1-desktop,
    .project-2-desktop  {
        margin-top: 5vw;
    }

    .project-2-desktop {
        background-color: white;
    }

    .project-2-desktop h1 {
        font-size: 40vw;
        text-align: center;
        margin-top: 0vw;
        margin-left: -3vw;
    }

    .project-2-phone {
        background-color: white;
        
    }

    .project-2-phone-tab {
        margin-left: 5.75vw;
    }

    .project-2-phone h1 {
        font-size: 15vw;
        text-align: center;
        margin-top: 6vw;
    }

    .project-2-desc-container {
        margin-top: 5vw;
    }
}

@media (max-width: 800px) {
    .work-page-top-box h1 {
        font-size: 14vw;
        margin-top: 10vw;
    }

    .project-1-desc-container {
        margin-top: 45vw;
    }

    .project-1-desc-container h1,
    .project-2-desc-container h1 {
        font-size: 10vw;
    } 

    .project-1-label-1,
    .project-1-label-2,
    .project-1-label-3,
    .project-2-label-1,
    .project-2-label-2,
    .project-2-label-3 {
        font-size: 3vw;
        padding-left: 2.25vw;
        padding-right: 2.25vw;
        padding-top: 1.25vw;
        padding-bottom: 1.25vw;
        border-radius: 4vw;
    }

    .project-1-desc-container h3,
    .project-2-desc-container h3 {
        font-size: 3.5vw;
        margin-top: 2vw;
    }

    .project-1-background-text-container,
    .project-2-background-text-container {
        margin-top: -35vw;
        overflow: hidden;
        width: 95vw;
    }

    #project-1-background-text,
    #project-2-background-text {
        font-size: 36vw;
    }

    .project-1-desktop,
    .project-2-desktop {
        margin-top: 30vw;
    }
}

@keyframes jump1 {
    0%, 70% {
        transform: translateY(0);
    }
    70.5% {
        transform: translateY(-1.95px);
    } 
    71% {
        transform: translateY(-3.8px);
    } 
    71.5% {
        transform: translateY(-5.55px);
    }
    72% {
        transform: translateY(-7.2px);
    }
    72.5% {
        transform: translateY(-8.75px);
    }
    73% {
        transform: translateY(-10.2px);
    }
    73.5% {
        transform: translateY(-11.55px);
    }
    74% {
        transform: translateY(-12.8px);
    }
    74.5% {
        transform: translateY(-13.95px);
    }
    75% {
        transform: translateY(-15px);
    }
    75.5% {
        transform: translateY(-16.8px);
    } 
    76% {
        transform: translateY(-17.55px);
    } 
    76.5% {
        transform: translateY(-18.2px);
    }
    77% {
        transform: translateY(-18.75px);
    }
    77.5% {
        transform: translateY(-19.2px);
    }
    78% {
        transform: translateY(-19.55px);
    }
    78.5% {
        transform: translateY(-19.8);
    }
    79% {
        transform: translateY(-19.95px);
    }
    79.5% {
        transform: translateY(-19.95px);
    }
    80% {
        transform: translateY(-20px);
    }
    80.5% {
        transform: translateY(-19.95px);
    }
    81% {
        transform: translateY(-19.55px);
    }
    81.5% {
        transform: translateY(-19.2px);
    }
    82% {
        transform: translateY(-18.75px);
    }
    82.5% {
        transform: translateY(-18.2px);
    }
    83% {
        transform: translateY(-17.55px);
    } 
    84.5% {
        transform: translateY(-16.8px);
    }
    85% {
        transform: translateY(-15px);
    }
    85.5% {
        transform: translateY(-13.95px);
    }
    86% {
        transform: translateY(-12.8px);
    }
    86.5% {
        transform: translateY(-11.55px);
    }
    87% {
        transform: translateY(-10.2px);
    }
    87.5% {
        transform: translateY(-8.75px);
    }
    88% {
        transform: translateY(-7.2px);
    }
    88.5% {
        transform: translateY(-5.55px);
    }
    89% {
        transform: translateY(-3.8px);
    } 
    89.5% {
        transform: translateY(-1.95px);
    }  
    90% {
        transform: translateY(0);
    }
    90.25% {
        transform: translateY(-0.9px);
    } 
    90.5% {
        transform: translateY(-1.9px);
    } 
    90.75% {
        transform: translateY(-2.75px);
    }
    91% {
        transform: translateY(-3.6px);
    }
    91.25% {
        transform: translateY(-4.4px);
    }
    91.5% {
        transform: translateY(-5.1px);
    }
    91.75% {
        transform: translateY(-5.75px);
    }
    92% {
        transform: translateY(-6.4px);
    }
    92.25% {
        transform: translateY(-6.9px);
    }
    92.5% {
        transform: translateY(-7.5px);
    }
    92.75% {
        transform: translateY(-8.4px);
    } 
    93% {
        transform: translateY(-8.8px);
    } 
    93.25% {
        transform: translateY(-9.1px);
    }
    93.5% {
        transform: translateY(-9.4px);
    }
    93.75% {
        transform: translateY(-9.6px);
    }
    94% {
        transform: translateY(-9.8px);
    }
    94.25% {
        transform: translateY(-9.9);
    }
    94.5% {
        transform: translateY(-9.95px);
    }
    94.75% {
        transform: translateY(-9.95px);
    }
    95% {
        transform: translateY(-10px);
    }
    95.25% {
        transform: translateY(-9.95px);
    }
    95.5% {
        transform: translateY(-9.8px);
    }
    95.75% {
        transform: translateY(-9.6px);
    }
    96% {
        transform: translateY(-9.4px);
    }
    96.25% {
        transform: translateY(-9.1px);
    }
    96.5% {
        transform: translateY(-8.8px);
    } 
    96.75% {
        transform: translateY(-8.4px);
    }
    97% {
        transform: translateY(-7.5px);
    }
    97.25% {
        transform: translateY(-6.9px);
    }
    97.5% {
        transform: translateY(-6.4px);
    }
    97.75% {
        transform: translateY(-5.75px);
    }
    98% {
        transform: translateY(-5.1px);
    }
    98.25% {
        transform: translateY(-4.4px);
    }
    98.5% {
        transform: translateY(-3.6px);
    }
    98.75% {
        transform: translateY(-2.75px);
    }
    99% {
        transform: translateY(-1.9px);
    } 
    99.25% {
        transform: translateY(-0.9px);
    }  
    99.5% {
        transform: translateY(0);
    }
}

@keyframes spin1 {
    0% {
        transform: translateY(-3.2px);
    }
    2.5% {
        transform: translateY(-2.55px);
    }
    5% {
        transform: translateY(-1.8px);
    }
    7.5% {
        transform: translateY(-0.95px);
    }
    10% {
        transform: translateY(0px);
    }
    12.5% {
        transform: translateY(0.95px);
    } 
    15% {
        transform: translateY(1.8px);
    }
    17.5% {
        transform: translateY(2.55px);
    }
    20% {
        transform: translateY(3.2px);
    }
    22.5% {
        transform: translateY(3.75px);
    }
    25% {
        transform: translateY(4.2px);
    }
    27.5% {
        transform: translateY(4.55px);
    }
    30% {
        transform: translateY(4.8px);
    }
    32.5% {
        transform: translateY(4.95px);
    }
    35% {
        transform: translateY(5px);
    }
    37.5% {
        transform: translateY(4.95px);
    }
    40% {
        transform: translateY(4.8px);
    }
    42.5% {
        transform: translateY(4.55px);
    }
    45% {
        transform: translateY(4.2px);
    }
    47.5% {
        transform: translateY(3.75px);
    }
    50% {
        transform: translateY(3.2px);
    }
    52.5% {
        transform: translateY(2.55px);
    }
    55% {
        transform: translateY(1.8px);
    }
    57.5% {
        transform: translateY(0.95px);
    }
    60% {
        transform: translateY(0px);
    }
    62.5% {
       transform: translateY(-0.95px);
    } 
    65% {
        transform: translateY(-1.8px);
    }
    67.5% {
        transform: translateY(-2.55px);
    }
    70% {
        transform: translateY(-3.2px);
    }
    72.5% {
        transform: translateY(-3.75px);
    }
    75% {
        transform: translateY(-4.2px);
    }
    77.5% {
        transform: translateY(-4.55px);
    }
    80% {
        transform: translateY(-4.8px);
    }
    82.5% {
        transform: translateY(-4.95px);
    }
    85% {
        transform: translateY(-5px);
    }
    87.5% {
        transform: translateY(-4.95px);
    }
    90% {
        transform: translateY(-4.8px);
    }
    92.5% {
        transform: translateY(-4.55px);
    }
    95% {
        transform: translateY(-4.2px);
    }
    97.5% {
        transform: translateY(-3.75px);
    }
    100% {
        transform: translateY(-3.2px);
    }
}

@keyframes spin2 {
    0% {
        transform: translateY(-4.8px);
    }
    2.5% {
        transform: translateY(-4.55px);
    }
    5% {
        transform: translateY(-4.2px);
    }
    7.5% {
        transform: translateY(-3.75px);
    }
    10% {
        transform: translateY(-3.2px);
    }
    12.5% {
        transform: translateY(-2.55px);
    }
    15% {
        transform: translateY(-1.8px);
    }
    17.5% {
        transform: translateY(-0.95px);
    }
    20% {
        transform: translateY(0px);
    }
    22.5% {
        transform: translateY(0.95px);
    } 
    25% {
        transform: translateY(1.8px);
    }
    27.5% {
        transform: translateY(2.55px);
    }
    30% {
        transform: translateY(3.2px);
    }
    32.5% {
        transform: translateY(3.75px);
    }
    35% {
        transform: translateY(4.2px);
    }
    37.5% {
        transform: translateY(4.55px);
    }
    40% {
        transform: translateY(4.8px);
    }
    42.5% {
        transform: translateY(4.95px);
    }
    45% {
        transform: translateY(5px);
    }
    47.5% {
        transform: translateY(4.95px);
    }
    50% {
        transform: translateY(4.8px);
    }
    52.5% {
        transform: translateY(4.55px);
    }
    55% {
        transform: translateY(4.2px);
    }
    57.5% {
        transform: translateY(3.75px);
    }
    60% {
        transform: translateY(3.2px);
    }
    62.5% {
        transform: translateY(2.55px);
    }
    65% {
        transform: translateY(1.8px);
    }
    67.5% {
        transform: translateY(0.95px);
    }
    70% {
        transform: translateY(0px);
    }
    72.5% {
        transform: translateY(-0.95px);
    } 
    75% {
        transform: translateY(-1.8px);
    }
    77.5% {
        transform: translateY(-2.55px);
    }
    80% {
        transform: translateY(-3.2px);
    }
    82.5% {
        transform: translateY(-3.75px);
    }
    85% {
        transform: translateY(-4.2px);
    }
    87.5% {
        transform: translateY(-4.55px);
    }
    90% {
        transform: translateY(-4.8px);
    }
    92.5% {
        transform: translateY(-4.95px);
    }
    95% {
        transform: translateY(-5px);
    }
    97.5% {
        transform: translateY(-4.95px);
    }
    100% {
        transform: translateY(-4.8px);
    }
}

@keyframes spin3 {
    0% {
        transform: translateY(-4.8px);
    }
    2.5% {
        transform: translateY(-4.95px);
    }
    5% {
        transform: translateY(-5px);
    }
    7.5% {
        transform: translateY(-4.95px);
    }
    10% {
        transform: translateY(-4.8px);
    }
    12.5% {
        transform: translateY(-4.55px);
    }
    15% {
        transform: translateY(-4.2px);
    }
    17.5% {
        transform: translateY(-3.75px);
    }
    20% {
        transform: translateY(-3.2px);
    }
    22.5% {
        transform: translateY(-2.55px);
    }
    25% {
        transform: translateY(-1.8px);
    }
    27.5% {
        transform: translateY(-0.95px);
    }
    30% {
        transform: translateY(0px);
    }
    32.5% {
        transform: translateY(0.95px);
    } 
    35% {
        transform: translateY(1.8px);
    }
    37.5% {
        transform: translateY(2.55px);
    }
    40% {
        transform: translateY(3.2px);
    }
    42.5% {
        transform: translateY(3.75px);
    }
    45% {
        transform: translateY(4.2px);
    }
    47.5% {
        transform: translateY(4.55px);
    }
    50% {
        transform: translateY(4.8px);
    }
    52.5% {
        transform: translateY(4.95px);
    }
    55% {
        transform: translateY(5px);
    }
    57.5% {
        transform: translateY(4.95px);
    }
    60% {
        transform: translateY(4.8px);
    }
    62.5% {
        transform: translateY(4.55px);
    }
    65% {
        transform: translateY(4.2px);
    }
    67.5% {
        transform: translateY(3.75px);
    }
    70% {
        transform: translateY(3.2px);
    }
    72.5% {
        transform: translateY(2.55px);
    }
    75% {
        transform: translateY(1.8px);
    }
    77.5% {
        transform: translateY(0.95px);
    }
    80% {
        transform: translateY(0px);
    }
    82.5% {
        transform: translateY(-0.95px);
    } 
    85% {
        transform: translateY(-1.8px);
    }
    87.5% {
        transform: translateY(-2.55px);
    }
    90% {
        transform: translateY(-3.2px);
    }
    92.5% {
        transform: translateY(-3.75px);
    }
    95% {
        transform: translateY(-4.2px);
    }
    97.5% {
        transform: translateY(-4.55px);
    }
    100% {
        transform: translateY(-4.8px);
    }
}

@keyframes spin4 {
    0% {
        transform: translateY(-3.2px);
    }
    2.5% {
        transform: translateY(-3.75px);
    }
    5% {
        transform: translateY(-4.2px);
    }
    7.5% {
        transform: translateY(-4.55px);
    }
    10% {
        transform: translateY(-4.8px);
    }
    12.5% {
        transform: translateY(-4.95px);
    }
    15% {
        transform: translateY(-5px);
    }
    17.5% {
        transform: translateY(-4.95px);
    }
    20% {
        transform: translateY(-4.8px);
    }
    22.5% {
        transform: translateY(-4.55px);
    }
    25% {
        transform: translateY(-4.2px);
    }
    27.5% {
        transform: translateY(-3.75px);
    }
    30% {
        transform: translateY(-3.2px);
    }
    32.5% {
        transform: translateY(-2.55px);
    }
    35% {
        transform: translateY(-1.8px);
    }
    37.5% {
        transform: translateY(-0.95px);
    }
    40% {
        transform: translateY(0px);
    }
    42.5% {
        transform: translateY(0.95px);
    } 
    45% {
        transform: translateY(1.8px);
    }
    47.5% {
        transform: translateY(2.55px);
    }
    50% {
        transform: translateY(3.2px);
    }
    452.5% {
        transform: translateY(3.75px);
    }
    55% {
        transform: translateY(4.2px);
    }
    57.5% {
        transform: translateY(4.55px);
    }
    60% {
        transform: translateY(4.8px);
    }
    62.5% {
        transform: translateY(4.95px);
    }
    65% {
        transform: translateY(5px);
    }
    67.5% {
        transform: translateY(4.95px);
    }
    70% {
        transform: translateY(4.8px);
    }
    72.5% {
        transform: translateY(4.55px);
    }
    75% {
        transform: translateY(4.2px);
    }
    77.5% {
        transform: translateY(3.75px);
    }
    80% {
        transform: translateY(3.2px);
    }
    82.5% {
        transform: translateY(2.55px);
    }
    85% {
        transform: translateY(1.8px);
    }
    87.5% {
        transform: translateY(0.95px);
    }
    90% {
        transform: translateY(0px);
    }
    92.5% {
        transform: translateY(-0.95px);
    } 
    95% {
        transform: translateY(-1.8px);
    }
    90.5% {
        transform: translateY(-2.55px);
    }
    100% {
        transform: translateY(-3.2px);
    }
}

@keyframes spin5 {
    0% {
        transform: translateY(0px);
    }
    2.5% {
        transform: translateY(-0.95px);
    } 
    5% {
        transform: translateY(-1.8px);
    }
    7.5% {
        transform: translateY(-2.55px);
    }
    10% {
        transform: translateY(-3.2px);
    }
    12.5% {
        transform: translateY(-3.75px);
    }
    15% {
        transform: translateY(-4.2px);
    }
    17.5% {
        transform: translateY(-4.55px);
    }
    20% {
        transform: translateY(-4.8px);
    }
    22.5% {
        transform: translateY(-4.95px);
    }
    25% {
        transform: translateY(-5px);
    }
    27.5% {
        transform: translateY(-4.95px);
    }
    30% {
        transform: translateY(-4.8px);
    }
    32.5% {
        transform: translateY(-4.55px);
    }
    35% {
        transform: translateY(-4.2px);
    }
    37.5% {
        transform: translateY(-3.75px);
    }
    40% {
        transform: translateY(-3.2px);
    }
    42.5% {
        transform: translateY(-2.55px);
    }
    45% {
        transform: translateY(-1.8px);
    }
    47.5% {
        transform: translateY(-0.95px);
    }
    50% {
        transform: translateY(0px);
    }
    52.5% {
        transform: translateY(0.95px);
    } 
    55% {
        transform: translateY(1.8px);
    }
    57.5% {
        transform: translateY(2.55px);
    }
    60% {
        transform: translateY(3.2px);
    }
    62.5% {
        transform: translateY(3.75px);
    }
    65% {
        transform: translateY(4.2px);
    }
    67.5% {
        transform: translateY(4.55px);
    }
    70% {
        transform: translateY(4.8px);
    }
    72.5% {
        transform: translateY(4.95px);
    }
    75% {
        transform: translateY(5px);
    }
    77.5% {
        transform: translateY(4.95px);
    }
    80% {
        transform: translateY(4.8px);
    }
    82.5% {
        transform: translateY(4.55px);
    }
    85% {
        transform: translateY(4.2px);
    }
    87.5% {
        transform: translateY(3.75px);
    }
    90% {
        transform: translateY(3.2px);
    }
    92.5% {
        transform: translateY(2.55px);
    }
    95% {
        transform: translateY(1.8px);
    }
    97.5% {
        transform: translateY(0.95px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes spin6 {
    0% {
        transform: translateY(3.2px);
    }
    2.5% {
        transform: translateY(2.55px);
    }
    5% {
        transform: translateY(1.8px);
    }
    7.5% {
        transform: translateY(0.95px);
    }
    10% {
        transform: translateY(0px);
    }
    12.5% {
        transform: translateY(-0.95px);
    } 
    15% {
        transform: translateY(-1.8px);
    }
    17.5% {
        transform: translateY(-2.55px);
    }
    20% {
        transform: translateY(-3.2px);
    }
    22.5% {
        transform: translateY(-3.75px);
    }
    25% {
        transform: translateY(-4.2px);
    }
    27.5% {
        transform: translateY(-4.55px);
    }
    30% {
        transform: translateY(-4.8px);
    }
    32.5% {
        transform: translateY(-4.95px);
    }
    35% {
        transform: translateY(-5px);
    }
    37.5% {
        transform: translateY(-4.95px);
    }
    40% {
        transform: translateY(-4.8px);
    }
    42.5% {
        transform: translateY(-4.55px);
    }
    45% {
        transform: translateY(-4.2px);
    }
    47.5% {
        transform: translateY(-3.75px);
    }
    50% {
        transform: translateY(-3.2px);
    }
    52.5% {
        transform: translateY(-2.55px);
    }
    55% {
        transform: translateY(-1.8px);
    }
    57.5% {
        transform: translateY(-0.95px);
    }
    60% {
        transform: translateY(0px);
    }
    62.5% {
        transform: translateY(0.95px);
    } 
    65% {
        transform: translateY(1.8px);
    }
    67.5% {
        transform: translateY(2.55px);
    }
    70% {
        transform: translateY(3.2px);
    }
    72.5% {
        transform: translateY(3.75px);
    }
    75% {
        transform: translateY(4.2px);
    }
    77.5% {
        transform: translateY(4.55px);
    }
    80% {
        transform: translateY(4.8px);
    }
    82.5% {
        transform: translateY(4.95px);
    }
    85% {
        transform: translateY(5px);
    }
    87.5% {
        transform: translateY(4.95px);
    }
    90% {
        transform: translateY(4.8px);
    }
    92.5% {
        transform: translateY(4.55px);
    }
    95% {
        transform: translateY(4.2px);
    }
    97.5% {
        transform: translateY(3.75px);
    }
    100% {
        transform: translateY(3.2px);
    }
}