
.lang_seclect_area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    gap: 2em;
    z-index: 18;
    justify-content: space-around;
    align-items: center;
    /* padding: 2em; */
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    /* background: #333; */
    background-color: rgb(242 242 242);
}
.launchbox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    /* width: 15%; */
    /* height: 30%; */
    background: linear-gradient(270deg, rgba(235,235,235,1) 10%, rgb(218 218 218) 90%);
    border-radius: 3.5em;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    box-shadow: 2px 2px 0 rgb(178 178 178 / 50%);
    padding: 4em 4em;
}
.lang_seclect {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    gap: 2em;
    /* z-index: 18; */
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 4px;
    /* padding: 2em 0.5em; */
}
.lang_Boxpart11 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1em;
    /* z-index: 18; */
    box-sizing: border-box;
    /* padding-left: 3em; */
    /* flex-basis: 50%; */
    /* background: linear-gradient(270deg, rgba(242,242,242,1) 0%, rgba(235,235,235,1) 39%, rgba(205,205,205,1) 48%); */
    background: #efefef;
    border: 2px solid #fff;
}
.lang_Boxpart1 {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1em;
    /* z-index: 18; */
    box-sizing: border-box;
    /* padding-left: 3em; */
    flex-basis: 50%;
    /* background: linear-gradient(270deg, rgba(242,242,242,1) 0%, rgba(235,235,235,1) 39%, rgba(205,205,205,1) 48%); */
    background: #efefef;
    border: 2px solid #fff;
}
.lang_Boxpart2 {
    width: 60%;
    height: 80%;
    max-height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
    /* z-index: 18; */
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}
.lang_seclect_box{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5em;
}
.lang_head{
    width: 100%;
    /* text-align: center; */
    font-size: Clamp(0.8rem, 2vw, 2.5rem);
    font-family: SPARTANMB-REGULAR;
    color: #a7a7a7;
    line-height: 1em;
    /* margin-left: 1em; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}
.lang_itext{
    width: 100%;
    /* text-align: center; */
    font-size: Clamp(0.8rem, 0.8vw, 3.5rem);
    font-family: SPARTANMB_BOLD;
    color: #636363;
    /* margin-left: 1em; */
    padding-bottom: 1em;
    text-align: center;
}
.lang1{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    gap: 0.5em;
    justify-content: center;
    /* border: 2px solid #000; */
    cursor: pointer;
    background: rgb(255 255 255);
    border-radius: 5px;
    margin-bottom: 0;
    align-items: center;
    font-family: SPARTANMB_BOLD;
}
.lang1 span{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border-radius: 10px;
    padding: 0.5em;
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0%);
    flex-direction: row-reverse;
    /* gap: 2em; */
    color: rgb(109, 109, 109);
}
.langhover_img{
    /* background-image: url(../../images/gray.svg); */
    width: 20px;
    height: 14px;
    background-size: 100% 100%;
    background-position: center center;
}
.lang1_light{
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    /* gap: 2em; */
}
.lang1_img{
    width: 2.832vw;
    height: 2.221vw;
}
.lang1_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.lang1_txt{
    font-size: Clamp(0.8rem, 1vw, 2.5rem);
    /* color: #6d6d6d; */
    /* font-family: 'Arial'; */
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    /* padding-bottom: 1em; */
    gap: 0.5em;
}
.lang1_txt1{

}
.lang1_txt2{

}
.list_btn:focus, .list_btn:active {
    outline: none !important;
}
.lang_btn{
    width: auto;
    height: max-content;
    /* border: 1px solid #000; */
    padding: 0.7em 1.5em 0.5em 1.5em;
    border-radius: 21px;
    font-size: Clamp(0.8rem, 1vw, 2.5rem);
    color: #2f2f2f;
    font-family: SpartanMB_Black;
    cursor: pointer;
    /* margin-left: 1em; */
    background: #fff;
    box-shadow: 2px 3px 3px 0px rgb(51 51 51 / 50%);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.lang1:focus-visible {
    outline: none;
}
.lang1:hover {
    border: 1px solid rgb(239, 239, 239);
}
.lang1:active {
    border-radius: 5px;
}
@media only screen and (max-width: 1138px) and (orientation: landscape) {
    .lang1 {
        /* width: 37.5vw; */
    }
}
@media only screen and (max-width: 800px) and (orientation: landscape) {
    .lang_head {
        padding-top: 10px;
    }
}
@media only screen and (max-width : 667px) and (orientation : landscape){
    .lang_btn {
        padding: 0.5em 0.8em;
    }
    .launchbox {
        /* width: 40%; */
        /* height: 30%; */
        padding: 3em 3em;
    }
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 19em;
        align-content: flex-start;
    }
    .lang1 {
        width: 28.51vw;
    }
    .lang1 span {
        width: 28.51vw;
    }
    .launchbox {
        padding: 3em 1.5em;
    }
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
    .launchbox {
        padding: 2em 1em;
    }
}
@media only screen and (max-width: 1024px) and (orientation: portrait) {
    .launchbox {/* width: 37%; *//* height: 16%; */}
}
@media only screen and (max-width: 800px) and (orientation: portrait) {
    .lang_Boxpart1 {
        padding-left: 0em;
        width: 100%;
    }
    .lang_itext {/* width: 38%; */}
    .launchbox {
        /* width: 34%; */
        /* height: 33%; */
    }
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
    .launchbox {
        /* width: 33%; */
        /* height: 36%; */
    }
    .lang_itext {
        /* width: 39%; */
    }
}
@media only screen and (max-width : 712px) and (orientation : portrait){
    .lang1 {
        width: 35vw;
    }
}
@media only screen and (max-width: 600px) and (orientation: portrait) {
    .lang1 {
        width: 51.51vw;
    }
    .lang1 span {
        /* width: 51.51vw; */
    }
}
@media only screen and (max-width: 480px) and (orientation: portrait) {
    .lang1 {
        width: 51.51vw;
    }
    .lang1 span {
        /* width: 51.51vw; */
    }
    .lang_seclect_box {
        overflow: auto;
        max-height: 49em;
        align-content: flex-start;
    }
}
@media only screen and (max-width: 414px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 52em;
        align-content: flex-start;
    }

    .lang1 {
        width: 51.51vw;
    }
    .lang1 span {
        /* width: 51.51vw; */
    }
    .launchbox {
       padding: 3em 3em;
    }
    .oriention_more{
        display: none;
    }

    .nev_hover{
        display: none;
    }
}
@media only screen and (max-width: 412px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 44em;
        align-content: flex-start;
    }

}
@media only screen and (max-width: 393px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 50em;
        align-content: flex-start;
    }
    .lang1 {
        width: 51.51vw;
    }
    .lang1 span {
        /* width: 51.51vw; */
    }
}
@media only screen and (max-width: 390px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 50em;
        align-content: flex-start;
    }
    .lang1 {
        width: 51.51vw;
    }
    .lang1 span {
        /* width: 51.51vw; */
    }
}
@media only screen and (max-width: 375px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 40em;
        align-content: flex-start;
    }
    .lang1 {
        width: 57.51vw;
    }
    .lang1 span {
        /* width: 57.51vw; */
    }
    .lang_itext {
        width: 68%;
    }
    .launchbox {
        padding: 2em 2em;
     }
}
@media only screen and (max-width: 360px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 43em;
        align-content: flex-start;
    }
    .lang1 {
        width: 55.51vw;
    }
    .lang1 span {
        /* width: 55.51vw; */
    }
}
@media only screen and (max-width: 353px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 43em;
        align-content: flex-start;
    }
    .lang1 {
        width: 55.51vw;
    }
    .lang1 span {
        /* width: 55.51vw; */
    }
}
@media only screen and (max-width: 320px) and (orientation: portrait) {
    .lang_seclect_box {
        overflow: auto;
        max-height: 33em;
        align-content: flex-start;
    }
    .lang1 {
        width: 61.51vw;
    }
    .lang1 span {
        /* width: 61.51vw; */
    }
    .lang_seclect {
        width: 97vw;
    }
}
