:root {
    --primary-clr: #ffff;
    --secondary-clr: #312f10;
    --btn-clr: #ffe500;
    --background_1: #ff5c5c;
    --background_2: #30C09E;
    --background_3: #38CCDD;
    --background_4: #6278D0;
    --background_5: #C1C76C;
    --background_6: #E258A6;
}

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

#main {
    overflow: hidden;
}

.display-3 {
    color: var(--secondary-clr);
    font-family: "Poppins", sans-serif;
    letter-spacing: -0.075rem;
    width: 100%;
    line-height: 1.125;
    font-weight: 800;
    color: var(--primary-clr);
}

.display-4 {
    color: var(--secondary-clr);
    font-family: "Poppins", sans-serif;
    letter-spacing: -0.075rem;
    width: 100%;
    font-size: 5.5em;
    line-height: 1.125;
    font-weight: 800;
    color: var(--primary-clr);
}

sup {
    font-size: small;
    vertical-align: super;
}

p {
    font-weight: 100;
    text-transform: uppercase;
    font-family: "Happy Monkey", system-ui;
    letter-spacing: 0.025rem;
    width: calc(100% + 0.025rem);
    font-size: 1.5em;
    line-height: 1.875;
    color: var(--primary-clr);
}

small {
    text-transform: uppercase;
    color: var(--secondary-clr);
    font-family: "Poppins", sans-serif;
    letter-spacing: 0.35rem;
    width: calc(100% + 0.35rem);
    font-size: 0.875em;
    line-height: 2;
    font-weight: 600;
}

.hero {
    background-image: url(../images/hero_banner.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
}

.hero::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--background_1);
    opacity: 0.8;
    z-index: -1;
}

.img-box {
    height: 741px;
}

.img-box img {
    height: 741px;
    width: -webkit-fill-available;
    object-fit: cover;
}

.container1 {
    background: var(--background_2);
    height: 741px;
}

.container2 {
    background: var(--background_3);
    height: 741px;
}

.container3 {
    background: var(--background_4);
    height: 741px;
}

.container4 {
    background: var(--background_5);
    height: 741px;
}

.container5 {
    background: var(--background_6);
    height: 741px;
}

.footer-wrapper {
    height: 741px;
    background: var(--background_4);
}

.btn.btn-primary {
    background: var(--btn-clr);
    padding: 20px 40px;
    border-radius: 50px;
    border: none;
    transition: all .3s;
}

.btn.btn-primary:hover {
    transform: scale(1.1125);
}

.bi.bi-arrow-down {
    color: var(--secondary-clr);
}

@media only screen and (max-width: 555px) {
    .display-4 {
        font-size: 4em;
    }
}