/* z-indexes: promoCon needed a high value so it renders over chatbot widgets and such. in turn, the menu and sitewide search need to render over the promoCon, thus: */
.heroCorp010 .promoCon {z-index:1000000}
.header.sticky {z-index:1000010}
#offcanvasRight,
#scrollingModal {z-index:1000020}
/* end z-index stuff */
.heroCorp010 {
    border-top:100px solid #000;margin:0;padding:0;
    background-size:cover;background-position:center top;background-repeat:no-repeat;
}
.heroCorp010::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    pointer-events: none;
    z-index: 0;
}

.heroCorp010 .content {position:relative;max-width:unset;padding:20px;z-index:2}
.heroCorp010 .content .title {font-size:29px;line-height:1.2;font-weight:900;color:#fff;margin-bottom:20px}
.heroCorp010 .subtitle {
    font-weight:500;font-size:18px;line-height:26px;
    color:#fff;margin-bottom:20px
}
.heroCorp010 .primary-theme-btn {
    cursor:pointer;margin:0
}
.heroCorp010 .mobileHeroContainer {
    position:relative;height:80vw;max-height:400px;
    background-size:cover;background-position:center;background-repeat:no-repeat;
}

.heroCorp010 .googleRatingCon {
    position:relative;margin:40px 0 20px 0;
    display:flex;align-items:center;justify-content:center;
    color:#fff
}

.heroCorp010 .googleRatingCon::before,
.heroCorp010 .googleRatingCon::after {
    content:'';display:block;border-bottom: 2px solid #fff;height:0
}
.heroCorp010 .googleRatingCon::before {flex-grow:1;margin-right:20px}
.heroCorp010 .googleRatingCon::after {flex-grow:1;margin-left:20px}
.heroCorp010 .googleRatingCon .googleRatingBar {
    align-items:center;gap:8px;text-transform:uppercase;
    font-size:18px;font-weight:500;color:#fff;font-family:'Nunito Sans','Avenir'
}
.heroCorp010 .googleRatingCon .googleRatingBar > div {display:flex;gap:10px;align-items:center;justify-content:center}
.heroCorp010 .googleRatingCon .googleRatingBar .stars {margin-bottom:5px}
.heroCorp010 .googleRatingCon .googleRatingBar .stars i {color:#ebe60f;font-size:18px}
.heroCorp010 .googleRatingCon .googleRatingBar .label {text-transform:uppercase;letter-spacing:3px}
.heroCorp010 .googleRatingCon .googleLogo {width:120px}

:root {
    --promoTickerBg:#f5f6ff
}
/* other colors: #ebebeb, */
.heroCorp010 .promoCon {position:absolute;bottom:0;right:0;z-index:1000000}
.heroCorp010 .promoTab {
    position:relative;margin:0;width:fit-content;z-index:10;padding:8px 20px 0 20px;
    font-size:17px;line-height:1;letter-spacing:0.4px;font-weight:900;text-transform:uppercase;
    background:var(--promoTickerBg)
}
.heroCorp010 .promoCardWrapper {
    position:relative;background:var(--promoTickerBg)
}
.heroCorp010 .promoCard {
    padding:10px;background:var(--promoTickerBg);
    display:flex;align-items:center
}
.heroCorp010 .promoCard img {width:110px;height:110px;object-fit:contain}
.heroCorp010 .promoCard .promoDetailCon {display:flex;flex-direction:column;flex:1;padding:0 30px 0 20px}
.heroCorp010 .promoCon .promoCard .promoDetailCon .heading {
    font-size:15px;font-weight:800;line-height:1;margin:0 0 10px 0
}
.heroCorp010 .promoCon .promoCard .promoDetailCon .description {
    font-size:14px;line-height:1.2;margin-bottom:10px
}
.heroCorp010 .promoCon .promoCard .promoDetailCon .promoLink {
    font-size:15px;line-height:1;font-weight:700;color:#000;text-decoration:none
}
.heroCorp010 .promoCon .promoCard .promoDetailCon .promoLink:hover {color:#d3332b}

.heroCorp010 .promoDots {
    position:absolute;right:15px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:20px;z-index:10
}
.heroCorp010 .promoDots .dot {
    width:10px;height:10px;cursor:pointer;
    border-radius:50%;background:#000;opacity:0.8;
    transition:background 1s ease, transform 1s ease
}
.heroCorp010 .promoDots .dot.active {
    background: #c30a00;
    transform: scale(1);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c30a00;
}

@media (min-width: 576px) {
    .heroCorp010 .mobileHeroContainer {
        background-position-x: center;
        background-position-y: -17vw;
    }
}

@media (max-width: 768px) {
    .heroCorp010 > .container {padding:0;max-width:unset}
}

@media (min-width: 768px) {
    .heroCorp010 {
        background-position-x:center;
        background-position-y:-8vw;
        padding-bottom:20px;min-height:560px
    }
    .heroCorp010 .mobileHeroContainer {display:none}
    .heroCorp010 .content {padding:20px}
    .heroCorp010 .content .title {font-size:38px;line-height:45px}
    .heroCorp010 .content .subtitle {font-size:23px;line-height:1.3;width:430px}
    .heroCorp010 .googleRatingCon {width:310px}
    .heroCorp010 .promoCon {width:49vw}
}

@media (min-width: 992px) {
    .heroCorp010 .content .title {font-size:44px;line-height:53px}
    .heroCorp010 .content .subtitle {font-size:26px;width:500px}
}
@media (min-width: 1050px) {
    .heroCorp010 .promoCard {padding:15px}
    .heroCorp010 .promoCon .promoCard .promoDetailCon .heading {font-size:17px}
    .heroCorp010 .promoCon .promoCard .promoDetailCon .description {font-size:15px;line-height:1.3}
    .heroCorp010 .promoCon .promoCard .promoDetailCon .promoLink {font-size:16px}
}

@media (min-width: 1279px) {
    .heroCorp010 {min-height:600px}
    .heroCorp010 .content {margin-top:40px}
    .heroCorp010 .googleRatingCon {width:90%;margin-top:70px}
    .heroCorp010 .googleRatingCon .googleRatingBar {display:flex}
    .heroCorp010 .promoCon {width:40vw}
}
@media (min-width: 1400px) {
    .heroCorp010 {min-height:675px}
    .heroCorp010 .content {margin-top:80px}
    .heroCorp010 .googleRatingCon {width:100%;margin-top:80px}
}
@media (min-width: 1700px) {
    .heroCorp010 {background-position-y:-10vw}
}
