.hero_backgroundimg {
    display: none;
}

.hero_background {
    display: none;
}

.hero_text {
    display: flex;
    flex-direction: column;
}

    .hero_text h1 {
        width: 360px;
        height: 132px;
        font-size: 2.5rem;
        font-weight: 900;
        line-height: 66px;
        text-align: center;
    }

.hero_section {
    height: 741px;
    width: 100%;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.hero_text span {
    font-family: var(--font-family2);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 66px;
    text-align: center;
    color: var(--caveat-color);
}

.hero_text p {
    margin-top: 30px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3400000035762787px;
    text-align: center;
}

.hero_text div {
    height: auto;
}

.hero_para {
    max-width: 321.86px;
    height: 96px;
    margin: 0 auto;
}

.hero_btns {
    display: flex;
    height: 56px;
    width: 247px;
    margin: 0 auto;
    padding-top: 40px;
    gap: 8px;
    margin-top: 0px;
}

.hero_btn1 {
    width: 103px;
    height: 44px;
    padding: 10px 25px 10px 25px;
    gap: 0px;
    border: 1px 0px 0px 0px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 24px;
    background-color: var(--basic_color);
    border: 1px solid var(--btn-bgcolor);
    color: var(--btn-bgcolor);
}

.hero_btn2 {
    width: 125px;
    height: 44px;
    padding: 10px 20px 10px 20px;
    gap: 0px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 24px;
    background-color: var(--btn-bgcolor);
    color: var(--basic_color);
    border: 1px solid var(--btn-bgcolor);
}

.hero_img {
    width: 355px;
    height: 376px;
}

    .hero_img img {
        width: 357px;
        height: 397px;
        margin-top: 20px;
        top: 394px;
        left: 1px;
        gap: 55px;
    }

@media (min-width: 576px) {
    .hero_text h1 {
        width: 415px;
        height: 132px;
        font-size: 3.125rem;
    }

    .hero_text span {
        font-size: 3.125rem;
        font-weight: 900;
    }

    .hero_section {
        height: 950px;
    }

    .hero_para {
        max-width: 310px;
        height: 101px;
    }

    .hero_text p {
        max-width: 308.86px;
        height: 101px;
        font-size: 1rem;
    }

    .hero_btns {
        width: 330px;
        height: 56.38px;
        top: 338px;
        left: 163px;
        padding: 0px 0px 0.38px 0px;
        margin-top: 30px;
        margin-right: 0px;
        gap: 8px;
    }

    .hero_btn1 {
        font-size: 0.9375rem;
    }

    .hero_img {
        margin-top: 0px;
        width: 576px;
        height: 601px;
        gap: 0px;
    }

        .hero_img img {
            width: 576px;
            height: 601px;
            margin-top: 0px;
        }
}

@media (min-width: 992px) {
    .hero_section {
        width: 100%;
        max-height: 470px;
    }

    .hero_sectionp {
        height: 470px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        text-align: center;
    }

    .hero_section {
        position: relative;
        align-items: flex-end;
        align-items: center;
        flex-direction: row;
        overflow: hidden;
        width: 992px;
        height: 500px;
        background-image: url("../images/hero_images/hero_background992.webp");
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero_text {
        /* margin-top: 126px; */
        width: 453px;
        height: 324px;
        margin-left: 40px;
        position: relative;
        z-index: 1;
        padding-left: 20px;
    }

        .hero_text h1 {
            width: 419px;
            margin-top: 0px;
            margin-bottom: 14px;
            font-size: 3.068125rem;
            text-align: left;
        }

        .hero_text span {
            font-size: 3.068125rem;
            line-height: 66px;
        }

    .hero_para {
        max-width: 395.12px;
        margin-bottom: 20px;
        margin-top: 10px;
        margin-left: 0;
        margin-right: 0px;
        height: 96px;
    }

    .hero_text p {
        max-width: 395.12px;
        height: 96px;
        margin-top: 0px;
        font-size: 1.0625rem;
        text-align: left;
    }

    .hero_btns {
        width: 330px;
        height: 56px;
        top: 439px;
        left: 58px;
        padding: 6px 0px 6px 0px;
        gap: 10px;
        margin: 0px;
    }

    .hero_img {
        padding-left: 20px;
        /* margin-top: 130px; */
        width: 478px;
        height: 408px;
        top: 130px;
        left: 514px;
        gap: 0px;
    }

        .hero_img img {
            width: 478px;
            height: 408px;
            margin-top: 0px;
        }
}

@media (min-width: 1200px) {
    .hero_sectionp {
        min-height: 500px;
    }

    .hero_section {
        margin-top: 0px;
        width: 1200px;
        min-height: 500px;
        background-image: url("../images/hero_images/hero_background1200.webp");
    }

    .hero_text {
        min-width: 545px;
        height: 342px;
        margin-left: 40px;
        padding-left: 40px;
        margin-top: 0px;
    }

        .hero_text h1 {
            width: 545px;
            margin-top: 0px;
            margin-bottom: 34px;
            font-size: 3.5rem;
        }

        .hero_text span {
            font-size: 3.5rem;
            line-height: 66px;
        }

    .hero_para {
        max-width: 545.12px;
        margin-bottom: 50px;
        margin-top: 10px;
        height: 56px;
    }

    .hero_text p {
        min-width: 545px;
        height: 56px;
        margin-top: 0px;
        font-size: 1.25rem;
    }

    .hero_text div {
        text-align: left;
        align-items: left;
        justify-content: left;
    }

    .hero_btns {
        width: 330px;
        height: 56px;
        top: 439px;
        left: 58px;
        padding: 6px 0px 6px 0px;
    }

    .hero_img {
        /* margin-bottom: 130px; */
        padding: 0;
        margin-left: 16px;
        width: 598px;
        height: 509px;
    }

        .hero_img img {
            width: 598px;
            height: 509px;
            top: 64px;
            left: -43px;
            gap: 0px;
        }
}

@media (min-width: 2000px) {
    .hero_sectionp {
        height: 800px;
    }

    .hero_section {
        min-height: 755px;
    }

        .hero_section .hero_img {
            width: 100%;
        }

    .hero_section {
        width: 2000px;
        height: 888px;
        background-image: url("../images/hero_images/hero_background2000.webp");
        overflow: visible;
    }

    .hero_text {
        height: 378px;
        min-width: 739px;
        padding-left: 0px;
        margin-top: 0px;
        margin-left: 160px;
        margin-bottom: 100px;
    }

        .hero_text h1 {
            width: 739px;
            height: 200px;
            margin-top: 0px;
            margin-bottom: 14px;
            font-size: 5.25rem;
            line-height: 100px;
        }

    .hero_heading {
        width: 739px;
        height: 132px;
    }

    .hero_text span {
        font-size: 5.25rem;
        line-height: 100px;
    }

    .hero_para {
        max-width: 710px;
        margin-bottom: 60px;
        height: 74px;
    }

    .hero_text p {
        height: 74px;
        min-width: 710px;
        margin-top: 20px;
        font-size: 1.37rem;
        line-height: 25px;
    }

    .hero_btns {
        margin-top: -20px;
        width: 370px;
        height: 68px;
    }

    .hero_btn1 {
        width: 180px;
        height: 56px;
        padding: 10px 25px 10px 25px;
        border: 1px 0px 0px 0px;
        font-size: 1rem;
        line-height: 24px;
        text-align: center;
    }

    .hero_btn2 {
        width: 180px;
        height: 56px;
        padding: 10px 25px 10px 25px;
        font-size: 1rem;
        font-weight: 600;
        line-height: 24px;
        text-align: center;
    }

    .hero_img {
        width: 1065px;
        height: 786px;
        margin-bottom: 0px;
        margin-left: 40px;
        margin-right: 5px;
    }

        .hero_img img {
            width: 1065px;
            height: 786px;
            top: 64px;
            left: -43px;
            gap: 0px;
        }
}