.service-hero {
    /* Change these to control where the text breaks */
    --cataracts-max-width: 700px;
    --cosmetics-max-width: 650px;
    --lasik-max-width: 700px;
    --evo-icl-max-width: 750px;
    --hero-border-color-light: #fff;
    --hero-border-color-dark: var(--dark-slate-blue);
    --hero-color-light: #fff;
    --hero-color-dark: var(--black-2);
}

body:not(.home) .hero-headline {
    margin: 0;
    font-size: clamp(1.7rem, 5vw, 4rem);
    line-height: 1.2;
    display: inline;
}

.text-inner-hero {
    padding-top: 5px;
    padding-bottom: 10px;
    max-width: 700px;
}

.page-template-oculoplastics-page .hero-headline {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
}

.page-template-oculoplastics-page h1 {
    padding-right: 10px;
}

.cta-buttons-cat {
    max-width: 100%;
}

.border-gap-outer {
    position: relative;
    /*width: 100%;*/
    /*height: 100%;*/
}

.border-gap {
    --bottom-line-height: 15px;
    --top-line-height: 15px;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid;
    border-right: none;
    width: 94%;
    height: 100%;
}

.border-gap::before,
.border-gap::after {
    content: '';
    position: absolute;
    right: 0;
    height: 7%;
    width: 1px;
}

.gradient-dark .border-gap {
    border-color: var(--hero-border-color-light);
}

.gradient-light .border-gap {
    border-color: var(--hero-border-color-dark);
}

.gradient-dark .border-gap::before,
.gradient-dark .border-gap::after {
    background: var(--hero-border-color-light);
}

.gradient-light .border-gap::before,
.gradient-light .border-gap::after {
    background: var(--hero-border-color-dark);
}

.border-gap::before {
    bottom: 0;
}

.border-gap::after {
    top: 0;
}

.inner-hero-text-wrapper {
    max-width: none;
    padding: 15px 25px 30px 25px;
    position: relative;
    width: 80%;
    z-index: 2;
}

.sub-hero-header {
    display: block;
    width: auto;
    position: static;
}

.gradient-dark .inner-hero-text-wrapper,
.gradient-dark h1 {
    color: #fff;
}

.gradient-light .inner-hero-text-wrapper,
.gradient-light h1, .gradient-light .sub-hero-header {
    color: var(--hero-color-dark);
}

.gradient-light .inner-hero-text-wrapper,
.gradient-light .sub-hero-header {
    color: var(--black);
}

.page-template-cataracts-page .inner-hero-text-wrapper {
    max-width: var(--cataracts-max-width);
}

.page-template-cosmetic-page .inner-hero-text-wrapper {
    max-width: var(--cosmetics-max-width);
}

.page-template-lasik-page .inner-hero-text-wrapper {
    max-width: var(--lasik-max-width);
}

.page-template-evo-icl-page .inner-hero-text-wrapper {
    max-width: var(--evo-icl-max-width);
}

.page-template-evo-icl-page {
    --hero-border-color-light: #fff;
    --hero-border-color-dark: var(--dark-slate-blue);
    --hero-color-light: #fff;
    --hero-color-dark: var(--black-2);
}

.has-hero .border-gap::after {
    height: var(--top-line-height)
}

.has-hero .border-gap::before {
    height: var(--bottom-line-height);
}

.service-hero {
    width: 100%;
    --margin-top: 0px;
    z-index: 200;
    margin-top: var(--margin-top);
    height: calc(100vh - var(--margin-top));
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    padding: 100px 5%;
    display: flex;
    position: relative;
}

.hero-gradient-overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.gradient-dark .hero-gradient-overlay {
    background: linear-gradient(122deg, rgba(0, 0, 0, .41), rgba(0, 0, 0, .32) 41%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 85%)

}

.gradient-light .hero-gradient-overlay {
    background: linear-gradient(110deg, rgba(255, 255, 255, .7) 40%, rgba(255, 255, 255, 0) 60%);
}

@media screen and (max-width: 991px) {

    .text-inner-hero {
        max-width: 90%;
    }

    .service-hero {
        --margin-top: 0px;
    }

    .service-hero {
        align-items: flex-end;
        padding-bottom: 2%;
        padding-left: 4%;
        padding-right: 2%;
    }

    .cta-buttons-cat {
        flex-wrap: wrap;
    }

    .cta-buttons-cat a {
        width: calc(100% - 20px);
    }

    .cta-buttons-cat a:not(:first-child) {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {

    .has-hero .border-gap::before,
    .has-hero .border-gap::before {
        height: var(--bottom-line-height);
    }

    .cta-buttons-cat a {
        max-width: calc(100% - 20px);
    }

    .service-hero {
        height: 600px;
    }

}

@media screen and (max-width: 600px) {
    .gradient-dark .hero-gradient-overlay {
        background: linear-gradient(0deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0)), linear-gradient(0deg, rgba(0, 0, 0, .41), rgba(0, 0, 0, .62) 100%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 85%);
    }

    .gradient-light .hero-gradient-overlay {
        background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0)), linear-gradient(0deg, rgba(255, 255, 255, .41), rgba(255, 255, 255, .62) 100%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 85%);
    }

}

@media screen and (max-width: 479px) {

    .sub-hero-header {
        margin-left: 0;
    }

    .service-hero {
        padding-left: 0;
        padding-right: 0;
        padding-top: 80px;
        justify-content: center;
        align-items: flex-end;
    }

    .cta-buttons-cat a:not(:first-child) {
        margin-top: 10px;
    }

    .inner-hero-text-wrapper {
        padding: 10px 0 15px 18px;
        width: 90%;
        margin: 0 auto;
    }

    .has-hero .service-hero .hero-headline {
        display: block;
    }

    .page-template-cataracts-page .inner-hero-text-wrapper,
    .page-template-oculoplastics-page .inner-hero-text-wrapper {
        max-width: 100%;
        width: 90%;
        margin: 0 auto;
    }

}