.bghr{
    display: block;
    margin: 0 auto;
}
.bghr .bghr-bx{
    position: relative;
    overflow: hidden;
    padding: 3rem 0rem;
    min-height: 350px;
    max-width: var(--sg-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bghr .wbm{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: initial;
    height: 100%;
}
.bghr .wbm::before{
    position: absolute;
    top: 0rem;
    left: 0rem;
    width: 100%;
    height: 100%;
    content: '';
    background: black;
    opacity: 0.2555555;
    z-index: 1;
}
.bghr .wbm .wbm-c{
    display: block;
    max-width: initial;
    min-height: initial;
    height: 100%;
}
.bghr .wbm .wbm-c .img{
    max-width: initial;
    height: 100%;
}
.bghr .wbm .wbm-c .img .box{
    border-radius: 0rem;
    aspect-ratio: initial;
    height: 100%;
}
.bghr .hr-txt{
    position: relative;
}
.bghr .hr-txt .hrt-bx{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0rem 0.8rem;
}
.bghr .hr-txt .hrtt-bx{
    font-size: 0.8rem;
    gap: 0.3rem;
    color: var(--sg-bglight);
}
.bghr .hr-txt .hrtt-bx .btn{
    padding: 0rem 0.2rem;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--sg-bglight);
    background: transparent;
    min-width: max-content;
    cursor: pointer;
}
.bghr .hr-txt .hrtt-bx .btn:hover{
    text-decoration: underline;
}
.bghr .hr-txt .hrtt-bx h2{
    font-size: 0.8rem;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

}
.bghr .hrt-bx blockquote{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.bghr .hrt-bx blockquote .btn{
    margin: auto;
    border-radius: 50rem;
    height: 2rem;
    font-size: 0.8rem;
    gap: 0.3rem;
    color: var(--sg-bglight);
    background: transparent;
    font-weight: 800;

}
.bghr .hrt-bx blockquote h2{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sg-bglight);
    text-align: center;
}
.bghr .hrt-bx .hr-tf .btn{ 
    gap: 0.5rem;
    color: var(--sg-bglight);
    background: transparent;
}


/* ===========this is content section================= */

.bgc{
    max-width: var(--sg-max-width);
    margin: 0 auto;
}
.bgc .bgc-bx{
    padding: 1.5rem 0rem;
    align-items: flex-start;
    gap: 2rem;
}
.bgc .bgc-bx .rwc{
    width: calc(100% - 380px);
}
.bgc .bgc-bx .rwc .rw-bx p{
    font-size: 1rem;
    line-height: 1.7;
}
.bgc .bgc-bx .rwc .rw-bx img{
    overflow: hidden;
    border-radius: 0.3rem;
}
.wbgs .wbgsh-box h2{
    font-weight: 500;
}
.bgc .bgc-action .bx{
    gap: 0.5rem;
    padding: 1rem 0rem;
}
.bgc .bgc-action .btn{
    border-radius: 50rem;
    height: 3rem;
    padding: 0rem 1rem;
    color: var(--sg-bglight);
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, rgb(180, 0, 0), rgb(217, 0, 0), rgb(245, 45, 45));
}
.bgc .bgc-action .btn:first-child{
    color: var(--sg-color-brand);
    background: transparent;
    border: 1px solid var(--sg-color-brand);
}
.bgc .bgc-action .btn:first-child path{
    stroke: var(--sg-color-brand);
}
.bgc .bgc-action .btn path{
    stroke: var(--sg-bglight);
}
.wbgs .wbgsc ul .m blockquote h3{
    font-weight: 500;
    font-size: 1rem;
}
.wbgs .wbgsc ul .m blockquote p{
    font-size: 0.8rem;
}
.bgc .bgc-bx .rwp{
    width: 350px;
    position: sticky;
    top: 90px;
}
.bgc .bgc-bx .rwp .rw-box{
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3));
    color: var(--sg-bglight);
    padding: 1.5rem 0.8rem;
    background: var(--sg-color-brand);
}
.bgc .bgc-bx .rwp .rw-box .rph{
    padding-bottom: 1rem;
}
.bgc .bgc-bx .rwp .rw-box .rph h2{
    font-size: 1.25rem;
}
.bgc .bgc-bx .rwp .rw-box .rph .icon{
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
}
.bgc .bgc-bx .rwp .rw-box .rph .icon svg{
    width: 2.2rem;
    rotate: 315deg;
    cursor: pointer;
}
.bgc .bgc-bx .rwp .rw-box .rph .icon path{
    stroke: var(--sg-bglight);
}
.bgc .bgc-bx .rwp .rw-box .rpc-bx{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.bgc .bgc-bx .rwp .rw-box .rpl-bx{
    gap: 0.8rem;
    align-items: stretch;
}
.bgc .bgc-bx .rwp .rw-box .rpl-bx .img{
    width: 130px;
    aspect-ratio: 4/4;
    overflow: hidden;
    border-radius: 0.3rem;
    user-select: none;
}
.bgc .bgc-bx .rwp .rw-box .rpl-bx .txt{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 100px);
}
.bgc .bgc-bx .rwp .rw-box .rpl-bx .txtm{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.bgc .bgc-bx .rwp .rw-box .rpl-bx .txtm p{
    font-size: 0.8rem;
    opacity: 0.8;
}
.bgc .bgc-bx .rwp .rw-box .rpl-bx .action .btn{
    /* border-radius: 50rem; */
    height: 2rem;
    font-size: 0.8rem;
    padding: 0rem 0.8rem;
    cursor: pointer;
    color: var(--bgcolor-Light);
    border: 1px solid var(--sg-outline-colorSpace);
    background: transparent;
    user-select: none;
}
.bgc .bgc-bx .rwp .rw-box .rpf{
    padding-top: 1.5rem;
}
.bgc .bgc-bx .rwp .rw-box .rpf .btn{
    margin: auto;
    padding: 0rem;
    width: 100%;
    height: 2.8rem;
    gap: 0.2rem;
    cursor: pointer;
    user-select: none;
    color: var(--sg-color-brand);
    background: var(--sg-bglight);
}
/* =====================this is section contact============= */
.wbma-box{
    max-width: var(--sg-max-width);
    margin: 0 auto;
}

@media only screen and (max-width: 1300px) {
    .bgc .bgc-bx{
        padding: 1.5rem 0.8rem;
    }
    .wbma-box {
        margin: 0rem 0rem !important;
    }
    .wbma.wgit .wbma-box{
        margin: 0rem 0.8rem !important;
    }
}
@media only screen and (max-width: 1300px) {
    .wbma-box {
        margin: 0rem 0.8rem;
    }
}
@media only screen and (max-width: 1150px) {
    .wbm .wbm-c {
        padding: 0rem !important;
    }
}
@media only screen and (max-width: 970px) {
    .wbm .wbm-c .img {
        width: initial;
    }
}
@media only screen and (max-width: 850px){
    .bgc .bgc-bx{
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto;
        gap: 1rem;
    }
    .bgc .bgc-bx .rwc{
        width: 100%;
    }
    .bgc .bgc-bx .rwp{
        width: 100%;
    }
    .wbgs{
        padding-bottom: 0rem;
    }
    .bgc .bgc-bx .rwp .rw-box .rpl-bx{
        justify-content: left;
    }
}
@media only screen and (max-width: 650px){
    .bghr .bghr-bx{
        padding: 2rem 0rem;
        min-height: 200px;
    }
}
@media only screen and (max-width: 580px){
    .bghr .bghr-bx{
        padding: 1.5rem;
    }
    .bghr .hr-txt .hrt-bx{
        gap: 0.5rem;
    }
    .bghr .hrt-bx blockquote .btn{
        height: max-content;
    }
}
@media only screen and (max-width: 550px){
    .bghr .hrt-bx blockquote h2{
        font-size: 1.5rem;
    }
    .bghr .hr-txt .hrtt-bx h2,
    .bghr .hr-txt .hrtt-bx .btn{
        font-size: 0.7rem;
    }
}