/* Default styling for large desktops (screens larger than 1200px) */

.marquee {
    height: max-content;
    width: 100%;
    background-color: #000166;
    color: #fff;
    margin-top: 50px !important;
    line-height: normal;
}
.marquee div span a {
    color: #fff;
    line-height: 1;
    margin-right: 100px;
    padding: 20px 0;
}
/* Desktops and large tablets (max-width: 1200px) */
@media only screen and (max-width: 1200px) {
    .marquee {
        margin-top: 75px !important;
        height: auto;
        line-height: 1;
    }
}

/* Custom screen size for 1136px resolution */
@media only screen and (max-width: 1136px) {
    .marquee {
        margin-top: 75px !important;
        height: auto;
        line-height: 1;
        padding: 10px;
    }
}

/* Standard tablets (max-width: 992px) */
@media only screen and (max-width: 992px) {
    .marquee {
        margin-top: 40px !important;
        height: auto;
        line-height: 1;
        padding: 10px;
    }
}

/* Small tablets and large phones (max-width: 768px) */
@media only screen and (max-width: 768px) {
    .marquee {
        margin-top: 40px !important;
        height: auto;
        line-height: 1;
        padding: 10px;
    }
}

/* Small phones (max-width: 576px) */
@media only screen and (max-width: 576px) {
    .marquee {
        margin-top: 10px !important;
        height: auto;
        line-height: 1;
        padding: 20px 0;
    }

    .marquee div span a {
        line-height: 1;
        display: inline-block;
        padding: 0;
    }
}