/* Sticky Header */
body:not(.elementor-editor-active) .page-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

/* custom social icons - make them show when changing background color */
.elementor-grid-item[style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"],
.elementor-social-icon svg[style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"] {
    background-color: transparent !important;
}

.elementor-social-icon-[style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"] {
    background-color: #000000 !important;
}

/* keep fotnawsome family font even when Arial font is forced by a11y plugin */
body.arial_font_on .fa,
body.arial_font_on .fas,
.arial_font_on .far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;

}

body.arial_font_on .fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400;
}

/* keep arrow icons */
body.arial_font_on [class*=" eicon-"], 
body.arial_font_on [class^="eicon"]{
    font-family: eicons !important;
}

/* when background-color is chosen in a11y, make sure that containers are distinguished from the background */
body[style*="background-color"] .elementor-widget-container {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

body[style] .elementor-80930 .elementor-element .elementor-element-populated {
    /* for landing homepage */
    border: 1px solid;
}

/* make slider bullets show when a11y background color is chosen */
body[style*="background-color"] .swiper-pagination-bullet-active {
    background-color: #FFF100 !important;
}

body[style*="background-color"] .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #000000 !important;
}

/* Adapt above colors for yellow background and black background */
body[style*="background-color: rgb(255, 216, 0)"] .swiper-pagination-bullet-active {
    background-color: turquoise !important;
}

body[style*="background-color: rgb(255, 216, 0)"] .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #000000 !important;
}

body[style*="background-color: rgb(0, 0, 0)"] .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #ffffff !important;
}

/* elementor ribbon hides what's underneath it when background color is chosen. make its background transparent */
body[style*="background-color"] .elementor-ribbon {
    background-color: transparent !important;
}