/* Homapage Hero Banner Style*/
community_layout-section:has(.krkl-hero-banner),
community_layout-section:has(.krkl-hero-banner-faq),
community_layout-section:has(c-krkl-homepage-hero-banner) {
    padding: 0 !important;
}

community_layout-section:has(.krkl-hero-banner) .columns-content,
community_layout-section:has(.krkl-hero-banner-faq) .columns-content,
community_layout-section:has(c-krkl-homepage-hero-banner) .columns-content {
    max-width: 100% !important;
}

.krkl-hero-banner-title * {
    color: #FFF !important;
    font-size: 53px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 58.3px !important;
    font-family: "LeagueSpartan-Bold";
}

.krkl-hero-banner * {
    --dxp-c-l-height: 400px !important;
    --dxp-c-m-height: 400px !important;
    --dxp-c-s-height: 400px !important;
    --dxp-c-s-button-group-width: 100%;
    --dxp-c-block-flexible-container-min-height: 400 !important;
}

.krkl-hero-banner-faq * {
    --dxp-c-l-height: 215px !important;
    --dxp-c-m-height: 215px !important;
    --dxp-c-s-height: 215px !important;
    --dxp-c-s-button-group-width: 100%;
    --dxp-c-block-flexible-container-min-height: 215px !important;
}

.krkl-hero-banner-faq {
    display: block;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.krkl-hero-banner dxp_content_layout-block-content-region {
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 992px) {
    .krkl-hero-banner dxp_content_layout-block-content-region {
        padding: 20px 40px;
    }
}

@media screen and (min-width: 1024px) {
    .krkl-hero-banner dxp_content_layout-block-content-region {
        padding: 40px 80px;
    }
}

.krkl-hero-banner .main-content {
    /* display: flex;
    align-items: center;
    justify-content: center; */
}


.krkl-hero-banner .main-content-container {
    min-height: 400px;
    --dxp-c-content-container-padding: 0;
    width: 1400px;
}

.krkl-hero-banner-faq .main-content-container {
    min-height: 215px !important;
}

.krkl-hero-banner-title-green * {
    font-size: 18px !important;
    color: #1D945D !important;
    font-weight: 700 !important;
    line-height: 27px !important;
    font-style: normal !important;
    font-family: "PTSans-Regular";
    text-transform: uppercase !important;
}

.krkl-hero-banner-subtitle * {
    color: #FFF !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    font-family: "PTSans-Regular";
    font-style: normal !important;
    line-height: 30.8px !important;
}

/* Outside blue button */
.krkl-hero-banner-button {
    width: 100%;
}
/* Inside blue button */
.krkl-hero-banner-button * {
    height: 47px;
    display: flex;
    padding: 3px 6px;
    border-radius: 25px;
    align-items: center;
    background: #11528F;
    justify-content: center;
    font-size: 18px !important;
    font-family: "PTSans-Bold" !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.krkl-hero-banner-button *:hover {
    background: #004881 !important;
}

.krkl-hero-banner dxp_content_layout-button-group {
    margin-top: 14px !important
}

.krkl-hero-banner-button .slds-button::before {
    width: 22px;
    height: 22px;
    margin-right: 4px;
    content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'> <path d='M8.25 5.5L13.75 11L8.25 16.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/> </svg>");
}

.krkl-hero-banner .dxp-block-image-host {
    background-image: linear-gradient(270deg, rgba(0, 35, 62, 0.20) 13.44%, rgba(0, 36, 65, 0.80) 99.9%), var(--dxp-c-block-l-image-url)  !important;
}

.krkl-hero-banner .component-wrapper-spacer {
    margin-bottom: 0 !important;
}

/* Mobile styles */
@media only screen and (max-width: 767px) {
    .krkl-hero-banner .main-content-container {
        padding: 60px 16px !important;
    }
    .krkl-hero-banner .main-content {
        --dxp-c-s-content-width: 100%;
    }
    .krkl-hero-banner-title * {
        font-size: 30px !important;
        line-height: 33px !important;
    }
    .krkl-hero-banner-title-green * {
        font-size: 16px !important;
        line-height: 24px !important;
    }
    .krkl-hero-banner-subtitle * {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .krkl-hero-banner .dxp-block-image-host {
        background-image: linear-gradient(270deg, rgba(0, 35, 62, 0.20) 13.44%, rgba(0, 36, 65, 0.80) 99.9%), var(--dxp-c-block-m-image-url) !important;
    }
}


/* Tablet styles */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .krkl-hero-banner .main-content-container {
        padding: 60px 40px !important;
    }
    .krkl-hero-banner .main-content {
        --dxp-c-m-content-width: 70%;
    }
    .krkl-hero-banner-title * {
        font-size: 45px !important;
        line-height: 49.5px !important;
    }
    .krkl-hero-banner-title-green * {
        font-size: 16px !important;
        line-height: 24px !important;
    }
    .krkl-hero-banner-subtitle * {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .krkl-hero-banner .dxp-block-image-host {
        background-image: linear-gradient(270deg, rgba(0, 35, 62, 0.20) 13.44%, rgba(0, 36, 65, 0.80) 99.9%), var(--dxp-c-block-l-image-url) !important;
    }
}

@media screen and (max-width: 1024px) {
    .krkl-hero-banner-button * {
        font-size: 15px !important;
    }
}