/* switch background images, Lighthouse does not like normal background cover */
/*
@media (width<650px) {
    .background-image-1, .background-image-2, .background-image-3  {
        display: none;
    }
}

@media (650px<=width<850px) {
    .background-image-1 {
        display: inline !important;
        position: absolute;
        z-index: -1000;
        width: 100%;
        object-fit: cover;
    }
    .background-image-2, .background-image-3  {
        display: none;
    }
}

@media (850px<=width<1250px) {
    .background-image-2 {
        display: inline !important;
        position: absolute;
        z-index: -1000;
        width: 100%;
        object-fit: cover;
    }
    .background-image-1, .background-image-3 {
        display: none;
    }
}

@media (1251px<=width) {
    .background-image-1, .background-image-2 {
        display: none;
    }
    .background-image-3 {
        display: inline !important;
        position: absolute;
        z-index: -1000;
        width: 100%;
        object-fit: cover;
    }
}
*/

.header-image {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 15px;
    padding-bottom: 40px;


    /*loaded in js with 5 sec delay for CEO : */
    background-image: url(../img/car-shipping.webp);
    background-size: cover;
    background-position: center 60%;
    background-repeat: no-repeat;

}

/* half transparent black over header picture to see white title better */
.header-image:after {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  /*background: rgba(0, 0, 0, 0.5);*/
  background: linear-gradient(to right, rgba(0,0,0,0.5) 50%, transparent);
  /*z-index: -15;*/
}

.header-image:has(.quote) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header-bg {
    /*background: var(--white);*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 40px;
    position: relative;
}

.header-image::before, .header-bg::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    /*z-index: -25;*/
    background-color: var(--blue_25);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.header-image h1 { /*h1 in header is preloaded*/
    color: var(--white);
    padding-left: 20px;
    max-width: 60%;
    text-align: left;
    margin: 15px 0;
    line-height: 1;
    font-size: 60px;
    z-index: 5;
}

.header-image:has(.quote) h1 {
    max-width: 900px;
    /*flex-basis: 70%;*/
}

.header-image h1 .material-symbols-outlined {
    font-size: inherit;
    line-height: inherit;
    vertical-align: text-top;
    position: relative;
    top: 2px;
}

.quote-number:has(#loadSelectId), #loadSelectId, .header-image .quote-number {
    background: #a8b6c5;
    z-index: 5;
}

.header-image div:has(.quote-number) {
    flex-basis: 100%;
}

.header-image .quote-number {
    display: inline-block;
}

.header-image .quote {
    flex-basis: 33%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.header-image .quote a {
    display: block;
    background: var(--blue_75);
    color: var(--white);
    font-size: 70px;
    line-height: 1;
    font-weight: 600;
    margin: 0;
    padding: 20px 40px;
    border: 0;
    border-radius: calc(var(--input_radius)*3);
    /*transition: all 0.5s ease-in-out;*/
}

.header-image .quote::before {
    width: 50px;
    filter: invert() grayscale() brightness(2);
}

.sticky-wrapper {
    position: fixed;
    bottom: 0;
}

.sticky-wrapper.left {
    padding-left: var(--left_right);
    left: 0;
}

.sticky-wrapper.right {
    padding-right: var(--left_right);
    right: 0;
}

.bottom-sticky {
    z-index: 7;
    height: auto !important;
    display: flex !important;
    padding-bottom: 0 !important;
}

.bottom-sticky.quote {
    padding: 5px 20px !important;
    line-height: 0;
    border-radius: calc(var(--input_radius)*3);
    background: var(--blue_75);
    justify-content: center;
    align-items: center;
    width: fit-content;
    block-size: fit-content;
    margin: 0 10px;
}

.bottom-sticky.quote span {
    color: var(--white);
    font-size: 30px;
    line-height: 1;
    font-weight: 600;
}

/* gray line for when there is no stepper or decorative icon */

.header-image + .row {
    border-top: 25px solid var(--gray);
    padding-top: 30px;
    position: relative;
}

.header-image + .row::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: -30px;
    width: 100%;
    height: 6px;
    background: var(--white);
}

.flex10 {
    flex: 1 1 10% !important;
}

.flex20 {
    flex: 1 1 20% !important;
}

.flex30 {
    flex: 1 1 30% !important;
}

.flex40 {
    flex: 1 1 40% !important;
}

.flex50 {
    flex: 1 1 50% !important;
}

.flex60 {
    flex: 1 1 60% !important;
}