body {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-image: url("/img/bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.header-text {
    font-family: "Alice", serif;
    font-weight: 400;
    font-style: normal;
}


.bg-main {
    background-color: #ffc933;
}

.bg-red {
    background-color: #DC3545 !important;
}


#content {
    margin-top: 60px !important;
}


.secondary-bg {
    background-color: #ffe680 !important;
}



#hero {
    background-image: url("../img/hero-max.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh !important;
    margin: 0;
}

.cta-bg {
    background-image: url("../img/cta_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.floating-hero-1 {
    width: 280px;
    height: 280px;
    top: -190px;
    right: -150px;
    position: absolute;
}


.floating-hero-2 {
    width: 280px;
    height: 280px;
    left: 70px;
    bottom: 20px;
}


@media (max-width: 1400px) {
    .floating-hero-2 {
        left: -90px;
    }

}

@media (max-width: 1200px) {
    #hero {
        background-image: url("../img/hero-medium.png");
        height: 50vh !important;
    }

    .floating-hero-1 {
        width: 210px;
        height: 210px;
        right: -100px;
        top: -100px;
    }

    .floating-hero-2 {
        width: 210px;
        height: 210px;
        left: -100px;
        bottom: 0;
    }


}

@media (max-width: 768px) {
    #hero {
        background-image: url("../img/hero-mobile.png");
        height: 72vh !important;
    }

    .floating-hero-1 {
        width: 250px;
        height: 250px;
        right: -150px;
        top: -200px;
    }

    .floating-hero-2 {
        width: 250px;
        height: 250px;
        left: -150px;
        bottom: -30px;
    }

}

@media (max-width: 576px) {
    #hero {
        background-image: url("../img/hero-mobile.png");
        height: 60vh !important;
    }

    .floating-hero-1 {
        width: 180px;
        height: 180px;
        right: -100px;
        top: -120px;
    }

    .floating-hero-2 {
        width: 180px;
        height: 180px;
        left: -80px;
        bottom: 30px;
    }

}