.main-section {
    min-height: 100vh;
    position: relative !important;
    /* overflow: hidden; */
    padding-top: 125px;
    background-image: url(/mathbuddy_assets/home-subscription_assets/images/main-bg-img.png);
}

#hero {
    height: 85vh;
    display: flex;
    justify-content: center;

}

#qotd-frame {
    display: block;
    position: relative;
    background-color: #b0cdf9;
    border-radius: 5vw;
    width: 90%;
    height: 100%;
    overflow: hidden;
    /* Hides scrollbar from view */
}

#qotd-frame>iframe {
    width: calc(100% + 20px);
    /* Adjust as needed for your scrollbar width */
    height: calc(100% + 20px);
    /* Adjust as needed for your scrollbar height */
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    border-radius: 5vw;
}

.loader {
    position: absolute;
    border-radius: 20px;
    top: 0;
    z-index: 20000000;
    height: 100%;
    width: 100%;
    background-color: #b8b5b5c4;
    opacity: 0.8;
}

#animation-container {
    height: 100px;
    width: 100px;
}

.footer-container,
.sub-footer,
.sub-footer-mobile
 {
    background-color: white !important;
}

@media (max-width: 767px) {
    #qotd-frame {
        width: 100%;
    }
}

@media (min-height:500px) and (max-width: 600px) {
    .main-section {
        padding-top: 110px;
    }
}

@media (max-height: 500px) {
    .main-section {
        padding-top: 90px;
    }
}

@media (min-height: 800px) {
    #hero {
        height: 70vh;
    }
}