#banner-img-cnt {
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}

#banner-vid {
    width: 100%;
}

#banner-fixed-img {
    width: 60%;
    z-index: 1;
}

.banner-abs-img {
    position: absolute;
}

/* Big circle (slow up and down, small range) */
#big-circle-img {
    width: 11vw;
    top: 18%;
    right: 18%;
    z-index: 0;
    animation: slowUpDown 3s infinite ease-in-out;
}

/* Wave (fast up and down, small range) */
#wave-img {
    width: 35%;
    bottom: 10%;
    right: 0;
    z-index: 1;
    animation: fastUpDown 1s infinite ease-in-out;
}

/* Circle (medium up and down, small range) */
#circle-img {
    width: 14%;
    bottom: 12%;
    left: 16%;
    z-index: 1;
    animation: mediumUpDown 2s infinite ease-in-out;
}

/* Half circle (rotate left/right, medium speed) */
#half-circle-img {
    width: 30%;
    top: 40%;
    left: 5%;
    z-index: 0;
    animation: rotateLeftRight 2s infinite ease-in-out;
}

/* Keyframes for Up and Down Movements */
@keyframes slowUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Adjust the value for desired movement range */
    }
}

@keyframes fastUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes mediumUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Keyframes for Left/Right Rotation */
@keyframes rotateLeftRight {
    0%, 100% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg); /* Adjust to change how far it rotates */
    }
}

#new-brand-cnt {
    display: flex;
    color: black;
    justify-content: space-between;
    padding: 4% 0;
}

#new-brand-cnt > div:first-child {
    width: 45%;
}

#new-brand-cnt > div:last-child {
    width: 50%;
}

#fp-cnt {
    background-color: #161e35;
}

#link-cnt {
    padding: 4% 0;
}

#fp-links-cnt {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fp-link-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#fp-visuals {
    background-color: #2ac6d1;
}

#fp-writing {
    background-color: #c9239c;
}

#fp-pb {
    background-color: #0844bc;
}

#fp-resources {
    background-color: #5523b7;
}

.fp-link-clm {
    position: relative;
    width: 97.5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3.5% 2% 3.5% 3%;
}

.fp-link-txt-cnt {
    width: 62.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fp-link-txt-cnt div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fp-link-txt-cnt div p {
    margin-left: 5%;
}

.arrow-cnt {
    width: 3vw;
    height: 3vw;
    background-color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.right-arrow {
    display: inline-block;
    padding: 0.3vw;
    margin-right: 0.15vw !important;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

#fp-visuals .right-arrow {
    border: solid #2ac6d1;
    border-width: 0 0.2vw 0.2vw 0;
}

#fp-writing .right-arrow {
    border: solid #c9239c;
    border-width: 0 0.2vw 0.2vw 0;
}

#fp-pb .right-arrow {
    border: solid #0844bc;
    border-width: 0 0.2vw 0.2vw 0;
}

#fp-resources .right-arrow {
    border: solid #5523b7;
    border-width: 0 0.2vw 0.2vw 0;
}

.fp-link-clm h2, .fp-link-clm div, .fp-link-clm p {
    margin: 0;
}


.fp-link-clm p {
    padding: 4% 0;
    font-size: 1.06vw;
}


.fp-link-clm-gap {
    width: 5%;
}

.fp-link-row-gap {
    height: 1.8vw;
}

.fp-link-img-cnt {
    width: 30%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}

.fp-link-img-cnt img {
    width: 100%;
}

#fp-visuals .fp-link-img-cnt {
    position: unset;
}

#fp-visuals .fp-link-img-cnt img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
}

#eyesore-cnt {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-bottom: 4%;
}

#eyesore-cnt > div {
    width: 40%;
}

#eyesore-cnt > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#eyesore-cnt > div:last-child > a {
    width: 100%;
}

#eyesore-cnt > div:last-child > a > img {
    width: 100%;
}

#eyesore-cnt p {
    color: black;
}

footer {
    background-color: #161e35;
}

@media (max-width: 727px) {

    #banner-img-cnt {
        display: flex;
        margin-top: 60px;
    }

    #banner-txt-cnt {
        padding-bottom: 60px;
    }

    #banner-txt-cnt h1 {
        margin-top: 0;
    }

    #banner-cnt section {
        flex-direction: column-reverse;
    }

    #new-brand-cnt > div:first-child {
        text-align: center;
    }

    #mobile-nav-cnt {
        background-color: #0d1322;
    }

    #new-brand-cnt {
        flex-direction: column;
    }

    #new-brand-cnt > div:first-child, #new-brand-cnt > div:last-child {
        width: 100%;
    }

    .fp-link-row {
        flex-direction: column;
    }

    .fp-link-clm {
        width: 94%;
        margin-bottom: 5%;
    }

    .fp-link-clm p {
        font-size: 12px;
    }

    .fp-link-row-gap {
        display: none;
    }

    #eyesore-cnt {
        flex-direction: column-reverse;
    }

    #eyesore-cnt > div {
        width: 100%;
    }

    .arrow-cnt {
        width: 30px;
        height: 30px;
    }

    .right-arrow {
        padding: 3px;
        margin-right: 1.5px !important;
    }

    #eyesore-cnt > div:first-child {
        text-align: center;
        align-items: center;
    }

}