* {
    padding: 0%;
    margin: 0%;
    max-width: 100%;
    overflow-x: hidden;
    position:relative;
    box-sizing: border-box;
    font-weight: 400;
}
*,
*:before,
*:after{
    box-sizing: border-box;
    outline: 1px solid transparent;
}
body {
    opacity: 1 !important;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-image: url(/static/img/background_h.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
footer {
    position: fixed;
    bottom: 0px;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
}
a {
    text-decoration: none;
    color: white;
}
#mn-fr-acc {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 68vh;
    justify-content: center;
    align-items: center;
    top: 12vh;
}
#menu_friend_account {
    width: 400px;
    height: 382px;
    background: url('/static/img/J0024.webp') no-repeat center / cover;
    border-bottom-left-radius: 19.5px;
    transition: right 1s;
    border-radius: 50%;
    padding: 12px 0;
    animation: fadeIn .5s cubic-bezier(.39, .575, .565, 1) 1;
    border: .5px solid blue;
}
.btns {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.logo_user {
    display: flex;
    justify-content: center;
    padding: 0px 10px;
}
.logo_user_friend {
    width: 190px;
    padding: 0px 10px 0px 10px;
    display: flex;
    justify-content: center;
}
.logo_user_store{
    padding: 0px 4px;
    display: flex;
    justify-content: center;
    width: 132px;
    height: 104px;
}
.user{
    width: 124px;
    border-radius: 50%;
}
.user_menu_friend{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.user_store{
    width: 150px;
    border-radius: 50%;
}
.button{
    border-radius: 5.5px;
    width: 100%;
    height: 58px;
    font-size: 24px;
    color: white;
    margin: 5px 0px 5px 0px;
    border: 0px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    background-color: #0000FF;
    font-family: Rubik;
}
.button:hover{
    background-color: #114b96;
}
.S_button{
    border-radius: 5.5px;
    width: 100%;
    height: 58px;
    font-size: 24px;
    color: white;
    margin: 5px 0px 5px 0px;
    border: 0px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    background-color: #ff47da;
    font-family: Rubik;
}
.S_button:hover{
    background-color: #114b96;
}
.cont{
    display: none;
}
#menu-toggle{
    
    height: 50px;
    cursor: pointer;
    transition: right 1s;
}
#outside_menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 10;
    width: 100%;
    height: 90vh;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#menuMotors {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 8vh;
    left: 0%;
    z-index: 9;
    width: 100%;
    height: 73vh;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.menu {
    width: 356px;
    height: 350px;
    background: url(/static/img/nav.webp) no-repeat center / cover;
    z-index: 6;
    transition: right 1s;
    padding: 6px;
    border-radius: 50%;
}
.close{
    width: 50px;
    padding: 10px auto 10px auto;
    float: right;
}
.close_img{
    width: 40px;
    margin-top: 10px;
    margin: auto;
    cursor: pointer;
}
.header_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    float: right;
}
.btn-a{
    width: 116px;
    height: 36px;
    background: none;
    border: 0px;
    color: white;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.btn-b{
    width: 188px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: Rubik;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    padding: 6px 20px 6px 20px;
}
.Btn_Add{
    width: 138px;
    height: 36px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.Btn_Add:hover{
    background: green;
    transition-duration: .35s;
    transition-delay: .1s;
}
.Btn_Upld{
    width: 138px;
    height: 36px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.Btn_Upld:hover{
    background: orange;
    transition-duration: .35s;
    transition-delay: .1s;
}
.Btn_Dlt{
    width: 138px;
    height: 36px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.Btn_Dlt:hover{
    background: red;
    transition-duration: .35s;
    transition-delay: .1s;
}
.Btn_Acct{
    width: 138px;
    height: 36px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.Btn_Acct:hover{
    background: yellow;
    transition-duration: .35s;
    transition-delay: .1s;
}    
.Btn_Lgt{
    width: 138px;
    height: 36px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    font-family: Rubik;
}
.Btn_Lgt:hover{
    background: blue;
    transition-duration: .35s;
    transition-delay: .1s;
}    
.btn-c{
    width: 188px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    font-family: Rubik;
    padding: 6px 20px 6px 20px;
}
.btn-d{
    width: 162px;
    background: none;
    border: 0px;
    color: white;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    font-family: Rubik;
    padding: 6px 20px 6px 20px;
}
.btn-e{
    width: 169px;
    height: 36px;
    background: none;
    border: 0px;
    color: #fff;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    font-size: 15px;
    width: 178px;
}
.btn-a:hover, .btn-b:hover, .btn-c:hover, .btn-d:hover {
    background: blue;
    transition: .35s .1s;
}
.btn-d:hover {
    color: white;
}
.btn-e:hover{
    background: red;
    transition-duration: .35s;
    transition-delay: .1s;
}
.User_id{
    width: 138px;
    height: 36px;
    margin: 16px 26px 18px 26px;
    color: #fff;
    background: blue;
    border-radius: 19.5px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400px;
    line-height: 19px;
    text-align: center;
    float: right;
}
.main_home_1{
    background: white;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}
.MnHmN1{
    background-image: none;
    height: 626px;
    padding: 62px 70px 24px 70px;
}
#main_home_2{
    background-image: url(/static/img/m2.webp);
    height: 677px;
    background-size: cover;
    background-repeat: no-repeat;
}
.main_home_3{
    background-image: url(/static/img/m3.webp);
    height: 677px;
    background-size: cover;
    background-repeat: no-repeat;
}
.main_home_4{
    background-image: none;
    height: 692px;
}
.main_home_5{
    background-image: none;
    height: 677px;
}
.main_home_6{
    background-image: url(/static/img/mmm6.webp);
    background-repeat: no-repeat;
    height: 400px;
}
.version{
    display: flex;
    color: white;
    justify-content: center;
    height: 100px;
}
.version a{
    text-decoration: none;
}
.big_logo{
    width: 251px;
}
.div_language{
    width: 400px;
    height: 530px;
    margin: 30px auto 30px auto;
    background-image: url(./img/choose.webp);
    background-size: cover;
    border-radius: 10%;
    padding: 30px 32px 0px 32px;
}
.title_choose{
    text-align: center;
    color: #2079AF;
    font-size: 44px;
    padding: 20px 0px 0px 0px;
}
.div_choose{
    padding: 40px 0px 40px 0px;
    display: flex;
    height: 392px;
    flex-direction: column;
    justify-content:space-around;
}
.button_choose{
    border: 0px;
    border-radius: 30px;
    width: 400px;
    height: 72px;
    background-image: url(./img/aos.webp);
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 44px;
    color: white;
}
.txth1{
    padding: 0px 30px 0px 30px;
    font: normal 600 52px/65.07px 'Russo One', sans-serif;
    color: white;
    text-align: center;
}
.txth2, .txth3 {
    padding: 30px 30px 0;
    font: normal 400 31px/48.2px 'Russo One', sans-serif;
    color: white;
    text-align: center;
    align-items: center;
}
.BtnDn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 34px 0px 0px 0px;
}
.TxtArSmll{
    position: relative;
    top: 36px;
    padding: 0px 30px 0px 118px;
    font: normal 400 31px/48.2px 'Russo One', sans-serif;
    color: white;
    width: 638px;
    text-align: center;
    align-items: center;
}
.btnh1{
    font-size: 32px;
    width: 291px;
    height: 60px;
    transform: perspective(400px) rotateX(2deg);
    color: white;
    font-weight: 900;
    border: none;
    border-radius: 5px;
    background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(70,135,252,1) 100%);
    box-shadow: rgba(63,94,251,0.2) 0px 40px 29px 0px;
    will-change: transform;
    transition: all 0.3s;
    border-bottom: 2px solid rgba(70,135,252,1);
    z-index: 2;
}
.btnh1:hover {
    margin: 20px 40px 20px 40px;
    transform: perspective(180px) rotateX(20deg) translateY(1px);
}
.btnh1:active {
    transform: perspective(170px) rotateX(36deg) translateY(5px);
}
.BtnDwn{
    position: relative;
    top: 164px;
    left: 179px;
    font-size: 32px;
    width: 291px;
    height: 60px;
    transform: perspective(400px) rotateX(2deg);
    color: white;
    font-weight: 900;
    border: none;
    border-radius: 5px;
    background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(70,135,252,1) 100%);
    box-shadow: rgba(63,94,251,0.2) 0px 40px 29px 0px;
    will-change: transform;
    transition: all 0.3s;
    border-bottom: 2px solid rgba(70,135,252,1);
    z-index: 2;
}
.BtnDwn:hover {
    transform: perspective(180px) rotateX(20deg) translateY(1px);
} 
.BtnDwn:active {
    transform: perspective(170px) rotateX(36deg) translateY(5px);
}
.titleh {
    font: normal 600 46px 'Russo One', sans-serif;
    color: white;
    text-align: center;
    margin: 16px auto 0;
}
.th3 {
    position: absolute;
    width: 490px;
    right: 26px;
    top: 148px;
    font: normal 600 46px/55px 'Russo One', sans-serif;
    color: white;
    z-index: 2;
    text-align: center;
}
.TxtHmAr1 {
    position: absolute;
    width: 463px;
    right: 26px;
    top: 148px;
    font: normal 600 46px/55px 'Russo One', sans-serif;
    color: white;
    z-index: 2;
    text-align: center;
}
.btnh2 {
    position: absolute;
    font: 600 32px 'Russo One', sans-serif;
    right: 125px;
    top: 558px;
    border-radius: 14px;
    border: 1px solid #3d6aff;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: blue;
    width: 291px;
    height: 60px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    transition: all .2s ease-in;
    z-index: 1;
}
.btnh2:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    text-decoration: none;
}
.btnh2:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
.btnh2::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
} 
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
.btnh2:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
}
.Btn_Ac{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 114px;
}
.next_btn{
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    left: 0px;
    bottom: 70px;
}
.next_btn_hidden{
    position: fixed;
    width: 100%;
    display: none;
    justify-content: center;
    left: 0px;
    bottom: 70px;
}
.imgh1{
    width: 573px;
    height: 595px;
    z-index: 0; 
}
.img_cos {
    width: 573px;
    height: 595px;
    display: none;
}
.th4{
    position: absolute;
    width: 490px;
    left: 15px;
    top: 135px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.TxtHmAr2{
    position: absolute;
    width: 490px;
    left: 15px;
    top: 135px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.th44{
    position: absolute;
    width: 490px;
    right: 15px;
    top: 135px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.TxtHmAr3{
    position: absolute;
    width: 359px;
    right: 15px;
    top: 135px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.btnh3{
    position: absolute;
    font-family: 'Russo One', sans-serif;
    left: 125px;
    top: 508px;
    border-radius: 14px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    background: blue;
    width: 291px;
    height: 60px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 1;
}
.btnh3:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.btnh3:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
.btnh3::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
} 
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
.btnh2:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
    text-decoration: none;
}
.imgh2{
    width: 570px;
    float:right;
}
.th5{
    position: absolute;
    width: 490px;
    right: 26px;
    top: 148px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.aa:hover{
    color: white;
    text-decoration: none;
}
.btnh4{
    position: absolute;
    font-family: 'Russo One', sans-serif;
    left: 164px;
    top: 550px;
    border-radius: 14px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    background: blue;
    width: 291px;
    height: 60px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 1;
}
.btnh4:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.btnh4:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
.btnh4::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
} 
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
.th6{
    position: absolute;
    width: 504px;
    left: 26px;
    top: 177px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.TxtHmAr4{
    position: absolute;
    width: 317px;
    left: 26px;
    top: 177px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    z-index: 2;
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.btnh5{
    position: absolute;
    font-family: 'Russo One', sans-serif;
    right: 120px;
    top: 534px;
    border-radius: 14px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    background: blue;
    width: 291px;
    height: 60px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 1;
}  
.btnh5:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.btnh5:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
.btnh5::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
} 
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
.th7{
    padding: 76px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
}
.FtDv{
    height: 108px;
    padding-left: 44px;
}
.TxtHmAr4{
    display: flex;
    position: relative;
    top: 76px;
    left: 0px;
    font-size: 40px;
    color: white;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 46px;
    line-height: 55px;
    text-align: center;
    justify-content: center;
}
.LTxtHmAr4{
    width: 765px;
}
.login{
    height: 100vh;
    background-image: url(/static/img/front_login_page.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.txtl1{
    margin: 22px;
    font-weight: 600;
    font-size: 60px;
    align-items: center;
    text-align: center;
}
.slogin {
    position: relative;
    display: flex;
    justify-content: center;
    width: 70%;
    border-radius: 24px;
    margin: 68px  auto 0px auto;
}
.form{
    height: 338px;
}
.txtl2{
    /* font-family: ; */
    color:#23242a;
}
.ilogin {
    background-color: #45f3ff;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    width: 270px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 2px;
    color: #23242a;
    box-shadow: 0 0.4rem #c0f0f7;
    cursor: pointer;
}  
.ilogin:focus {
    outline-color: #c0f0f7;
}
.btnlogin {
    position: relative;
    top: 20px;
    left: 35px;
    padding: 1em 1.8em;
    outline: none;
    border: 1px solid #303030;
    background: #5271FF;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    overflow: hidden;
    transition: 0.2s;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 30px;
}  
.btnlogin:hover {
    box-shadow: 0 0 10px #45f3ff, 0 0 25px #001eff, 0 0 50px #45f3ff;
    transition-delay: 0.2s;
}
.btnlogin span {
    position: absolute;
}
.btnlogin span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #45f3ff);
}
.btnlogin:hover span:nth-child(1) {
    left: 100%;
    transition: 0.7s;
}
.btnlogin span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #001eff);
}
.btnlogin:hover span:nth-child(3) {
    right: 100%;
    transition: 0.7s;
    transition-delay: 0.25s;
}
.btnlogin span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #45f3ff);
}
.btnlogin:hover span:nth-child(2) {
    top: 100%;
    transition: 0.7s;
    transition-delay: 0.17s;
}
.btnlogin span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #001eff);
}
.btnlogin:hover span:nth-child(4) {
    bottom: 100%;
    transition: 0.7s;
    transition-delay: 0.52s;
}
.btnlogin:active {
    background: #45f3ff;
    background: linear-gradient(to top right, #45f3ff, #001eff);
    color: #bfbfbf;
    box-shadow: 0 0 8px #45f3ff, 0 0 8px #001eff, 0 0 8px #45f3ff;
    transition: 0.1s;
}
.btnlogin:active span:nth-child(1) 
    span:nth-child(2) 
    span:nth-child(2) 
    span:nth-child(2) {
        transition: none;
        transition-delay: none;
}
.btnsignup{
    position: relative;
    left: 31px;
    padding: 1em 1.8em;
    outline: none;
    border: 1px solid #303030;
    background: #5271FF;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    overflow: hidden;
    transition: 0.2s;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}
.btnsignup:hover {
    box-shadow: 0 0 10px #45f3ff, 0 0 25px #001eff, 0 0 50px #45f3ff;
    transition-delay: 0.2s;
}
.btnsignup span {
    position: absolute;
}
.btnsignup span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #45f3ff);
}
.btnsignup:hover span:nth-child(1) {
    left: 100%;
    transition: 0.7s;
}
.btnsignup span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #001eff);
}
.btnsignup:hover span:nth-child(3) {
    right: 100%;
    transition: 0.7s;
    transition-delay: 0.25s;
}
.btnsignup span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #45f3ff);
}
.btnsignup:hover span:nth-child(2) {
    top: 100%;
    transition: 0.7s;
    transition-delay: 0.17s;
}
.btnsignup span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #001eff);
}
.btnsignup:hover span:nth-child(4) {
    bottom: 100%;
    transition: 0.7s;
    transition-delay: 0.52s;
}
.btnsignup:active {
    background: #45f3ff;
    background: linear-gradient(to top right, #45f3ff, #001eff);
    color: #bfbfbf;
    box-shadow: 0 0 8px #45f3ff, 0 0 8px #001eff, 0 0 8px #45f3ff;
    transition: 0.1s;
}

.btnsignup:active
    span:nth-child(1) 
    span:nth-child(2) 
    span:nth-child(2) 
    span:nth-child(2){ 
    transition: none;
    transition-delay: none;
}
.txtl3{
    position: relative;
    left: 28px;
    color:#114b96;
    /* font-family: ; */
}
.txtl4{
    position: relative;
    top: 10px;
    left: 22px;
    color:#1A73E8;
}
.imgl{
    position: relative;
    right: -7px;
    top: 0px;
    float: right;
    width: 500px;
    z-index: 1;
    margin-top: 32px;
}
.DvImgLgn{
    display: flex;
    
    justify-content: center;
    align-content: center;
}
.main_login_1{
    background-image: url(./img/background_h.webp);
    background-size: cover;
    height: 100vh;
}
.main_login_2{
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
}
.con{
    padding-top: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.mtr_video{
    height: 100%;
    width: 100%;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.mtr_video_phone{
    display: none;
}
.opacity{
    position: absolute;
    top: 0px;
    z-index: 2;
    background: black;
    width: 100%;
    height: 100%;
    opacity: 35%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.txtmr{
    position: absolute;
    
    top: 1px;
    z-index: 5;
    color:white;
    font-size: 58px;
    font-family: El Messiri;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    align-items: center;
    padding: 346px 0px 0px 150px;
}
.con2{
    
    padding: 50px 44px 0px 44px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius:20px;
    background: #F1F2F6;
    margin-bottom: 20px;
}
.content22{
    position: relative;
    width: 100%;
    margin: 30px 20px 0px 20px;
    border-radius: 22px;
    margin-bottom: 20px;
}
.content22_promo{
    position: relative;
    width: 100%;
    margin: 0px 0px 0px 0px;
    border-radius: 22px;
    background: #ffc8dd;
    margin-bottom: 20px;
    padding: 30px 0px 0px 0px;
}
.titlemr_txt{
    height: 76px;
}
.titlemr{
    position: relative;
    font-size: 40px;
    color: white;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    align-items: center;
    font-family: 'Lemonada', cursive;
    margin-bottom: 20px;
}
.inline{
    position: relative;
    margin: 50px auto 50px auto;
    width: 800px;
    height: 298px;
    margin-bottom: 80px;
    border-radius: 49px;
}
.card_mtr{
    position: relative;
    margin: 50px auto 50px auto;
    width: 800px;
    margin-bottom: 80px;
    border-radius: 49px;
}
.dflex{
    width: 375px;
    height: 298px;
    float: right;
}
.mr{
    width: 407px;
    height: 298px;
    border-radius: 49px;
    float: left;
}
.ctxt1{
    position: relative;
    top: 13px;
    font-size: 34px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    align-items: center;
}
.ctxt2{
    position: relative;
    top: 33px;
    font-size: 20px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    text-align: center;
    align-items: center;
}
.staars{
    position: relative;
    top: 100px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    margin: auto;
}
.stars{
    width: 271px;
    height:50px;
    display: flex;
    justify-content:space-between;
    top: 80px;
    margin: 0px auto 0px auto;
}
.strs{
    
    height:auto;
}
.btnbooking{
    position: relative;
    top: 90px;
    left: 55px;
    width: 286px;
    height:66px;
    border-radius: 39px;
}
.freemr{
    height:30px
}
.main_mr_1{
    height: 100vh;
    background-image: url(./img/background_h.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.main_Abt_us{
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
    height: 100%;
    padding: 20px 30px 30px 30px;
}
.cardd{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin:30px 30px 30px 30px;
    border-radius: 49px;
}
.right{
    width: 500px;
    height: 400px;
}
.mrr{
    width: 450px;
    border-radius: 49px;
    float: left;
}
.imgs{
    display: flex;
    flex-wrap: wrap;
    width: 330px;
    float: left;
    border-radius: 19.5px;
}
.mrrs{
    position: relative;
    width: 122px;
    height: 94px;
    margin-right: 34px;
    margin-top: 20px;
    border-radius: 49px;
}
.ctxt11{
    position: relative;
    top: 8px;
    width: 550px;
    font-size: 56px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 800;
    text-align: center;
    align-items: center;
}
.ctxt22{
    position: relative;
    top: 62px;
    font-size: 33px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    align-items: center;
}
.btnbookingg{
    position: relative;
    top: 126px;
    left:108px;
    border-radius: 14px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 32px;
    margin: 0px auto 0px auto;
    font-weight: 600;
    letter-spacing: 2px;
    background: blue;
    width: 291px;
    height: 60px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 1;
}
.btnbookingg:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.btnbookingg:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
.btnbookingg::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
} 
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
.document{
    margin: 20px 73px 20px 73px;
    padding: 20px;
    height:auto;
    border-radius: 19px;
}
.titled{
    position: relative;
    top: 13px;
    font-size: 40px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    align-items: center;
}
.sdocument{
    position: relative;
    padding: 22px 58px 0px 58px;
    top: 30px;
    margin: 0px auto 0px auto;
    border-radius: 24px;
    width:386px;
    height: 731px;
    background: #FFFFFF;
    opacity: 70%;
}
.sdocument2{
    position: relative;
    padding: 22px 22px 22px 22px;
    border-radius: 24px;
    background: #f9f9f9;
    opacity: 70%;
}
.sdocument2_promo{
    position: relative;
    padding: 22px 22px 22px 22px;
    border-radius: 24px;
    background: #ffc8dd;
    color: #e94b4b;
}
.flexible{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    flex-direction: row-reverse;
    margin-top: 30px;
    height: 385px;
}
.slctd {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    font-family: 'Open Sans', 'Helvetica Neue', 'Segoe UI', 'Calibri', 'Arial', sans-serif;
    font-size: 18px;
    color: #60666d; 
}
.textarea {
    width: 270px;
    background: transparent;
}
.btndocument {
    position: relative;
    width: 200px;
    top: 41px;
    left: 39px;
    padding: 1em 1.8em;
    outline: none;
    border: 1px solid #303030;
    background: #5271FF;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    overflow: hidden;
    transition: 0.2s;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}
.btndocument:hover {
    box-shadow: 0 0 10px #45f3ff, 0 0 25px #001eff, 0 0 50px #45f3ff;
    transition-delay: 0.2s;
}
.btndocument span {
    position: absolute;
}
.btndocument span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #45f3ff);
}
.btndocument:hover span:nth-child(1) {
    left: 100%;
    transition: 0.7s;
}
.btndocument span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #001eff);
}
.btndocument:hover span:nth-child(3) {
    right: 100%;
    transition: 0.7s;
    transition-delay: 0.25s;
}
.btndocument span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #45f3ff);
}
.btndocument:hover span:nth-child(2) {
    top: 100%;
    transition: 0.7s;
    transition-delay: 0.17s;
}
.btndocument span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #001eff);
}
.btndocument:hover span:nth-child(4) {
    bottom: 100%;
    transition: 0.7s;
    transition-delay: 0.52s;
}
.btndocument:active {
    background: #45f3ff;
    background: linear-gradient(to top right, #45f3ff, #001eff);
    color: #bfbfbf;
    box-shadow: 0 0 8px #45f3ff, 0 0 8px #001eff, 0 0 8px #45f3ff;
    transition: 0.1s;
}
.btndocument:active
    span:nth-child(1) 
    span:nth-child(2) 
    span:nth-child(2) 
    span:nth-child(2){ 
    transition: none;
    transition-delay: none;
}
.choose{
    position: relative;
    width: 1000px;
    height:auto;
    background: #F1F2F6 ;
    margin: 0% auto 195px auto;
    padding: 20px 52px 80px 52px;
    border-radius: 42px;
    margin: 60px auto 60px auto;
}
.titlech{
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 700;
}
.type {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.btnch1{
    position: relative;
    width: 370px;
    height: 344px;
    font-size: 30px;
    background: url(./img/motorcycle_parts.webp);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    float: left;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.or{
    position: relative;
    font-size: 28px;
    font-weight: 700;
    color: #444471;
    margin: 0px 20px 0px 20px;
}
.btnch2{
    position: relative;
    width: 370px;
    height: 344px;
    font-size: 30px;
    background: url(./img/bicycle_parts.webp);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    float: right;
    border: none;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.btnch3{
    position: relative;
    width: 370px;
    height: 344px;
    font-size: 30px;
    background: url(./img/motorcycle_acc.webp);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    float: right;
    border: none;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.btnch4{
    position: relative;
    width: 370px;
    height: 344px;
    font-size: 30px;
    background: url(./img/bicycle_acc.webp);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    float: right;
    border: none;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.groupbtn{
    position: relative;
    left: 8.5%;
    display: flex;
}
.gbtn{
    width: 148px;
    height: 44px;
    font-size: 16px;
    font-weight: 600;
    background-color: #5271FF;
    color: white;
    border: none;
    margin: 0px 2px 0px 2px;
}
.content_parts{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 80%;
    border-radius: 19.5px;
    flex-direction: row;
    padding: 20px 10px;
}
.gparts{
    display: flex;
    
    border-radius: 0px 19.5px 19.5px 0px;
    background-color: #F1F2F6;
    padding: 30px;
    margin: 20px 20px 20px 0px;
}
.cardparts{
    background-color: #FFFFFF;
    padding: 16px 20px 0px 20px;
    margin: 10px 0px 10px 0px;
    width: 294px;
    border-radius: 19.5px;
}
.imgprts{
    width: 200px;
    height: 144px;
}
.titleprts{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 29px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
}
.titleprts_small{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 19px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
}
.Qntt_Avlbl_M_Prt{
    font-size: 14px;
    font-weight: 600;
    color: black;
}
.priceprts{
    font-size: 29px;
    font-weight: 800;
    color: black;
}
.part{
    padding: 0px 75px 75px 75px;
    margin: 0px auto 75px auto;
    width: 1000px;
}
.bigcardprts{
    background-color: #F1F2F6;
    padding: 42px;
    margin: 0px auto 0px auto;
    width: 1000px;
    border-radius: 19.5px;
}
.bgimgpart{
    position: relative;
    margin: 0px auto 15px auto;
    
    height: 328px;
    border-radius: 19.5px;
}
.simgpart{
    position: relative;
    width: 100px;
    height: 94px;
    margin-right: 10px;
    margin-top: 10px;
    border-radius: 49px;
}
.textpart{
    width: 418px; 
    height: 400px;
}
.bgtitleprt{
    position: relative;
    width: 464px;
    top: 26px;
    font-size: 36px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 800;
    text-align: center;
    align-items: center;
}
.bgcmpnyprt{
    position: relative;
    width: 556px;
    top: 42px;
    font-size: 45px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    align-items: center;
}
.starspart{
    position: relative;
    top: 70px;
    width: 350px;
    left: 40px;
    display: flex;
    justify-content: space-around;
}
.bgpriceprt{
    position: absolute;
    left: 186px;
    top: 300px;
    border-radius: 14px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    background: blue;
    width: 221px;
    height: 60px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: 1;
}
.bgpriceprt:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.bgpriceprt:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
.bgpriceprt::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
} 
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
.dflex2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#dflex2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.s_crd_mtr{
    width: 568px;
    background-color: #FFFFFF;
    border-radius: 19.5px;
    padding: 20px 20px 10px 30px;
    margin-bottom: 38px;
}
.img_bccl{
    width: 100%;
    border-radius: 19px;
    margin: 0px 0px 0px 0px;
}
.img_bccl_promo{
    width: 100%;
    border-radius: 19px;
    margin: 0px 0px 14px 0px;
}
.t_of_mtr{
    font-family: 'Miltonian Tattoo', serif;
    font-size: 23px;
    text-align: center;
    font-weight: 600;
    font-style: normal;
}
.description_card_promo{
    color: black;
    text-align: right;
}
.Tp_M_B_Prt{
    font-family: 'Miltonian Tattoo', serif;
    color: black;
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
}
.c_n{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 24px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    margin-bottom: 10px;
}
.prc{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 27px;
    text-align: left;
    font-style: normal;
    padding: 0px 0px 0px 10px;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
}
.prc_M_Prt{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 27px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
}
.prc_M_Prt{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 19px;
    text-align: left;
    font-weight: 600;
    font-style: normal;
}
.starsbycicles{
    position: absolute;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-content: flex-end;
    align-items: flex-end;
}
.starsbycicle{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    height: 60px;
}
.star{
    width: 33px;
    height: 33px;
}
.article{
    display: flex;
    justify-content: space-around;
    
    background: #C0F0F7;
    margin: 30px 30px 30px 30px;
    border-radius: 19.5px;
}
.paper_1{
    display: flex;
    width: 244px;
    background: white;
    border-radius: 29px;
    margin: 30px;
    float: right;
    padding: 19px;
    flex-direction: column;
    justify-content: space-between;
}
.paper_2{
    width: 600px;
    background: white;
    border-radius: 29px ;
    margin: 30px;
    float: left;
    padding: 5px;
}
.request_document{
    width: 100%;
    background: white;
    border-radius: 29px;
    margin: 30px;
    float: left;
    padding: 30px;
}
.action{
    display: flex;
    justify-content: space-between;
    align-items:center;
    border: 1px solid;
    margin: 28px 0px 20px 0px;
    width: 100%;
    border-radius: 29px;
    color: black;
    background: white;
    padding: 14px 10px 14px 24px;
}
.action_id{
    display: flex;
    justify-content: space-between;
    border: 2px solid;
    width: 100%;
    border-radius: 29px;
    color: black;
    flex-direction: row-reverse;
    padding: 30px;
    align-items: flex-start;
}
.name{
    float:left;
    width: 258px;
    height: 40px;
    text-align: center;
    font-size: 26px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 600;
}
.date{
    float: right;
    width: 169px;
    height: 40px;
    text-align: center;
    align-items: center;
    font-size: 26px;
    color: black;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 600;
}
.a{
    color: white;
    text-decoration: none;
}
.other{
    width: 412px;
    height: 65px;
    color: #fff;
    background-color: #5271FF;
    font-weight: 400;
    font-size: 16px;
    font-family: 'Russo One', sans-serif;
}
#btn_other{
    display: none;
}
.button_other{
    width: 202px;
    height: 60px;
    color: #fff;
    background-color: #5271FF;
    font-weight: 400;
    font-size: 16px;
}
.flex_button{
    
    flex-wrap: wrap;
    justify-content:center;
    flex-basis: auto;
}
.none{
    display: none;
}
._2btn{
    display: flex;
    flex-direction: row;
}
.btn_add,
.btn_dlt{
    width: 400px;
}
.btn-danger{
    width: 400px;
    left: 0px;
    margin: 0px auto 0px auto;
    border-radius: 154.25rem;
}
.btn-success{
    position: relative;
    width: 400px;
    margin: 0px auto 0px auto;
    border-radius: 154.25rem;
}
.Add_Btn{
    background-color: #28a745;
    color: white;
    border: 0px;
    width: 200px;
    height: 46px;
    text-align: center;
    font-size: 20px;
    border-radius: 22px;
}
.Add_Btn:hover{
    background-color: #1e7e34;
}
.Upld_Btn{
    background-color: #ffc107;
    color: white;
    border: 0px;
    width: 200px;
    height: 46px;
    text-align: center;
    font-size: 20px;
    border-radius: 22px;
}
.Upld_Btn:hover{
    background-color: #d39e00;
}
.Dlt_Btn{
    background-color: #dc3545;
    color: white;
    border: 0px;
    width: 200px;
    height: 46px;
    text-align: center;
    font-size: 20px;
    border-radius: 22px;
}
.Dlt_Btn:hover{
    background-color: #c82333;
}
.hdTPB{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    position: sticky;
    z-index: 1;
    top: 0px;
}
.TtlAndPrc{
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-content: center;
    padding-right: 16px;
    padding-left: 8px;
    align-items: center;
}
.TtlAndPrc_arab{
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    padding-left: 8px;
    align-items: center;
}
.Ttl{
    font-size: 2rem;
    margin: 0px;
    padding-left: 44px;
    height: 40px;
    position: sticky;
    top: 0px;
    font-family: 'Miltonian Tattoo', serif;
}
.Ttl_arab{
    font-size: 2rem;
    margin: 0px;
    padding-left: 44px;
    height: 70px;
    position: sticky;
    top: 0px;
    font-family: 'Miltonian Tattoo', serif;
    font-family: 'Readex Pro', sans-serif;
    font-size: 44px;
    color: #e94b4b;
}
.TtlN1{
    font-size: 2rem;
    margin: 0px;
    height: 86px;
    font-weight: 700;
    font-family: 'Miltonian Tattoo', serif;
    color: black;
    text-align: left;
    font-style: normal;
}
.Prc{
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    float:right;
}
.PrcN1{
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    height: 54px;
    font-weight: 600;
    font-size: 23px;
    font-family: 'Marhey', sans-serif;
    color: white;
}
.PrcN1_arab{
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    height: 54px;
    font-weight: 600;
    font-size: 23px;
    font-family: 'Marhey', sans-serif;
    text-align: right;
}
.DvBtn{
    padding: 0px 44px 0px 26px;
    text-align: right;
    height: 40px;
}
.BtnB{
    white-space: normal;
    border-radius: 14px;
    background-color: white;
    color: blue;
    border: 0px;
    height: 40px;
    padding: 6px 0px 6px 20px;
    width: 146px;
    font-family: Lemonada;
    font-weight: 900;
}
.BtnB:hover{
    background: blue;
    transition-duration: .35s;
    transition-delay: .1s;
    color: white;
}
.BtnB_request{
    white-space: normal;
    border-radius: 14px;
    background-color: white;
    color: blue;
    border: 0px;
    height: 68px;
    padding: 10px 8px 6px 8px;
    
    font-family: Lemonada;
    font-size: 13px;
    font-weight: 900;
}
.BtnB_request:hover{
    background: blue;
    transition-duration: .35s;
    transition-delay: .1s;
    color: white;
}
.BtnB_request_promo{
    white-space: normal;
    border-radius: 14px;
    background-color: white;
    color: #f781ae;
    border: 0px;
    height: 68px;
    padding: 10px 60px 6px 60px;
    
    font-family: Lemonada;
    font-size: 30px;
    font-weight: 900;
}
.BtnB_request_promo:hover{
    background: #ffc8dd;
    transition-duration: .35s;
    transition-delay: .1s;
    color: white;
}
.Imgs{
    width: 57%;
    float: left;
    padding: 0px 0px 0px 30px;
    height: 918px;
    position:relative;
    top: 1px;
    left: 1px;
}
.Imgs_promo{
    width: 57%;
    float: left;
    padding: 0px 0px 0px 30px;
    position:relative;
    top: 1px;
    left: 1px;
}
.Imgs_Prt{
    width: 65%;
    float: left;
    padding: 0px 0px 0px 30px;
    height: 918px;
    position:relative;
    top: 1px;
    left: 1px;
}
.JsScrlImgs{
    font-size: 0px;
    scroll-behavior: smooth;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    padding-right: 29px;
    width: 100%;
    top: 0;
    height: 452px;
}
.JsScrlImgs_Prt{
    font-size: 0px;
    scroll-behavior: smooth;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    padding-right: 29px;
    width: 560px;
    top: 0;
    height: 599px;
}    
.InsdDv{
    width: 100%;
    height: 452px;
    position: sticky;
}
.InsdDv_Prt{
    width: 599px;
    height: 599px;
}
.Imgs i{
    top: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: #343f4f;
    background: #fff;
    line-height: 44px;
    height: 46px;
    width: 43px;
    text-align: center;
    border-radius: 50%;
    position:absolute;
    transform: translateY(-50%);
    transition: transform 0.1s linear;
    font-weight: 800;
}
.Imgs i:active{
    transform: translateY(-50%) scale(0.9);
}
.Imgs i:hover{
    background: #f2f2f2;
}
.Imgs i:first-child{
    left: 0px;
    z-index: 1;
    display: none;
    background-image: url(./img/cicle.webp);
    background-size: cover;
}
.Imgs i:last-child{
    right: 14px;
    background-image: url(./img/cicle.webp);
    background-size: cover;
}
.Imgs .JsScrlImgs {
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}
.Imgs_Prt .JsScrlImgs_Prt {
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}
.Imgs_Prt i{
    top: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: #343f4f;
    background: #fff;
    line-height: 44px;
    height: 46px;
    width: 30px;
    text-align: center;
    border-radius: 50%;
    position:absolute;
    transform: translateY(-50%);
    transition: transform 0.1s linear;
}
.Imgs_Prt i:active{
    transform: translateY(-50%) scale(0.9);
}
.Imgs_Prt i:hover{
    background: #f2f2f2;
}
.Imgs_Prt i:first-child{
    left: 1px;
    z-index: 1;
    display: none;
}
.Imgs_Prt i:last-child{
    right: 0px;
}
.Imgs_Prt .JsScrlImgs_Prt {
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}
.JsScrlImgs.dragging{
    cursor: grab;
    scroll-behavior: auto;
}
.JsScrlImgs_Prt.dragging{
    cursor: grab;
    scroll-behavior: auto;
}
.Imgs img{
    width: 100%;
    object-fit: cover;  
    margin-left: 16px;
    user-select: none;
}
.Imgs_Prt img{
    width: 100%;
    object-fit: cover;
    margin-left: 16px;
    user-select: none;
}
.JsScrlImgs img:first.child{
    margin-left: 0px;
}
.DvAbtExImgs{
    width: 40%;
    padding: 20px 40px 20px 40px;
}
.DvAbtExImgs_Prt{
    width: 35%;
    padding: 20px 40px 20px 40px;
}
.TpBk{
    height: 36px;
    font-size: 18px;
    font-family: 'Lemonada', cursive;
}
.TtlDscrptn{
    font-weight: 800;
    font-size: 22px;
    height: 38px;
    text-align: right;
    font-family: 'Readex Pro', sans-serif;
}
.TtlDscrptn_promo{
    font-weight: 800;
    font-size: 22px;
    height: 38px;
    text-align: right;
    font-family: 'Readex Pro', sans-serif;
    color: #e94b4b;
}
.TxtDscrptn{
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    padding: 0px 10px 22px 10px;
    background: white;
    margin-bottom: 34px;
    text-align: right;
    line-height: 2;
    font-size: 22px;
    font-family: 'Noto Naskh Arabic', serif;
    text-align: center;
    color: #000000;
}
.BkClssfctn{
    height: 44px;
    font-weight: 800;
    font-size: 22px;
    text-align: right;
    margin-bottom: 26px;
    font-family: 'Readex Pro', sans-serif;
}
.TxtBkClssfctn{
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    padding: 0px 10px 20px 10px;
    background: white;
    margin-bottom: 10px;
    text-align: center;
    line-height: 2;
    font-size: 22px;
    font-family: 'Noto Naskh Arabic', serif;
    color: #000000;
}
.Prfct{
    font-size:2.0rem;
    width: 100%;
    text-align: center;
    font-weight: 800;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Strs{
    position: relative;
    top: 0px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    margin: auto;
}
.ExplntrVd{
    font-size: 2.2rem;
    width: 100%;
    text-align: center;
    font-weight: 800;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 1px;
}
.VdExplntr{
    padding: 50px 92px 0px 92px;
}
.VdAbtExplntr{
    width: 100%;
}
.AddMn{
    width: 100%;
    height: 100vh;
    color: hsl(30 10% 15%);
}
.RghtAddMn{
    float: right;
    width: 40%;
    padding: 10px 20px 0px 20px;
}
.AddMn2Sd{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: right;
}
.account_img{
    width: 300px;
    display: flex;
    justify-content: center;
}
.title{
    text-align: center;
    font-size: 26px;
    margin-bottom: 10px;
    width: 76%;
}
.title_rider_name_accout{
    text-align: center;
    font-size: 50px;
    margin-bottom: 10px;
    width: 76%;
}
.LftSd{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    color: black;
    padding: 20px;
}
.middleSd{
    width: 260px;
}
.RghtSd{
    width: 50%;
}
.custum-file-upload-video {
    height:100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    gap: 0px;
    cursor: pointer;
    align-items: center;
    border: 2px dashed #cacaca;
    background-color: rgba(255, 255, 255, 1);
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
    justify-content: center;
}
.custum-file-upload-video .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload-video .icon svg {
    height: 80px;
    fill: rgba(75, 85, 99, 1);
}
.custum-file-upload-video .text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload-video .text span {
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
}
.custum-file-upload-video input {
    display: none;
}
.custum-file-upload-short {
    height: 96%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    gap: 0px;
    cursor: pointer;
    align-items: center;
    border: 2px dashed #cacaca;
    background-color: rgba(255, 255, 255, 1);
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
    justify-content: center;
}
.custum-file-upload-short .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload-short .icon svg {
    height: 80px;
    fill: rgba(75, 85, 99, 1);
}
.custum-file-upload-short .text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload-short .text span {
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
}
.custum-file-upload-short input {
    display: none;
}
.custum-file-upload-image {
    height:94%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    gap: 0px;
    cursor: pointer;
    align-items: center;
    border: 2px dashed #cacaca;
    background-color: rgba(255, 255, 255, 1);
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
    justify-content: center;
}
.custum-file-upload-image .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload-image .icon svg {
    height: 80px;
    fill: rgba(75, 85, 99, 1);
}

.custum-file-upload-image .text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custum-file-upload-image .text span {
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
}
.custum-file-upload-image input {
    display: none;
}
.FPstBtn{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 86px;
}
.PstBtn {
    color: white;
    background: none;
    border: none;
    font-size: 18px;
}

button.btn.btn-warning{
    width: 400px;
}
.p1{
    color: #fff;
    height: 23px;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    text-align: center;
    font-size: 22px;
    margin-bottom: 0px;
}
.map{
    width: 376px;
    height: 214px;
}
.map1{
    width: 100%;
    height: 199px;
    border-radius: 20px;
}
.Btn_Usr{
    display: flex;
    width: 216px;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
}
.Pic_Hd{
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
.Pic_Hd_Hm_Pg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.Crd_Accnt{
    width: 100%;
    display: flex;
    padding: 4px 30px 10px 30px;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 66px;
    color: white;
}
.Crd_Accnt_private{
    width: 84%;
    display: flex;
    padding: 0px 30px 30px 30px;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0px 0px 0px 27px;
}
.title_informations{
    display: flex;
    text-align: center;
    width: 100%;
    padding: 30px 0px 0px 30px;
}
.title_profile{
    font-size: 26px;
}
.nm_Hd{
    display: flex;
    align-items: center;
    font-family: 'Russo One', sans-serif;
}
.left_page{
    
    display: flex;
}
.paper_3{
    display: flex;
    width: 266px;
    background: white;
    border-radius: 29px;
    float: right;
    padding: 19px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    margin: 0px 0px 20px 0px;
}
.leftpage{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    margin: 30px;
}
.small_title{
    color: #333;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.available{
    font-size: 18px;
    font-family: ss;
    color: #ff0000;
}
.DH{
    font-size: 15px;
    font-family: 'Handlee', cursive;
    font-family: 'Miltonian Tattoo', serif;
    padding: 0px;
    font-weight: 700;
}
.old_price{
    color: #6c6b6b;
    font-size: 18px;
    font-family: 'Miltonian Tattoo', serif;
    text-decoration-line: line-through;
}
.old_price_M_Prt{
    color: #6c6b6b;
    font-size: 16px;
    font-family: 'Miltonian Tattoo', serif;
    text-decoration-line: line-through;
}
.old_DH{
    color: #6c6b6b;
    font-size: 12px;
    font-family: 'Handlee', cursive;
    font-family: 'Miltonian Tattoo', serif;
    text-decoration-line: line-through;
}
.price_dh{
    display: -webkit-box;
    color: #0600ff;
}
.old_price_dh{
    display: -webkit-box;
    height: 36px;
}
.price_dh_M_Prt{
    display: flex;
}
.old_price_dh_M_Prt{
    display: flex;
    align-items: flex-end;
    height: 34px;
}
.pre{
    width: 100%;
    display: -webkit-box;
}
.pre_M_Prc{
    display: flex;
    width: 140px;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}
.hash{
    font-size: 22px;
    color: black;
}
.hash_M_Prt{
    font-size: 22px;
    color: black;
}
.footer_information{
    display: flex;
    padding: 14px 0px 0px 0px;
    justify-content: space-evenly;
}
.Team_work{
    font-size: 20px;
    text-align: center;
}
.footer_text{
    color: white;
    width: 382px;
    font-size: 26px;
    font-family: 'El Messiri';
    line-height: 31px;
    height: 304px;
    font-weight: 400;
}
.footer_text label{
    width: 194px;
}
.footer_text_2{
    color: white;
    width: 319px;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Suez One', serif;
    line-height: 31px;
    height: 304px;
}
.footer_text_2 label{
    
}
.quick_links{
    color: white;
    padding: 0px 20px 8px 20px;
    font-family: Lalezar;
    font-size: 26px;
    text-align: right;
}
.quick_links_content{
    color: white;
    padding: 0px 20px 0px 21px;
    font-family: El Messiri;
    font-size: 19px;
    text-align: right;
}
.quick_links_content a{
    color: white;
    text-decoration: none;
}
.copy_right {
    display: flex;
    color: white;
    height: 40px;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
}
.home_page_rider{
    border-radius: 10px;
}
.Dv_QR{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0px 4px 0px;
}
.Dv_QR_img{
    width: 120px;
}
.description_vid{
    width: 100%;
    height: 96%;
    padding: 14px;
    text-align: center;
    border-radius: 20px;
}
.description_short{
    width: 100%;
    height: 96%;
    padding: 14px;
    text-align: center;
    border-radius: 20px;
}
.description_img{
    width: 100%;
    height: 96%;
    padding: 14px;
    text-align: center;
    border-radius: 20px;
}
.classification{
    width: 100%;
    min-height: 140px;
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 20px;
}
.price{
    width: 280px;
    height: 34px;
    margin-bottom: 20px;
    border-radius: 20px;
    text-align: center;
}
.P_name{
    width: 280px;
    height: 36px;
    margin-bottom: 20px;
    border-radius: 20px;
    text-align: center;
}
.Opct{
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 34px;
}
.Ttl_Cntrl_Rm{
    width: 500px;
    padding: 63px 27px 0px;
    color: white;
    height: 199px;
    font-size: 44px;
    font-weight: 700;
}
.Txt_Cntrl_Rm{
    padding: 98px 20px 0px 20px;
    color: white;
    font-size: 23px;
    text-align: center;
    font-weight: 500;
}
.Ttl_Cntrl_Rm_1{
    float: right;
    font-weight: 700;
}
.Ttl_Cntrl_Rm_2{
    float: left;
    font-weight: 700;
}
.Gml{
    font-size: 19px;
}
.request_spc{
    padding: 20px;
    width: 386px;
}
.created_by{
    font-size: 18px;
    margin: 16px 22px 22px 22px;
    text-align: center;
}
.none{
    text-decoration: none;
    color: white;
}
.none:hover{
    text-decoration: none;
}
.Btn_Login{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #17a2b8;
    background: white;
    background-image: none;
    border-color: #17a2b8;
    width: 24px;
    height: 34px;
}
.Btn_Login:hover{
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.Eml_accnt{
    text-align: center;
    font-size: 28px;
}
.form--group{
    direction: rtl;
    text-align: right;
}
.Ttl_Infrmtn{
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 14px;
    float: right;
    width: 100%;
    text-align: right;
}
.txt_Infrmtn{
    margin-bottom: 8px;
    font-size: 20px;
    float: right;
    width: 100%;
    text-align: right;
}
.Id_M_B_P{
    font-size: 28px;
    float: right;
    width: 100%;
    text-align: center;
}
.Btn_Dlt_request{
    width: 214px;
    height: 40px;
    color: white;
    background: transparent;
    background-color: #dc3545;
    border: 0px;
    cursor: pointer;
    font-size: 26px;
}
.Btn_Dlt_request:hover{
    color: #fff;
    background-color: #c82333;
}
.Dv_Dlt_btn{
    display: flex;   
    justify-content: center;   
    padding: 30px 0px 9px 0px;
}
.txt_Infrmtn_data{
    text-align: left;
    width: 238px;
    font-size: 17px;
    width: 100%;
}
.tel{
    text-align: center;
}
.Hello_text{
    color: white;
    height: 92px;
}
.Img_post{
    border-radius: 20px;
    height: 452px;
}
.Old_Price_Post_Id{
    font-size: 22px;
    text-decoration: line-through;
    font-family: 'Raleway', sans-serif;
    text-align: left;
    color: red;
}
.Price_Post_Id{
    font-size: 1.5rem;
    font-weight: 700;
    color: #00ff00;
}
.Price_Post_Id_promo{
    font-size: 28px;
    height: 100px;
    font-family: 'Kdam Thmor Pro', sans-serif;
    font-family: 'Marhey', sans-serif;
    color: #e94b4b;
}
.request_3{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-bottom: 60px;
}
.x-corp{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.x-corp_img{
    width: 48px;
}
.Btn_Upload{  
    width: 100%;  
    border: 0px;
    background: yellow;
    height: 40px;
    margin: 20px 0px 20px 0px;
}
.Btn_Upload:hover{
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}
.Ifram_Y{
    width: 100%;
    height: 580px;
}
.BtnB_request {
    white-space: normal;
    border-radius: 14px;
    background-color: white;
    color: blue;
    border: 0px;
    height: 46px;
    padding: 6px 8px 6px 8px;
    
    font-family: Lemonada;
    font-size: 22px;
    font-weight: 900;
}
.ExplntrVd {
    font-size: 22px;
    width: 100%;
    text-align: center;
    font-weight: 800;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 1px;
}
.document {
    margin: 10px;
    padding: 10px;
    border-radius: 19px;
    color: white;
}
.location_request {
    padding: 10px;
    text-align: right;
    font-size: 20px;
    margin-bottom: 20px;
    font-family: Rubik;
    float: right;
}
.address_request{
    text-align: right;
    font-size: 20px;
    margin-bottom: 20px;
    font-family: Rubik;
}
.motorcycle_name_request{
    font-size: 26px;
    text-align: right;
    margin-bottom: 20px;
    font-family: Rubik;
}
.motorcycle_id_request{
    font-size: 26px;
    text-align: right;
}
.price_request{
    font-size: 26px;
    text-align: right;
    margin-bottom: 20px;
    font-family: Rubik;
    float: right;
}
.full_name_request{
    text-align: center;
    width: 100%;
    text-align: right;
    font-family: Rubik;
}
.form_group_request{
    text-align: center;
    float: right;  
    margin-bottom: 20px;
}
.full_name_input_request{
    border-radius: 20px;
    width: 300px;
    height: 38px;
    text-align: center;
    border: 0px;
}
.email_request{    
    width: 100%;
    text-align: right;
    font-family: Rubik;
}
.email_input_request{
    border-radius: 20px;    
    width: 300px;
    height: 38px;
}
.Numberphone_request{
    width: 100%;
    text-align: right;
    font-family: Rubik;
}
.Numberphone_input_request{
    border-radius: 20px;
    width: 300px;
    height: 38px;
    text-align: right;
}
.Note_request{  
    text-align: right;
    width: 300px;
    font-family: Rubik;
}
.Note_input_request{
    width: 302px;
    height: 160px;
    text-align: right;
    border-radius: 20px;
}
._2024{
    text-align: center;
    font-size: 42px;
}
.alerts {
    position: absolute;
    top: 10px;
    left: 0px;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}
.alerts-success {
    position: absolute;
    top: 10px;
    left: 0px;
    color: #ffffff;
    background-color: #00ff0a;
    border-color: #c3e6cb;
}
.All_img{
    background-image: url(./img/home.webp);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.home_promo_img{
    width: 100%;
    height: 667px;
    background-image: url(./img/promo_cake.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.home_promo_text{
    position: absolute;
    
    top: 1px;
    z-index: 5;
    color: white;
    font-size: 58px;
    font-family: El Messiri;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    align-items: center;
    padding: 214px 100px 0px 320px;
}
.home_promo_text_hello{
    
    height: 352px;
    color: white;
    font-size: 58px;
    font-family: El Messiri;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    align-items: center;
}
.arab{
    text-align: right;
}
.motorcycle_home{
    background: url(./img/motorcycle_home_pc.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 677px;
}
.bicycle_home{
    background: url(./img/bicycle_home_pc.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 677px;
}
.on_click{
    width: 254px;
}
.nav_parts{
    width: 20%;
    padding: 20px 10px;
}
.Login_input_txt {
    color: white;
    font-size: 17px;
    width: 100%;
    text-align: center;
}
.Login_input_smll_txt{
    color: rgb(98, 255, 59);
    font-size: 15px;
    width: 80%;
    text-align: center;
    margin-bottom: 10px;
}
.display_flex{
    display: flex;
    justify-content: center;
}
.display_flex_center{
    display: flex;
    justify-content: center;
}
button {
    position: relative;
    width: 148px;
    height: 52px;
    outline: none;
    transition: 0.1s;
    background-color: transparent;
    border: none;
    font-size: 13px;
    font-weight: bold;
    color: #ddebf0;
}
#clip {
    --color: #2761c3;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 5px double var(--color);
    box-shadow: inset 0px 0px 15px #195480;
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.arrow {
    position: absolute;
    transition: 0.2s;
    background-color: #2761c3;
    top: 35%;
    width: 11%;
    height: 30%;
}

#leftArrow {
    left: -13.5%;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
#rightArrow {
    -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
    left: 102%;
}
button:hover #rightArrow {
    background-color: #27c39f;
    left: -15%;
    animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}
button:hover #leftArrow {
    background-color: #27c39f;
    left: 103%;
    animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}
.corner {
    position: absolute;
    width: 4em;
    height: 4em;
    background-color: #2761c3;
    box-shadow: inset 1px 1px 8px #2781c3;
    transform: scale(1) rotate(45deg);
    transition: 0.2s;
}
#rightTop {
    top: -1.98em;
    left: 91%;
}
#leftTop {
    top: -1.96em;
    left: -3.0em;
}
#leftBottom {
    top: 2.10em;
    left: -2.15em;
}
#rightBottom {
    top: 45%;
    left: 88%;
}
button:hover #leftTop {
    animation: 0.1s ease-in-out 0.05s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
button:hover #rightTop {
    animation: 0.1s ease-in-out 0.15s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
button:hover #rightBottom {
    animation: 0.1s ease-in-out 0.25s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
button:hover #leftBottom {
    animation: 0.1s ease-in-out 0.35s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
button:hover .corner {
    transform: scale(1.25) rotate(45deg);
}
button:hover #clip {
    animation: 0.2s ease-in-out 0.55s both greenLight8;
    --color: #27c39f;
}
@keyframes changeColor8 {
    from {
        background-color: #2781c3;
    }
    to {
        background-color: #27c39f;
    }
}
@keyframes lightEffect8 {
    from {
        box-shadow: 1px 1px 5px #27c39f;
    }
    to {
        box-shadow: 0 0 2px #27c39f;
    }
}
@keyframes greenLight8 {
    from {}
    to {
        box-shadow: inset 0px 0px 32px #27c39f;
    }
}
@keyframes leftArrow8 {
    from {
        transform: translate(0px);
    }
    to {
        transform: translateX(10px);
    }
}
@keyframes rightArrow8 {
    from {
        transform: translate(0px);
    }
    to {
        transform: translateX(-10px);
    }
}
.button_login{
    position: relative;
    z-index: 2;
    color: white;
    background: transparent;
    border: 0px;
    font-size: 23px;
}
.button {
    margin: 0;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}
.button {
    --border-right: 6px;
    --text-stroke-color: rgba(255,255,255,0.6);
    --animation-color: #37FF8B;
    --fs-size: 2em;
    letter-spacing: 3px;
    text-decoration: none;
    font-size: 23px;
    font-family: "Arial";
    position: relative;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-stroke-color);
}
.hover-text {
    position: absolute;
    box-sizing: border-box;
    content: attr(data-text);
    color: var(--animation-color);
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    -webkit-text-stroke: 1px var(--animation-color);
}
.button:hover .hover-text {
    width: 100%;
    filter: drop-shadow(0 0 23px var(--animation-color))
}
.button_login_out{
    width: 260px;
    height: 80px;
}
.btn_signup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 264px;
    overflow: hidden;
    height: 60px;
    background-size: 300% 300%;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
    transition: 0.5s;
    animation: gradient_301 5s ease infinite;
    border: double 4px transparent;
    background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
#container-stars {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
}
strong {
    z-index: 2;
    font-family: 'Avalors Personal Use';
    font-size: 12px;
    letter-spacing: 5px;
    color: #FFFFFF;
    text-shadow: 0 0 4px white;
}
#glow {
    position: absolute;
    display: flex;
    width: 12rem;
}
.circle {
    width: 100%;
    height: 30px;
    filter: blur(2rem);
    animation: pulse_3011 4s infinite;
    z-index: -1;
}
.circle:nth-of-type(1) {
    background: rgba(254, 83, 186, 0.636);
}
.circle:nth-of-type(2) {
    background: rgba(142, 81, 234, 0.704);
}
.btn_signup:hover #container-stars {
    z-index: 1;
    background-color: #212121;
}
.btn_signup:hover {
    transform: scale(1.1)
}
.btn_signup:active {
    border: double 4px #FE53BB;
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: none;
}
.btn_signup:active .circle {
    background: #FE53BB;
}
#stars {
    position: relative;
    background: transparent;
    width: 100%;
    height: 100%;
}
#stars::after {
    content: "";
    position: absolute;
    top: -10rem;
    left: -100rem;
    width: 100%;
    height: 100%;
    animation: animStarRotate 90s linear infinite;
}
#stars::after {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
}
#stars::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 170%;
    height: 500%;
    animation: animStar 60s linear infinite;
}
#stars::before {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
    opacity: 0.5;
}
@keyframes animStar {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-135rem);
    }
}
@keyframes animStarRotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0);
    }
}
@keyframes gradient_301 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes pulse_3011 {
    0% {
        transform: scale(0.75);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(0.75);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}
.hidden {
    display: none;
}
.background_account {
    width: 100%;
    height: 286px;
}
.image_profile_account_div{
    position: absolute;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    top: 132px;
}
.image_profile_account_div_private{
    position: absolute;
    z-index: 1;
    display: flex;
    
    align-items: center;
    justify-content: flex-start;
    top: 132px;
}
.prf_rm{
    display: flex;
    
    align-items: center;
    justify-content: flex-start;
}
.image_profile_account{
    width: 284px;
    border-radius: 50%;
}
.background_profile{
    height: 280px;
    width: 100%;
    overflow: hidden;
}
.friends_followers_voters_div{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
.F_F_V{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 22px;
}
.btn_profile{
    display: flex;
    justify-content: center;
}
.btn_profile_1{
    width: 40px;
    height: 40px;
    padding: 4px;
    display: flex;
    justify-content: center;
}
.btn_profile_1 > img{
    width: 30px;
}
.btn_profile_2{
    width: 40px;
    height: 40px;
    padding: 4px;
    display: flex;
    justify-content: center;
}
.Content_profile-vid{
    display: flex;
    padding: 20px 0px 20px 0px;
    border-radius: 19px;
    flex-direction: column;
    align-items: center;
}
.Content_profile-short{
    display: none;
    padding: 20px 4px 100px 4px;
    border-radius: 19px;
}
.Content_profile-img{
    display: none;
    padding: 20px 4px 100px 4px;
    border-radius: 19px;
}
.Content_profile-txt{
    display: none;
    padding: 20px 4px 100px 4px;
    border-radius: 19px;
}
.classification_profile{
    display: flex;
    justify-content: flex-end;
    padding: 35px 35px 0px 0px;
}
.clsfctn_prfl{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.clsfctn_prfl_slash{
    text-align: center;
    width: 100%;
    font-size: 30px;
    text-align: center;
}
.clsfctn_prfl_state{
    width: 526px;
    font-size: 30px;
    text-align: center;
}
.clsfctn_prfl_city{
    width: 100%;
    font-size: 30px;
    display: flex;
    justify-content: center;
}
.clsfctn_prfl_ct {
    width: 100%;
    font-size: 18px;
    display: flex;
    justify-content: flex-end;
}
.contant_home_page{
    width: 100%;
    scroll-snap-type: y mandatory;
    padding-bottom: 60px;
}
.nav_home_page{
    width: 26%;
    height: 600px;
    float: right;
}
.div_friends{
    width: 100%;
    height: 118px;
    padding: 10px 170px;
    display: flex;
    justify-content: center;
}
.div_close_Fr {
    width: 100%;
    height: 118px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div_teams{
    width: 100%;
    height: 142px;
    padding: 10px 170px;
    display: flex;
    justify-content: center;
}
.div_content{
    display: flex;
    justify-content: center;
    width: 100%;
}
.div_content_stars{
    display: flex;
    scroll-snap-align: start;
    justify-content: center;
    width: 100%;
    background-color: black;
}
.content_store{
    width: 100%;
    height: 240px;
    padding: 10px 20px;
    background-color: #ff47da;
}
.profile_friend {
    width: 110px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content_hm{
    width: 100%;
    background-color: white;
    border-radius: 19.5px;
    padding: 10px;
    margin-bottom: 30px;
}
.Hd_Cntnt {
    display: flex;
    justify-content: center;
    height: 54px;
}
.rank_Hd_Cntnt {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 54px;
}
.Hd_Cntnt_right_side{
    display: flex;
    justify-content: center;
    height: 60px;
}
.Cntnt{
    width: 100%;
}
.Spprt_Cmmnt {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 46px;
    align-items: center;
}
.Spprt_opinions{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 60px;
    padding: 4px 0px 0px 0px;
}
.Spprt_Cmmnt_stars{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 54px;
    padding: 0px;
    position: absolute;
    bottom: 0%;
}
.S_C_SH{
    width: 230px;
    padding: 6px 0px 0px 0px;
}
.Img_Prfl_Nm{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    justify-content: center;
    align-items: center;
    color: black;
    overflow: hidden;
}
.Dv_Nmbr_S_N_SH{
    display: flex;
    justify-content: space-around;
    width: 64px;
    color: white;
}
.Dv_mr{
    width: 12px;
}
.Img_S_N_SH{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 100%;
    padding-right: 3px;
    flex-direction: column;
    flex-wrap: nowrap;
}
.Spprt_btn, .Cmmnt_btn{
    height: 40px;
    width: 50%;
}
.support_button, .opinion_btn{
    display: flex;
    justify-content: center;
}
.txt_cntnt{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 30px 0px 30px;
    background-image: url(./img/txt.webp);
    background-size: cover;
    color: white;
    height: 444px;
    text-align: center;
    border-radius: 10px;
    
}
.add_image{
    display: none;
    position: fixed;
    height: 90vh;
    width: 100%;
    z-index: 11;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.add_wallpaper{
    display: none;
    position: fixed;
    height: 90vh;
    width: 100%;
    z-index: 5;
}
.add_video{
    display: none;
    position: fixed;
    height: 90vh;
    width: 100%;
    z-index: 11;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#VidForm{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ShortForm, #tfhForm{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ImgForm{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#TxtmyForm{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add_text{
    display: none;
    position: fixed;
    height: 612px;
    width: 100%;
    z-index: 11;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.add_short,
.add_tfh {
    display: none;
    position: fixed;
    height: 612px;
    width: 100%;
    z-index: 11;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.add_cntnt {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 11;
    width: 100%;
    height: 90vh;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.add_contnt_flex{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add_content {
    background-image: url(./img/video_image_txt_adv.webp);
    width: 730px;
    height: 450px;
    border-radius: 24px;
}
.content_video{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 730px;
    height: 510px;
    background-image: linear-gradient(to right bottom, #5fdee1, #37bbcf, #1398b9, #01769f, #0c5582);
    border-radius: 19px;
}
.content_short{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 420px;
    height: 586px;
    background-image: linear-gradient(to right bottom, #5fdee1, #37bbcf, #1398b9, #01769f, #0c5582);
    border-radius: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content_image{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 420px;
    height: 586px;
    background-image: linear-gradient(to right bottom, #5fdee1, #37bbcf, #1398b9, #01769f, #0c5582);
    border-radius: 19px;
}
.content_text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 426px;
    height: 554px;
    background-image: linear-gradient(to right bottom, #5fdee1, #37bbcf, #1398b9, #01769f, #0c5582);
    border-radius: 19px;
}
.content_video_header{
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content_short_header{
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content_image_header{
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content_text_header{
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content_image_icon_return{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 54px;
    padding-left: 10px;
    position: absolute;
    z-index: 1;
    left: 0;
}
.content_image_title{
    color: red;
    width: 620px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
}
.content_video_middle{
    width: 100%;
    height: 50%;
}
.content_short_middle{
    height: 100%;
    width: 100%;
}
.content_image_middle{
    height: 100%;
    width: 100%;
}
.content_text_middle{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 0px 10px;
}
.content_image_footer{
    display:flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    width: 288px;
}
.content_wallpaper_footer{
    display:flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    width: 288px;
}
.content_advantage{
    display: flex;
    flex-direction: column;
    width: 730px;
    height: 450px;
    background-color: white;
    border-radius: 19px;
}
.taxonomy_main{
    width: 100%;
    height: 800px;
    color: whitesmoke;
    background-image: linear-gradient(to right bottom, #051937, #002762, #00358f, #0042bd, #124ceb);
}
.taxonomy_title{
    width: 100%;
    color: white;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-weight: 500;
}
.taxanomy_menu {
    width: 100%;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: right;
}
.taxanomy_menu_icon{
    width: 60px;
}
#taxonomy_table_div{
    color: black;
    margin-bottom: 50px;
}
.taxonomy_table{
    border: none;
    width: 100%;
    text-align: center;
}
.taxonomy_table_icon_profile_left{
    padding-right: 3px;
    position: absolute;
}
.taxonomy_table_icon_profile_left > img{
    width: 60px;
    border-radius: 50%;
    height: 60px;
}
.taxonomy_table_icon_profile{
    display: flex;
    justify-content: center;
    align-items: center;
}
.taxonomy_table_icon_profile_right{
    padding-right: 3px;
    position: absolute;
    right: 0px;
    width: 60px;
    border-radius: 50%;
    height: 60px;
}
.flex-align-items{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.advantage_main{
    width: 100%;
    height: 800px;
    color: whitesmoke;
}
.custum-file-upload {
    height: 96%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    gap: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cacaca;
    background-color: rgba(255, 255, 255, 1);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0px 48px 35px -48px rgba(0,0,0,0.1);
}
.custum-file-upload .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload .icon svg {
    height: 80px;
    fill: rgba(75, 85, 99, 1);
}
.custum-file-upload .text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custum-file-upload .text span {
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
}
.custum-file-upload input {
    display: none;
}
.flash-message {
    animation: fadeOut 9s forwards;
    z-index: 4;
    top: 25px;
    color: white;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25)
}
.chats_main {
    height: 100vh;
    background-image: url(./img/footer.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.taxonomic_groups {
    width: 100%;
    height: 100vh;
    color: whitesmoke;
    background-image: url(./img/footer.webp);
    background-size: cover;
}
.center_chats_message {
    width: 550px;
    height: 100vh;
    margin: 0px auto 0px auto;
}
.in_center_chats_message {
    width: 100%;
    height: 92vh;
    margin-bottom: 30px;
    padding: 3vh 20px 20px 20px;
}
.header_messages {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 76px;
    background-image: url(./img/dwn.webp);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 60px;
    border-bottom-left-radius: 60px;
}
#recent-texts {
    width: 100%;
    height: 88vh;
    padding: 82px 4px 26px 4px;
    overflow-y: scroll;
    background-image: url(./img/footer.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.room-texts_tour_join {
    width: 100%;
    height: 50vh;
    padding: 82px 4px 26px 4px;
    overflow-y: scroll;
    background-image: url(./img/footer.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.room-texts{
    width: 100%;
    height: 88vh;
    padding: 82px 4px 26px 4px;
    overflow-y: scroll;
    background-image: url(./img/footer.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.text_message_left {
    width: 200px;
    border-radius: 19.5px;
    margin: 26px 0px 10px 22px;
    color: ghostwhite;
    text-align: center;
}
.txt_msg_left {
    background-image: url(./img/msgs.webp);
    background-size: cover;
    padding: 10px 14px 10px 14px;
    border-radius: 19.5px;
}
.txt_msg_right {
    background-image: url(./img/msgs.webp);
    background-size: cover;
    padding: 10px 14px 10px 14px;
    border-radius: 19.5px;
    text-align: center;
}
.img_message_left {
    width: 200px;
    border-radius: 19.5px;
    margin: 26px 0px 10px 22px;
    color: ghostwhite;
}
.img_message_right {
    width: 200px;
    border-radius: 19.5px;
    margin: 26px 0px 10px 22px;
    color: ghostwhite;
}
.text_message_right {
    width: 200px;
    border-radius: 19.5px;
    margin: 26px 0px 10px 22px;
    color: ghostwhite;
    text-align: center;
}
.left_side{
    float: left;
    width: 100%;
}
.right_side{
    float: right;
    width: 70%;
}
.in_right_side {
    width: 100%;
    float: right;
}
.input_send_messages {
    position: fixed;
    width: 550px;
    height: 58px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-top-left-radius: 16%;
    border-top-right-radius: 16%;
    bottom: 44px;
}
#inputText{
    text-align: center;
    border: 0px;
    border-radius: 12px;
    height: 36px;
    width: 520px;
    color: white;
    background-color: #212121;
    border: 2px solid #8707ff;
    border-radius: 10px;
}
#RoomInputText{
    text-align: center;
    border: 0px;
    border-radius: 12px;
    height: 36px;
    width: 520px;
    color: white;
    background-color: #212121;
    border: 2px solid #8707ff;
    border-radius: 10px;
}
#inputImgVidTxt{
    text-align: center;
    border: 0px;
    border-radius: 12px;
    height: 36px;
    width: 520px;
}
#RoomInputImgVidTxt{
    text-align: center;
    border: 0px;
    border-radius: 12px;
    height: 36px;
    width: 520px;
}
#inputTextFile{
    text-align: center;
    border: 0px;
    border-radius: 12px;
    height: 46px;
    width: 520px;
}
.rider_user_name{
    font-size: 12px;
    font-weight: 700;
    font-size: 12px;
}
.home_top_3-username {
    font-weight: 700;
    font-size: 16px;
    padding-left: 10px;
    width: 144px;
}
.Number_taxonomy_rider{
}
.ico_rank_user{
    font-size: 26px;
    position: absolute;
    left: -3px;
    top: 55%;
    z-index: 4;
}
.ico_rank_top_users{
    font-size: 40px;
}
.rider_column{
    width: 300px;
    border: none;
}
.rider_row_image_name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 146px;
}
.rider_name_friend {
    color: white;
    font-size: 15px;
    text-align: center;
    overflow: hidden;
}
.userTfhNickname {
    color: white;
    font-size: 15px;
    text-align: center;
    overflow: hidden;
    z-index: 4;
}
.rider_team_name {
    color: white;
    font-size: 15px;
    width: 82px;
    text-align: center;
}
.rider_name_friend:hover{
    color: white;
    font-size: 15px;
    text-decoration: none;
}
.rider_name_friend_online{
    color: #00ff0a;
    font-size: 15px;
    text-align: center;
    overflow: hidden;
}
.rider_name_friend_online:hover{
    color: #00ff0a;
    font-size: 15px;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
}
.video_pst{ 
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: white;
    height: 100%;
    border-radius: 19.5px;
    padding: 10px;  
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.short_pst{ 
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: white;
    height: 100%;
    border-radius: 19.5px;
    padding: 10px;  
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.image_pst{ 
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: white;
    height: 100%;
    border-radius: 19.5px;
    padding: 10px;  
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.image_tour_pst{ 
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: white;
    height: 42%;
    border-radius: 19.5px;
    padding: 10px;  
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
    margin-bottom: 10px;
}
.text_pst{ 
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: white;
    border-radius: 19.5px;
    padding: 10px;  
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.video_pst_contnt{
    position: relative;
    width: 100%;
    height: 100%;    
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
}
.video_pst_contnt > div {
    position: absolute;
    height: 100%;
    width: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.short_pst_contnt{
    position: relative;
    width: 100%;
    height: 100%;    
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
}
.short_pst_contnt > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.image_pst_contnt{
    position: relative;
    width: 100%;
    height: 100%;    
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
}
.image_pst_contnt > div {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.text_pst_contnt{
    position: relative;
    width: 100%;
    height: 188px;    
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
}
.text_pst_contnt > div {
    position: absolute;
    width: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.front_pst_video{
    transform: rotateY(0deg) translateZ(160px); 
    border-radius: 34px 3px 0 0;
    background-color: white;
}
.right_pst_video{
    transform: rotateY(90deg) translateZ(160px);
    border-radius: 0 0 3px 34px;
    background-color: white;
}
.front_pst_short{
    transform: rotateY(0deg) translateZ(160px); 
    border-radius: 34px 3px 0 0;
    background-color: white;
}
.right_pst_short{
    transform: rotateY(90deg) translateZ(160px);
    border-radius: 0 0 3px 34px;
    background-color: white;
}
.front_pst_img{
    transform: rotateY(0deg) translateZ(160px); 
    border-radius: 34px 3px 0 0;
    background-color: white;
}
.right_pst_img{
    transform: rotateY(90deg) translateZ(160px);
    border-radius: 0 0 3px 34px;
    background-color: white;
}
.front_pst_text{
    transform: rotateY(0deg) translateZ(160px); 
    border-radius: 34px 3px 0 0;
    background-color: white;
}
.right_pst_text{
    transform: rotateY(90deg) translateZ(160px);
    border-radius: 0 0 3px 34px;
    background-color: white;
}
.post_content{ 
    overflow: hidden;
    position: relative;
    width: 400px;
    border-radius: 19.5px;
    margin-bottom: 12px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.post_content_stars { 
    overflow: hidden;
    position: relative;
    width: 385px;
    border-radius: 19.5px;
    margin-bottom: 12px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.post_content_TFH {
    overflow: hidden;
    position: relative;
    width: 385px;
    border-radius: 19.5px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
@keyframes float{
    0%{
        transform: translateZ(20px);
    }
    100%{
        transform: translateY(-21px) translateX(-13px) translateZ(30px);
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0.33;
        transform: scale(.89);
    }
}
.card_post_image{
    position: relative;
    width: 100%;
    height: 697px;
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
}
.card_post_image > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    border: #5738ff 2px solid;
}
.card_post_stars{
    position: relative;
    width: 100%;
    height: 100vh;
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
    background-color: black;
}
.card_post_stars > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.card_post_short{
    position: relative;
    width: 100%;
    height: 716px;
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
    touch-action: pan-y;
}
.card_post_short > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    border: #5738ff 2px solid;
    justify-content: flex-start;
    backface-visibility: hidden;
}
.card_post_text{
    position: relative;
    width: 100%;
    height: 588px;
    transform-style: preserve-3d;
    transform: translateZ(-140px);
    transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    overflow-x: visible;
    border-radius: 20px;
    margin-bottom: 10px;
}
.card_post_text > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 20px;
    margin-bottom: 10px;
    border: #5738ff 2px solid;
}
.front_post{
    transform: rotateY(0deg) translateZ(160px); 
    border-radius: 34px 3px 0 0;
}
.front_post_stars{
    transform: rotateY(0deg) translateZ(160px); 
}
.right_post{
    transform: rotateY(90deg) translateZ(160px);
    border-radius: 0 0 3px 34px;
}
.right_post_stars{
    transform: rotateY(90deg) translateZ(160px);
}
.rider_name_post {
    color: white;
    padding-left: 3px;
}
.description_post_rider{
    padding: 11px 30px 10px 30px;
    color: white;
    text-align: center;
}
.Opinions{
    font-size: 20px;
    display: list-item;
    text-align: center;
    color: white;
}
.op_riders{
    width: 100%;
    padding: 14px 30px 30px 14px;
    height: 76%;
}
.class_img_profile_rider {
    width: 46px;
    border-radius: 50%;
    outline: 1px solid #5738ff;
}
.div_op_r{
    display: flex;
    align-items: flex-end;
}
.op_post_rider{
    padding: 10px 0px 6px 30px;
    color: white;
}
.div_post_js{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    border-radius: 20px;
    height: 611.547px;
    width: 100%;
    overflow: hidden;
}
.div_post_js_stars{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input_opinion_rider{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input_opinion_rider > input{
    width: 326px;
    height: 30px;
    border-radius: 10px;
    border-color: deepskyblue;
    text-align: center;
}
.inpt_opo {
    position: fixed;
    bottom: 40px;
    left: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.inpt_opo > input{
    width: 326px;
    height: 30px;
    border-radius: 10px;
    border-color: deepskyblue;
    text-align: center;
}
.class_bottom_input_send{
    color: white;
    
}
.border_chats_message {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 20px;
    width: 100%;
    background-image: url(./img/J0024.webp);
    background-size: cover;
    margin-bottom: 12px;
    flex-direction: column;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}
.border_chats_users {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 20px;
    width: 100%;
    background-color: black;
    background-size: cover;
    margin-bottom: 12px;
    flex-direction: row;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}
.chats_friend_name {
    color: white;
    font-size: 20px;
    margin-left: 4px;
}
.chats_friend_name:hover{
    text-decoration: none;
}
.chats_friend_name_False{
    color: red;
    font-size: 20px;
    margin-left: 10px;
}
.chats_friend_name_False:hover{
    text-decoration: none;
}
.friend_name_rider_online{
    font-size: 20px;
    color: #00ff0a;
}
.friend_name_rider{
    font-size: 20px;
    color: white;
}
.img_support_post {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.support-post {
    width: 80px;
    height: 46px;
}
.out-support-post {
    width: 80px;
    height: 46px;
}
.opinion-post {
    width: 90px;
    height: 50px;
}
.out-opinion-post {
    width: 90px;
    height: 50px;
}
.free_space_click_1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.flip{
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 20px;
    align-items: center;
}
.flip-txt{
    width: 100%;
    height: 100%;
}
.fr_sp_click_1{
    width: 230px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fr_sp_click_2_vid{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    text-align: center;
    cursor: pointer;
    color: white;
}
.fr_sp_click_2_short{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    text-align: center;
    cursor: pointer;
    color: white;
}
.fr_sp_click_2_img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    text-align: center;
    cursor: pointer;
    color: white;
}
.btn_jstf_cntnt_cntr{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.title_word_img{
    text-align: center;
    height: 36px;
    color: #00ff0a;
}
.post_video_cntrl{
    max-width: 300px;
    border-radius: 10px;
}
.vid_post_pstn{
    display: flex;
    justify-content: center;
}
.data_rider_friend{
    display: flex;
    width: 100%;
    justify-content: center;
}
.NO_data_rider__friends{
    width: 320px;
    display: flex;
    height: 95px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
}
.chooses_post{
    display: none;
    width: 100%;
    height: 412px;
    position: absolute;
    z-index: 2;
    top: 282px;
    border-radius: 19px;
    background: linear-gradient(90deg, #00c6ff, #0072ff);
    flex-direction: column;
    justify-content: center;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.chooses_post_stars {
    display: none;
    width: 100%;
    height: 76vh;
    position: absolute;
    top: 50px;
    right: 0px;
    border-radius: 19px;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.options-str {
    display: flex;
    width: 200px;
    background-image: url(./img/options_st.webp);
    background-size: cover;
    border-radius: 19px;
    flex-direction: column;
    justify-content: center;
    border-radius: 50%;
}
.chss_pst {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Public_Private {
    width: 90px;
    position: absolute;
    z-index: 1;
    right: 0px;
}
.email {
    width: 60px;
    position: absolute;
    z-index: 1;
    left: 0px;
    display: flex;
    height: 62px;
    justify-content: center;
    align-items: center;
}
/* TEST CODE HTML */
.card_profile {
    -webkit-perspective: 150rem;
            perspective: 150rem;
    -moz-perspective: 150rem;
    position: relative;
    height: 312px;
    width: 300px;
    border-radius: 50%;
    background-color: white;
}
.card__side {
    border-radius: 50%;
    height: 291px;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
    position: absolute;
    width: 300px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
}
.card__side--front {
    border-radius: 50%;
}
.card__side--front-1 {
    border-radius: 50%;
    height: 290px;
    background: linear-gradient(-45deg, #f403d1, #64b5f6);
}
.card__side--front-2 {
    border-radius: 50%;

    background: linear-gradient(-45deg, #f321d7, #ffec61);
}
.card__side--front-3 {
    border-radius: 50%;
    background: linear-gradient(-45deg, #24ff72, #9a4eff);
}
.card__side--back {
    border-radius: 50%;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.card__side--back-1 {
    border-radius: 50%;
    background: linear-gradient(-45deg, #64b5f6, #f403d1);
}
.card__side--back-2 {
    border-radius: 50%;
    background: linear-gradient(-45deg, #ffec61, #f321d7);
}
.card__side--back-3 {
    border-radius: 50%;
    background: linear-gradient(-45deg, #9a4eff, #24ff72);
}
.card_profile:hover .card__side--front-1,
.card_profile:hover .card__side--front-2,
.card_profile:hover .card__side--front-3 {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}
.card_profile:hover .card__side--back {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
}
.card__title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}  
.card__heading {
    font-size: 4rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    width: 75%;
}
.card__heading-span {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.card__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
}
.card__price-box {
    text-align: center;
    color: #fff;
}
.card__price-only {
    font-size: 1.4rem;
    text-transform: uppercase;
}
.card__price-value {
    font-size: 6rem;
    font-weight: 100;
}
.info_rider{
    display: flex;
    margin: 0px 30px;
    background: linear-gradient(-45deg, #24ff72, #9a4eff);
    padding: 20px;
    border-radius: 16px;
}
.info_rider_var{
    display: flex;
    width: 100%;
    margin-right: 5px;
    flex-direction: column;
    align-items: center;
    padding: 0px 30px 30px 30px;
    background: linear-gradient(-45deg, #f403d1, #64b5f6);
    border-radius: 19px;
}
.info_rider_fix{
    display: flex;
    width: 100%;
    margin-left: 5px;
    flex-direction: column;
    align-items: center;
    padding: 0px 30px 30px 30px;
    background: linear-gradient(-45deg, #64b5f6, #f403d1);
    border-radius: 19px;
}
.Information_rider_in_div{
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    font-size: 30px;
}
.Info_rider_in_div{
    text-align: center;
    width: 100%;
    height: 38px;
    font-size: 24px;
}
.badge_profile{
    width: 24%;
    padding: 0px 30px 30px 30px;
}
.width_space_title_profile{
    width: 62%;
}
.post_image_profile_rider {
    border-radius: 50%;
    height: 60px;
    width: 170px;
    font-size: 16px;
}
.input_profile_account_image{
    display: none;
}
#post_image_background_rider{
    background: #8779f363;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 30px;
    font-size: 10px;
    border-top-left-radius: 50px;
}
.title_info_var {
    width: 100%;
    text-align: center;
    font-size: 34px;
    font-weight: 700;
}
.div_videos_profile{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.div_vid_profile {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    padding-bottom: 20px;
    justify-content: center;
}
.div_texts_profile{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}
.div_advs_profile {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.div_video_profile {
    width: 314px;
    height: 292px;
    background-image: url(./img/dwn.webp);
    background-size: cover;
    border-radius: 19px;
    margin-bottom: 26px;
}
.video_text_start { 
    text-align: center;
    margin-bottom: 14px;
    height: 42px;
}
.div_short_profile {
    height: 611.547px;
    width: 346px;
    border-radius: 19px;
}
.div_image_profile{
    width: 330px;
    border-radius: 19px;
    margin-bottom: 26px;
}
.div_text_profile{
    display: flex;
    width: 240px;
    height: 310px;
    background-image: url(./img/txt.webp);  
    background-size: cover;
    padding: 10px;
    border-radius: 19px;
    margin: 0px 45px 20px 45px;
    justify-content: center;
    align-items: center;
}
.div_adv_profile{
    width: 654px;
    height: 240px;
    background: #e2f2ff;
    padding: 10px;
    border-radius: 19px;
    margin: 0px 45px 20px 45px;
    display: flex;
}
.video_rider_start{
    width: 100%;
}
.adv_rider_start{
    display: flex;
    width: 400px;
    height: 220px;
    justify-content: center;
    align-items: center;
}
.short_rider_start{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.image_rider_start{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.short_text_start{
    width: 100%;
    height: 20%;
}
.image_text_start{
    width: 100%;
    height: 20%;
}
.adv_image_rider_start{
    width: 100%;
    height: 70%;
}
.image_image_rider_start{
    width: 100%;
    height: 100%;
}
.border_div_options{
    border-bottom: #001eff 2px solid;
    display: flex;
    justify-content: center;
}
.adv_text_content{
    width: 100%;
}
.adv_text_title_start{
    font-size: 26px;
    padding-left: 10px;
    width: 100%;
}
.adv_text_content_start{
    padding-left: 10px;
    width: 100%;
}
.btn_support_rider{
    width: 140px;
}
.message_videos_rider{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%;
    height: 240px;
    color: white;
    border-radius: 14px;
    background-image: linear-gradient(to right bottom, #5463fb, #4d6cf4, #4c74eb, #4f7be2, #5781d7, #4a8ddb, #4298dc, #42a2dc, #16b5e5, #00c7e8, #00d9e5, #40e9de);
}
.login_input {
    width: 100%;
    height: 50px;
    border-radius: 30px;
    color: #495057;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    background: #1c1e21;
}
.top_circle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 365px;
    height: 52px;
}
.top_m_right_cicle{
    display: flex;
    justify-content: space-around;
}
.top_m_right_cicle_friend{
    display: flex;
    justify-content: flex-end;
    width: 324px;
}
.top_right_cicle{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    width: 356px;
    height: 105px;
}
.top_right_cicle_friend{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.name_user{
    text-align: center;
    color: white;
    font-weight: 400;
    width: 100%;
    height: 24px;
}
.name_friend_rider{
    text-align: center;
    color: white;
    font-weight: 400;
    width: 66%;
    height: 24px;
    top: 280px;
    position: absolute;
}
.bottom_m_right_cicle{
    display: flex;
    justify-content: space-around;
    width: 356px;
    height: 52px;
}
.bottom_m_right_cicle_store{
    display: flex;
    justify-content: space-around;
    width: 356px;
    height: 54px;
}
.bottom_m_right_cicle_store_parts{
    display: flex;
    justify-content: space-around;
    width: 356px;
    height: 30px;
}
.bottom_m_right_cicle_top{
    display: flex;
    justify-content: space-around;
}
.bottom_m_right_cicle_friend{
    display: flex;
    justify-content: flex-end;
    width: 326px;
    height: 56px;
}
.bottom_cicle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 356px;
    height: 52px;
}
.bottom_cicle_parts{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 356px;
    height: 102px;
}
.add_friend_rider{
    width: 40px;
    margin-right: 10px;
}
.lg_taxonomy_ttl{
    width: 130px;
}
.inp_search_riders_big{
    height: 100%;
    width: 42%;
    background-color: #f3edf7;
    padding: 6px 8px 6px 6px;
    display: flex;
    border-radius: 14px;

}
.inp_search_riders_small{
    width: 100%;
    border: 0px;
    text-align: center;
    background: #f3edf7;
}
.search_icon{

}
.inpts_sign_up {
    width: 100%;
    height: 46px;
    border-radius: 30px;
    border: 0px;
    color: #495057;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}
.inpt_nick_name {
    text-align: center;
    width: 90%;
    height: 46px;
    border-radius: 30px;
    border: 0px;
    color: #495057;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}
.out_div_nick_name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 46px;
}
.inpt_rider_nickname {
    text-align: center;
    width: 86%;
    height: 46px;
    border-radius: 8px;
    border: 0px;
    color: #495057;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.filtering_in_taxo {
    background-image: url(./img/cicle.webp);
    background-size: cover;
    color: whitesmoke;
    border-radius: 110px;
    width: 400px;
    height: 330px;
    padding: 20px 30px;
    text-align: center;
    font-size: 24px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.filtering_inputs{
    width: 82%;
    border: 0px;
    padding: 8px;
    margin-bottom: 14px;
    text-align: center;
    border-radius: 20px;
        padding: 8px;
}
.btn_update_list{
    width: 200px;
    height: 54px;
    background: rgb(51, 255, 238);
    border-radius: 20px;
    border: 0px;
}
#search-form{
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 8px;
}
#search-motorcycle-city {
    height: 100%;
    width: 100%;
}
#search-motorcycle-country {
    height: 100%;
    width: 100%;
}
#search-bicycle-city {
    height: 100%;
    width: 100%;
}
#search-bicycle-country {
    height: 100%;
    width: 100%;
}
#search-motorcycle-parts-city {
    height: 100%;
    width: 100%;
}
#search-motorcycle-parts-country {
    height: 100%;
    width: 100%;
}
#search-bicycle-parts-city {
    height: 100%;
    width: 100%;
}
#search-bicycle-parts-country {
    height: 100%;
    width: 100%;
}
#current_user_bar_search {
    background-image: linear-gradient(to right bottom, #00a6d7, #009bf4, #0070ff, #6448ff, #a72eff);
    color: white;
}
#ten_top_riders{
    background-image: linear-gradient(to right bottom, #3a1766, #521e8b, #6c25b0, #882ad7, #a72eff);
    color: white;
}
#level_world_first{
    background-image: url(./img/first.webp);
    color: white;
}
#level_world_second{
    background-image: url(./img/second.webp);
    color: white;
}
#level_world_third{
    background-image: url(./img/third.webp);
    color: white;
}
.add_support_rider:active{
    border: 0px;
}
#uploadFormImage {
    display: none;
}
#uploadFormVideo {
    display: none;
}
.variable_information_inpt{
    height: 34px;
    width: 300px;
    border-radius: 20px;
    border: 0px;
    text-align: center;
    font-size: 16px;
}
.text_message_time_at_read{
    width: 100%;
    height: 15px;
    font-size: 10px;
    text-align: center;
}
.text_message_time_file{
    width: 100%;
    height: 15px;
    font-size: 10px;
    text-align: center;
    color: red;
}
.text_message_time {
    width: 100%;
    height: 15px;
    font-size: 10px;
    text-align: center;
}
.text_message_time-n {
    width: 100%;
    height: 15px;
    font-size: 10px;
    text-align: center;
    color: red;
}
#div_input_check_box{
    display: none;
    width: 260px;
    height: 210px;
    position: absolute;
    z-index: 2;
    top: 30vh;
    left: 18%;
    background-image: url(/static/img/J0024.webp);
    border-radius: 90px;
    padding: 10px 10px 0px 10px;
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#room_div_input_check_box{
    display: none;
    width: 260px;
    height: 210px;
    position: absolute;
    z-index: 2;
    top: 30vh;
    left: 18%;
    background-image: url(/static/img/delete_icon.webp);
    border-radius: 90px;
    padding: 10px 10px 0px 10px;
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title_input_check_box{
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.txt_input_check_box{
    font-size: 12px;
    text-align: center;
}
.txt2_input_check_box{
    font-size: 12px;
    text-align: center;
    margin-left: 10px;

}
.dv_delete_cancel{
    display: flex;
}
.left_cancel_btn{
    color: blue;
}
.right_Delete_btn{
    color: red;

}
.flex_checkbox_txt{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0px 0px 0px;
}
.is-invalid{
    background-color: red;
}
.invalid-feedback{
    display: flex;
    width: 100%;
    color: #eeff00;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.error_img{
    width: 30px;
}
.inpt_phone_number_pls_cntr_cd{
    display: flex;
    width: 100%;
    height: 46px;
    background-color: white;
    border-radius: 19px;
}
.cd_country{
    display: flex;
    width: 100%;
    height: 46px;
    justify-content: center;
    align-items: center;
}
.cd_country_inpt{
    width: 46px;
    height: 24px;
    border: 0px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    border-right: red solid 2px;
}
.phn_nmbr{
    display: flex;
    width: 100%;
}
.phn_nmbr_inpt{
    border: 0px;
    width: 100%;
    font-size: 17px;
    font-weight: 600;
    padding-left: 10px;
}
.pls{
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    width: 36px;
}
.img_flag{
    width: 20px;
    height: 15px;
}
.options_cntr{
    text-align: center;
}
.home_page_else{
    width: 100%;
    padding: 30px;
    text-align: center;
    font-size: 24px;
    color: aliceblue;
}
.notifications_page{
    width: 100%;
    height: 100vh;
    background: url(./img/nav.webp);
    background-size: cover;
}
.nf_flex{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    flex-direction: column;
}
.notifications_ttl{
    color: white;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}
.stng_td {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
    color: white;
}
.icon_stng{
    width: 38px;
}
.strng_td_txt{
    text-align: center;
    color: white;
    font-size: 20px;
}
.motorcycle_btn_rotate{
    rotate: -48deg;
}
.bicycle_btn_rotate{
    rotate: 48deg;
}
.motorcycle_parts_btn_rotate{
    rotate: 48deg;
}
.bicycle_parts_btn_rotate{
    rotate: -48deg;
}
.parts_btn_rotate{
    width: 208px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top_m_right_store{
    display: flex;
    justify-content: space-around;
    height: 180px;
}
.btn_mtrccl_store{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 228px;
    width: 131px;
}
.middle_profile_rider_store{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 34.5%;
    left: 29.5%;
}
.middle_profile_rider_store_parts{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 32.5%;
    left: 29.5%;
}
.go_send_message_dv{
    width: 60px;
}
.go_send_message_file{
    width: 64px;
    padding: 6px;
}
.go_send_message{
    display: block;
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    border: 0;
}
.go_send_message:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 7px;
}
.go_send_message:after {
    border: 4px solid #96daf0;
    transform: scale(1.3);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.go_send_message:hover:before,
.go_send_message:focus:before {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.go_send_message:hover:after,
.go_send_message:focus:after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}  
.go_send_message-box {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}
.go_send_message-elem {
    display: block;
    width: 20px;
    height: 24px;
    margin: 15px 0px 0px 6px;
    transform: rotate(270deg);
    fill: #f0eeef;
}
.go_send_message:hover .button-box,
.go_send_message:focus .button-box {
    transition: 0.4s;
    transform: translateX(-56px);
}
.go_send_img_vid_dv{
    width: 86px;
}
.go_send_img_vid_file{
    width: 64px;
    padding: 6px;
}
.go_send_img_vid{
    display: block;
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    border: 0;
}  
.go_send_img_vid:before,
.go_send_img_vid:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 7px;
}
.go_send_img_vid:before {
    border: 4px solid #f0eeef;
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}
.go_send_img_vid:after {
    border: 4px solid #96daf0;
    transform: scale(1.3);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}  
.go_send_img_vid:hover:before,
.go_send_img_vid:focus:before {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}  
.go_send_img_vid:hover:after,
.go_send_img_vid:focus:after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}  
.go_send_img_vid-box {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}  
.go_send_img_vid-elem {
    display: block;
    width: 20px;
    height: 20px;
    margin: 16px 0px 0 16px;
    transform: rotate(270deg);
    fill: #f0eeef;
}
.go_send_img_vid:hover .button-box,
.go_send_img_vid:focus .button-box {
    transition: 0.4s;
    transform: translateX(-56px);
}
.div_menu_store{
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 90vh;
    background-size: cover;
    border-bottom-left-radius: 19.5px;
    z-index: 11;
    transition: right 1s;
}
.view_menu_store {
    position: absolute;
    width: 356px;
    height: 356px;
    background: url(/static/img/nav.webp);
    background-size: cover;
    border-bottom-left-radius: 19.5px;
    z-index: 4;
    transition: right 1s;
    border-radius: 50%;
    padding: 6px 0px 6px 0px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#menu_store_parts {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 90vh;
    z-index:11;
    transition: right 1s;
}
.mn_str_parts{
    width: 316px;
    height: 311px;
    background: url(/static/img/nav.webp);
    background-size: cover;
    border-bottom-left-radius: 19.5px;
    border-radius: 50%;
    padding: 12px 0px 12px 0px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#inp-file {
    display: none;
    position: absolute;
    z-index: 2;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#inp-file-room {
    display: none;
    position: absolute;
    z-index: 2;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#input_file_img_vid{
    display: flex;
    width: 306px;
    height: 306px;
    background-image: url(./img/J0024.webp);
    background-size: cover;
    border-radius: 50%;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    color: white;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#room_input_file_img_vid{
    display: flex;
    width: 255px;
    height: 246px;
    background-image: url(./img/J0024.webp);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    color: white;
    border: 0.5px solid blue;
}
.icon_input_file{
    width: 40px;
    margin-right: 12px;
}
.input_img_video{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input_file{
    display: flex;
    justify-content: center;
    align-items: center;
}
#inpt_img_vid{
    display: none;
}
#room_inpt_img_vid{
    display: none;
}
#inpt_file{
    display: none;
}
#room_inpt_file{
    display: none;
}
#element_send_div_img_vid{
    display: none;
    position: absolute;
    z-index: 4;
    top: 0px;
    height: 100vh;
    color: white;
    background-image: url(./img/J0024.webp);
    background-size: cover;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
#sendRoom_img_vid{
    display: none;
    position: absolute;
    z-index: 4;
    height: 100vh;
    top: 0px;
    color: white;
    background-image: url(./img/J0024.webp);
    background-size: cover;
    width: 100%;    
}
#element_send_div_file{
    display: none;
    position: absolute;
    z-index: 3;
    top: 33vh;
    left: 1px;
    color: white;
    background: #343f4f;
    width: 100%;
}
.element_header{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.icon_return{
    width: 30px;
}
.title_send_element{
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
#previewContainerImgVid{
    border-radius: 20px;
    display: flex;
    justify-content: center;
}
#roomPreviewContainerImgVid{
    border-radius: 20px;
    display: flex;
    justify-content: center;
}
.element_middle{
    height: 80%;
    padding: 0px 10px;
}
#show_the_element{
    width: 100%;
    border-radius: 20px;
}
.element_footer{
    display: flex;
    width: 100%;
    height: 10%;
    align-items: center;
}
.img_msg_txt{
    padding: 0px 6px 0px 6px;
    text-align: center;
}
.previewContainerFile{
    display: flex;

}
.download_message_file{
    display: flex;
    justify-content: space-between;
    padding: 12px;
}
.dwnld_icm_img{
    width: 40px;
}
.dwnld_txt_file{
    display: flex;
    justify-content: center;
    align-items: center;
}
.dwnload_msg_file{
    width: 36px;
}
.uiverse {
    --duration: 7s;
    --easing: linear;
    --c-color-1: rgba(255, 163, 26, .7);
    --c-color-2: #1a23ff;
    --c-color-3: #e21bda;
    --c-color-4: rgba(255, 232, 26, .7);
    --c-shadow: rgba(255, 223, 87, .5);
    --c-shadow-inset-top: rgba(255, 223, 52, .9);
    --c-shadow-inset-bottom: rgba(255, 250, 215, .8);
    --c-radial-inner: #ffd215;
    --c-radial-outer: #fff172;
    --c-color: #fff;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    position: relative;
    cursor: pointer;
    border: none;
    display: table;
    border-radius: 24px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--c-color);
    background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
    box-shadow: 0 0 14px var(--c-shadow);
}
.uiverse:before {
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}
.uiverse .wrapper {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    border-radius: 24px;
    min-width: 132px;
    padding: 12px 0;
}
.uiverse .wrapper span {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.uiverse .wrapper .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
}
.uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
}
.uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
}
.uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
}
.uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
}
.uiverse .wrapper .circle.circle-1 {
    --x: 0;
    --y: -40px;
    --animation: circle-1;
}
.uiverse .wrapper .circle.circle-2 {
    --x: 92px;
    --y: 8px;
    --animation: circle-2;
}
.uiverse .wrapper .circle.circle-3 {
    --x: -12px;
    --y: -12px;
    --animation: circle-3;
}
.uiverse .wrapper .circle.circle-4 {
    --x: 80px;
    --y: -12px;
    --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
    --x: 12px;
    --y: -4px;
    --animation: circle-5;
}
.uiverse .wrapper .circle.circle-6 {
    --x: 56px;
    --y: 16px;
    --animation: circle-6;
}
.uiverse .wrapper .circle.circle-7 {
    --x: 8px;
    --y: 28px;
    --animation: circle-7;
}
.uiverse .wrapper .circle.circle-8 {
    --x: 28px;
    --y: -4px;
    --animation: circle-8;
}
.uiverse .wrapper .circle.circle-9 {
    --x: 20px;
    --y: -12px;
    --animation: circle-9;
}
.uiverse .wrapper .circle.circle-10 {
    --x: 64px;
    --y: 16px;
    --animation: circle-10;
}
.uiverse .wrapper .circle.circle-11 {
    --x: 4px;
    --y: 4px;
    --animation: circle-11;
}
.uiverse .wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
    --y: 4px;
    --animation: circle-12;
}
@keyframes circle-1 {
    33% {
        transform: translate(0px, 16px) translateZ(0);
    }
    66% {
        transform: translate(12px, 64px) translateZ(0);
    }
}
@keyframes circle-2 {
    33% {
        transform: translate(80px, -10px) translateZ(0);
    }
    66% {
        transform: translate(72px, -48px) translateZ(0);
    }
}
@keyframes circle-3 {
    33% {
        transform: translate(20px, 12px) translateZ(0);
    }
    66% {
        transform: translate(12px, 4px) translateZ(0);
    }
}
@keyframes circle-4 {
    33% {
        transform: translate(76px, -12px) translateZ(0);
    }
    66% {
        transform: translate(112px, -8px) translateZ(0);
    }
}
@keyframes circle-5 {
    33% {
        transform: translate(84px, 28px) translateZ(0);
    }
    66% {
        transform: translate(40px, -32px) translateZ(0);
    }
}
@keyframes circle-6 {
    33% {
        transform: translate(28px, -16px) translateZ(0);
    }
    66% {
        transform: translate(76px, -56px) translateZ(0);
    }
}
@keyframes circle-7 {
    33% {
        transform: translate(8px, 28px) translateZ(0);
    }
    66% {
        transform: translate(20px, -60px) translateZ(0);
    }
}
@keyframes circle-8 {
    33% {
        transform: translate(32px, -4px) translateZ(0);
    }
    66% {
        transform: translate(56px, -20px) translateZ(0);
    }
}
@keyframes circle-9 {
    33% {
        transform: translate(20px, -12px) translateZ(0);
    }
    66% {
        transform: translate(80px, -8px) translateZ(0);
    }
}
@keyframes circle-10 {
    33% {
        transform: translate(68px, 20px) translateZ(0);
    }
    66% {
        transform: translate(100px, 28px) translateZ(0);
    }
}
@keyframes circle-11 {
    33% {
        transform: translate(4px, 4px) translateZ(0);
    }
    66% {
        transform: translate(68px, 20px) translateZ(0);
    }
}
@keyframes circle-12 {
    33% {
        transform: translate(56px, 0px) translateZ(0);
    }
    66% {
        transform: translate(60px, -32px) translateZ(0);
    }
}
#file_input_text{
    padding: 10px;
    border-radius: 20px;
    height: 248px;
    text-align: center;
    width: 100%;
}
.rd_profile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    outline: 2px solid #5738ff;
}
.rd_profile-op {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: 2px solid #5738ff;
}
.rd_profile_stars{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.more{
}
.pst_short_rider {
    display: flex;
    justify-content: center;
} 
.content_text_footer{
    display:flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 86px;
}
#btn_crop{
    width: 70%;
    height: 70%;
    border: 0px;
    background: red;
    border-radius: 17px;
}
#input_image_cropped{
    display: none;
}
#file_input_image{
    display: none;
}
#file_input_place_image{
    display: none;
}
.image_size{
    border-radius: 24px;
    width: 90%;
}
.share_icon{
    height: 28px;
}
.Number_support{
    display: flex;
    justify-content: center;
    color: white;
}
.Number_support_stars{
    display: flex;
    justify-content: center;
    height: 18px;
    position: absolute;
    z-index: 1;
    width: 100%;
    color: whitesmoke;
    bottom: 20%;
}
.dv_choose{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.choose_user{
    width: 200px;
    height: 70px;
    position: relative;
    outline: none;
    transition: 0.1s;
    background-color: transparent;
    border: none;
    font-size: 13px;
    font-weight: bold;
    color: #ddebf0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.choose_user:hover #rightArrow {
    background-color: #27c39f;
    left: -15%;
    animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}
.choose_user:hover #leftArrow {
    background-color: #27c39f;
    left: 103%;
    animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}
.choose_user:hover #leftTop {
    animation: 0.1s ease-in-out 0.05s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
.choose_user:hover #rightTop {
    animation: 0.1s ease-in-out 0.15s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
.choose_user:hover #rightBottom {
    animation: 0.1s ease-in-out 0.25s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
.choose_user:hover #leftBottom {
    animation: 0.1s ease-in-out 0.35s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}
.choose_user:hover .corner {
    transform: scale(1.25) rotate(45deg);
}
.choose_user:hover #clip {
    animation: 0.2s ease-in-out 0.55s both greenLight8;
    --color: #27c39f;
}
.img_name_rider_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.dv_final_ms{
    text-align: center;
    font-size: 12px;
    margin-left: 6px;
}
.img_nickname_dv{
    display: flex;
    justify-content: center;
    align-items: center;
}
.dv__time_at_read{
    font-size: 10px;
}
.dv__time{
    color: #00ff0a;
    font-size: 10px;
    margin-left: 10px;
}
#element_show_video{
    display: none;
    background-color: black;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 6;
}
.image_message{
    border-radius: 19.5px;
}
#add_tour{
    width: 60px;
    filter: invert(1);
}
.div_add_tour{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 235px;
}
.add_tour_city {
    display: none;
    position: fixed;
    z-index: 1;
    width: 306px;
    height: 362px;
    background-image: url(./img/dwn.webp);
    background-size: cover;
    border-radius: 30px;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.add_tour_city_title{
    color: white;
    text-align: center;
    margin-bottom: 10px;
}
.div_tour_title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.div_tour_btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.tour_title{
    text-align: center;
    padding: 4px;
    border-radius: 20px;
    width: 100%;
}
#tour_form{
    width: 100%;
    height: 92vh;
    
}
.out_div_tour_join {
    width: 97%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 90px;
    padding: 10px;
    color: white;
}
.out_div_tour_join_system{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 0px;
    padding: 10px;
    color: white;
}
.div_tour_join {
    padding: 10px;
    width: 88%;
    height: 100%;
    background-image: url(./img/team_back.webp);
    background-size: cover;
    border-radius: 17px;
}
.tour_join_title{
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}
.tour_join_place_image{
    width: 100%;
    height: 136px;
    border-radius: 20px;
}
.tour_join_place_name {
    text-align: center;
    margin-bottom: 5px;

}
.out_tour_join_btn_join {
    display: flex;
    align-items: center;
    justify-content: center;
}
#btn_join_tour{
    height: 30px;
    font-size: 16px;
    background: linear-gradient(160deg, #ff3c38, #ff6b6b, #f06595, #845ef7, #339af0, #20c997, #51cf66, #fcc419);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
}
.out_tour_join_team_list{
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 4;
    top: 0px;
    height: 92vh;
    width: 100%;
    color: white;
    
}
.tour_join_team_list{
    background: url(./img/team_back.webp);
    height: 558px;
    width: 90%;
    border-radius: 20px;
    padding: 10px;
}
.tour_join_list_profile_rider {
    width: 46px;
    border-radius: 50%;
    margin-right: 10px;
}
.tour_join_list_rider_name {
    font-size: 26px;
}
.rider_tour_join_list {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    align-items: flex-end;
}
.tour_join_team_list_title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}
.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    height: 100%;
    width: 162px;
    border-radius: 50%;
}
.integer-support{
    position: absolute;
    bottom: 2px;
    color: white;
    text-align: center;
    left: 206px;
}
.forget_pss{
    padding-top: 20px;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
.main_upgrade{
    height:100vh;
    background: linear-gradient(rgb(66, 151, 236), rgb(69, 119, 216), rgb(66, 87, 196), rgb(59, 54, 176), rgb(48, 12, 156));
}
.cards_premium{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    padding: 30px;
    height: 90vh;
}
.cards_premium_for_client{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    height: 650px;
    padding: 30px;
}
.card_premium{
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    width: 14rem;
    background-color: rgb(122, 48, 143);
    background-image: radial-gradient(
        circle at 0% 0%,
        rgb(37, 7, 44) 15%,
        rgba(0, 0, 0, 0) 75%
    ),
    radial-gradient(
        circle at 100% 100%,
        rgb(25, 2, 31, 0.9) 15%,
        rgba(0, 0, 0, 0) 150%
    ),
    linear-gradient(
        135deg,
        rgba(24, 8, 28, 0) 0%,
        rgb(122, 48, 143) 50%,
        rgba(24, 8, 28, 0) 100%
    );
    border-radius: 0.5rem;
}

.card_premium::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background-color: rgb(122, 48, 143);
    background-image: linear-gradient(
        0deg,
        rgba(118, 42, 180, 1) 0%,
        rgb(199, 95, 228) 75%
    );
    border-radius: 9999px;
    box-shadow: 0 1px 5px 3px rgb(199, 95, 228), 0 0 30px 5px rgb(199, 95, 228);
}

.card_premium .title_premium {
    font-size: 1rem;
    color: white;
    font-weight: 600;
}

.card_premium .pricing {
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
}

.card_premium .pricing .pricing-time,
.card_premium .sub-title_premium {
    font-size: 0.75rem;
    color: rgb(184, 132, 199);
    font-weight: 500;
}

.card_premium .list_premium {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
    list-style: none;
}

.card_premium .list_premium .list_premium-item .check {
    margin-right: 0.25rem;
    font-size: 1rem;
    color: rgb(199, 95, 228);
    font-weight: 900;
}

.card_premium .button_premium {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    height: fit-content;
    background-color: rgb(122, 48, 143);
    font-size: 0.75rem;
    color: white;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);
    transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.card_premium .button_premium .text-button_premium {
    position: relative;
    z-index: 10;
}

.card_premium .button_premium::before,
.card_premium .button_premium::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
}
.card_premium .button_premium::before {
    left: 0;
    background-image: radial-gradient(
        circle at 0% 45%,
        rgba(16, 5, 36, 1) 19%,
        rgba(16, 5, 36, 0.26) 46%,
        rgba(16, 5, 36, 0) 100%
    );
}
.card_premium .button_premium::after {
    right: 0;
    background-image: radial-gradient(
        circle at 100% 45%,
        rgba(16, 5, 36, 1) 19%,
        rgba(16, 5, 36, 0.26) 46%,
        rgba(16, 5, 36, 0) 100%
    );
}
.card_premium .button_premium:hover {
    box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);
}
.card_premium .button_premium:hover::before,
.card_premium .button_premium:hover::after {
    width: 0;
    opacity: 0;
}
.modal {
    width: 340px;
    height: 384px;
    background: #FFFFFF;
    box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 26px;
    max-width: 450px;
    padding: 20px;
}  
.modalPayForClient {
    width: 340px;
    background: #FFFFFF;
    box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 26px;
    padding: 6px;
}
.payment--options {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
} 
.payment--options button {
    height: 55px;
    width: 114px;
    background: #F2F2F2;
    border-radius: 11px;
    padding: 0;
    border: 0;
    outline: none;
}
.payment--options button svg {
    height: 18px;
}
.payment--options button:last-child svg {
    height: 22px;
}
.separator {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
    color: #8B8E98;
    margin-bottom: 10px;
}
.separator > p {
    word-break: keep-all;
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    margin: auto;
}
.separator .line {
    display: inline-block;
    width: 100%;
    height: 1px;
    border: 0;
    background-color: #e8e8e8;
    margin: auto;
} 
.credit-card-info--form {
    display: flex;
    flex-direction: column;
} 
.input_container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
} 
.split {
    display: grid;
    grid-template-columns: 4fr 2fr;
    gap: 15px;
}  
.split input {
    width: 100%;
}
.input_label {
    font-size: 10px;
    color: #8B8E98;
    font-weight: 600;
    text-align: center;
}
.input_field {
    
    height: 40px;
    padding: 0 0 0 16px;
    border-radius: 9px;
    outline: none;
    background-color: #F2F2F2;
    border: 1px solid #e5e5e500;
    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}
.input_field:focus {
    border: 1px solid transparent;
    background-color: transparent;
}  
.purchase--btn {
    height: 55px;
    background: #F2F2F2;
    border-radius: 11px;
    border: 0;
    outline: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(180deg, #5f58bb 0%, #5755ff 50%, #002eaf 100%);
    box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000;
    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
} 
.purchase--btn:hover {
    box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0000003a;
} 

.input_field::-webkit-outer-spin-button,
.input_field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}  
.input_field[type=number] {
    -moz-appearance: textfield;
}
.div-purchase--btn{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
}
.message_no_orders{
    display: flex;
    justify-content: center;
    font-size: 27px;
}
.description {
    width: 100%;
    height: 140px;
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 10px;
}
.title_upload_img_product {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
}
.product_images {

}
.upload_product_image {
    background-color: #fff;
    border: 1px solid rgb(159, 159, 160);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    font-size: 1.125rem;
    margin-bottom: 20px;
}
.form-title_product_image {
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
}
.form-paragraph {
    margin-top: 10px;
    font-size: 0.9375rem;
    color: rgb(105, 105, 105);
}
.drop-container {
    background-color: #fff;
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    border: 2px dashed rgb(171, 202, 255);
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
}
.drop-container:hover {
    background: rgba(0, 140, 255, 0.164);
    border-color: rgba(17, 17, 17, 0.616);
}
.drop-container:hover .drop-title {
    color: #222;
}
.drop-title_product_image {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
}
.file-input_product_image {
    width: 350px;
    max-width: 100%;
    color: #444;
    padding: 2px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(8, 8, 8, 0.288);
}
.file-input_product_image::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #084cdf;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}
.file-input_product_image::file-selector-button:hover {
    background: #0d45a5;
}
.file-input_product_video {
    width: 350px;
    max-width: 100%;
    color: #444;
    padding: 2px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(8, 8, 8, 0.288);
}
.file-input_product_video::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #df0808;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}
.file-input_product_video::file-selector-button:hover {
    background: #0d45a5;
}
.btn_post_product {
    cursor: pointer;
    font-size: 1.4rem;
    border-radius: 16px;
    border: none;   
    padding: 2px;
    background: radial-gradient(circle 80px at 80% -10%, #ffffff, #181b1b);
    position: relative;
    height: 64px;
}
.btn_post_product::after {
    content: "";
    position: absolute;
    width: 65%;
    height: 60%;
    border-radius: 120px;
    top: 0;
    right: 0;
    box-shadow: 0 0 20px #ffffff38;
    z-index: -1;
}
.blob1 {
    position: absolute;
    width: 70px;
    height: 100%;
    border-radius: 16px;
    bottom: 0;
    left: 0;
    background: radial-gradient(
        circle 60px at 0% 100%,
        #3fe9ff,
        #0000ff80,
        transparent
    );
    box-shadow: -10px 10px 30px #0051ff2d;
}
.inner {
    padding: 14px 25px;
    border-radius: 14px;
    color: #fff;
    z-index: 3;
    position: relative;
    background: radial-gradient(circle 80px at 80% -50%, #777777, #0f1111);
}
.inner::before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 14px;
    background: radial-gradient(
        circle 60px at 0% 100%,
        #00e1ff1a,
        #0000ff11,
        transparent
    );
    position: absolute;
}
.modal_fade{
    display: none;
    position: absolute;
    z-index: 3;
    background: black;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.modal-body{
    color: white;
    text-align: center;
}
.crd_small_info {
    padding: 0px 10px 10px 10px;
}
.delect_btn_product{
    background: red;
    border-radius: 20px;
}
.modal-footer{
    display: flex;
}
.modal-title{
    text-align: center;
    color: white;
}
.modal-header {
    display: flex;
    justify-content: center;
}
.radio {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-direction: row-reverse;
}
.radio > input {
    position: absolute;
    appearance: none;
}
.radio > label {
    cursor: pointer;
    font-size: 24px;
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease;
}
.radio > label > svg {
    fill: #666;
    transition: fill 0.3s ease;
}
.radio > label::before,
.radio > label::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ff9e0b;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
    animation: particle-explosion 1s ease-out;
}
.radio > label::before {
    top: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0);
}
.radio > label::after {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0);
}
.radio > label:hover::before,
.radio > label:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1.5);
}
.radio > label:hover {
    transform: scale(1.2);
    animation: pulse 0.6s infinite alternate;
}
.radio > label:hover > svg,
.radio > label:hover ~ label > svg {
    fill: #ff9e0b;
    filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));
    animation: shimmer 1s ease infinite alternate;
}
.radio > input:checked + label > svg,
.radio > input:checked + label ~ label > svg {
    fill: #ff9e0b;
    filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));
    animation: pulse 0.8s infinite alternate;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}
@keyframes particle-explosion {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}
@keyframes shimmer {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 158, 11, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(255, 158, 11, 1));
    }
}
.radio > input:checked + label:hover > svg,
.radio > input:checked + label:hover ~ label > svg {
    fill: #e58e09;
}
.radio > label:hover > svg,
.radio > label:hover ~ label > svg {
    fill: #ff9e0b;
}
.radio input:checked ~ label svg {
    fill: #ffa723;
}
.icon_next {
    fill: white;
    width: 1em;
    aspect-ratio: 1;
    top: 0;
    left: 0;
    margin: auto;
    transform: translate(-35%, 10%);
}
.icon_back {
    fill: white;
    width: 1em;
    aspect-ratio: 1;
    top: 0;
    left: 0;
    margin: auto;
    transform: translate(-35%, 10%);
    transform: scaleX(-1);
}
.cart-button {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    width: 100%;
    background-image: var(--bg-linear);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--light);
    text-wrap: nowrap;
    border: 2px solid hsla(262, 83%, 58%, 0.5);
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0.25rem 1px var(--light);
}
.cart-button .cart-icon {
    width: 1rem;
}
.btn_chat_now {
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: #40B3A2;
    min-width: 200px;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    padding: 16px 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    overflow: hidden;
    cursor: pointer;
}
.btn_chat_now:hover {
    opacity: .95;
}
.btn_chat_now .animation {
    border-radius: 100%;
    animation: ripple 0.6s linear infinite;
}
@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
    }
}
.payNow {
    width: 130px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(15, 15, 15);
    border: none;
    color: white;
    font-weight: 600;
    gap: 8px;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103);
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
}
.svgIcon {
    width: 16px;
}
.svgIcon path {
    fill: white;
}
.payNow::before {
    content: "";
    width: 130px;
    height: 130px;
    position: absolute;
    background-color: white;
    border-radius: 50%;
    left: -100%;
    top: 0;
    transition-duration: .3s;
    mix-blend-mode: difference;
}
.payNow:hover::before {
    transition-duration: .3s;
    transform: translate(100%,-50%);
    border-radius: 0;
}
.payNow:active {
    transform: translate(5px,5px);
    transition-duration: .3s;
}
.product_video_dv{
    border-radius: 20px;
}
.img_product_request{
    border-radius: 20px;
}
.btnClientPay{
    background: none;
    border: none;
    color: white;
    font-size: 18px;
}
.client_div {
    display: flex;
    justify-content: center;
    color: black;
    align-items: center;
}
.client_div_in {
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
    padding: 15px 16px 10px;
}
.e-card {
    background: transparent;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
    position: relative;
    width: 240px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
}
.wave {
    position: absolute;
    width: 540px;
    height: 700px;
    opacity: 0.6;
    left: 0;
    top: 0;
    margin-left: -50%;
    margin-top: -70%;
    background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);
}
.icon {
    width: 3em;
    margin-top: -1em;
    padding-bottom: 1em;
}
.infotop {
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 5.6em;
    left: 0;
    right: 0;
    color: rgb(255, 255, 255);
    font-weight: 600;
}
.name {
    font-size: 14px;
    font-weight: 100;
    position: relative;
    top: 1em;
    text-transform: lowercase;
}
.wave:nth-child(2),
.wave:nth-child(3) {
    top: 210px;
}

.playing .wave {
    border-radius: 40%;
    animation: wave 3000ms infinite linear;
}
.wave {
    border-radius: 40%;
    animation: wave 55s infinite linear;
}
.playing .wave:nth-child(2) {
    animation-duration: 4000ms;
}
.wave:nth-child(2) {
    animation-duration: 50s;
}
.playing .wave:nth-child(3) {
    animation-duration: 5000ms;
}
.wave:nth-child(3) {
    animation-duration: 45s;
}
@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.type_shooping{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.message_No_store_yet {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18vh;
    text-align: center;
    font-size: 25px;
    
}
.img_rx_soon{
    width: 100%;
    padding: 10px;
}
.search_product{
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 12px 0px 12px 0px;
}
.no-result{
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 32px;
}
.format-vid-short {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    align-items: center;
}
.shrt-act-btn-network {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}
.shrt-act-btn-opinion {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.shrt-act-btn-star {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    z-index: 1;
}
.comment-icon {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 1px;
    left: 100px;
}
.comment-iconn {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 354px;
}
.ava_current_user,
.ava_current_user_active {
    position: relative;
    width: 124px;
    height: 98px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avatar ,
.avatar-box,
.avatarMenu {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avatar-friend-account_is ,
.avatar-friend-account {
    position: relative;
    width: 124px;
    height: 124px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-bx-st {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avatar-box-ofline, .avatar-box-ofline-n {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avatar-ofline {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-bx-pr-fr {
    position: absolute;
    right: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-pr-fr {
    position: absolute;
    right: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-bx-pr-fr-of {
    position: absolute;
    right: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-pr-fr-of {
    position: absolute;
    right: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-pr-self {
    position: absolute;
    left: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-bx-pr-self {
    position: absolute;
    left: 0;
    z-index: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avt-bx-pr-list {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
}
.avatar-box::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.ava_current_user_active::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avatar-friend-account_is::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avt-bx-st::before {
    content: "";
    position: absolute;
    inset: -10px 21px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avatar-box-ofline::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avt-bx-pr-fr::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avt-bx-pr-fr-of::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avt-bx-pr-self::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avt-bx-pr-list::before {
    content: "";
    position: absolute;
    inset: -10px 26px;
    background: linear-gradient(315deg, #fff89a, #d3dedc);
    transition: 0.5s;
    animation: animate 4s linear infinite;
}
.avatar:hover::before {
    inset: -20px 0;
}
.avatar-box:hover::before {
    inset: -20px 0;
}
.avt-bx-st:hover::before {
    inset: -20px 0;
}
.avt-bx-pr-fr:hover::before {
    inset: -20px 0;
}
.avt-bx-pr-fr-of:hover::before {
    inset: -20px 0;
}
.avt-bx-pr-self:hover::before {
    inset: -20px 0;
}
.avt-bx-pr-list:hover::before {
    inset: -20px 0;
}
.avatar-box-ofline:hover::before {
    inset: -20px 0;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    0% {
        transform: rotate(360deg);
    }
}
.avatar::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avatar-box::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avt-bx-st::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avt-bx-pr-fr::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avt-bx-pr-fr-of::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avt-bx-pr-self::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avt-bx-pr-list::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avatar-box-ofline::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #444444;
    border-radius: 50%;
    z-index: 1;
}
.avatar-content {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 60px;
    height: 60px;
    outline: 3px solid #00adff;
}
.ava_current_user-content {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 88px;
    height: 86px;
    outline: 3px solid #00adff;
}
.avt-cntnt-st {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 40px;
    height: 40px;
    outline: 3px solid #00adff;
}
.avt-cntnt {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    height: 50px;
    outline: 3px solid #00adff;
}
.avt-cntnt-of {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    height: 50px;
    outline: 3px solid red;
}
.avt-cntnt-self {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    height: 50px;
    outline: 3px solid #00adff;
}
.avt-cntnt-list {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    height: 50px;
    outline: 3px solid #00adff;
}
.avatar-content-ofline {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 60px;
    height: 60px;
    outline: 3px solid #ff0000;
}
.avatar-content-friend-account {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 124px;
    height: 124px;
    outline: 3px solid #00adff;
}
.avatar-content-friend-account_unactive {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 124px;
    height: 124px;
    outline: 3px solid #ff0000;
}
.avatar-content-friend-account_is {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 124px;
    height: 124px;
    outline: 3px solid #00adff;
}
.avatar-content-friend-account_is_inactive {
    position: absolute;
    inset: 5px;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 124px;
    height: 124px;
    outline: 3px solid #ff0000;
}
.avatar-list {
    display: flex;
}
.avatar-list > .avatar:not(:first-child) {
    margin-left: 20px;
}
.avatar {
    box-sizing: border-box;
    position: relative;
    border-radius: 50%;
    padding: 3px;
    box-shadow: inset 0 0 0 2px #4D4F6E;
}
.avatar-large {
    width: 66px;
    height: 74px;
}
.avatar-x-large {
    width: 144px;
    width: 144px;
}
.avatar-image {
    width: 66px;
    height: 66px;
    vertical-align: middle;
    border-radius: 50%;
}
.avatar-frame {
    position: absolute;
    pointer-events: none;
}
.avatar-large .avatar-frame {
    top: 0%;
    left: 0%;
    width: 100%;
}
.avatar-x-large .avatar-frame {
    top: -12.5%;
    left: -12.5%;
    max-width: 125%;
}
.anim-spin {
    animation: spin 20s linear infinite;
}
.anim-hue {
    animation: hue 20s linear infinite;
}
@keyframes hue {
    100% {
        filter: hue-rotate(360deg);
    }
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
.dv-rd_profile {
    width: 68px;
    display: flex;
    justify-content: center;
}
.dv-class_img_profile_rider{
    display: flex;
    justify-content: center;
    width: 50px;
}
.rd-rn {
    position: absolute;
    top: 14px;
    color: #00adff;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.ftr-vid {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.sup-img-vid {
    width: 36px;
}
.str-img-vid {
    width: 36px;
}
.spt-tps {
    width: 126px;
}
.spt-str {
    width: 126px;
}
.nft-mess {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 70vh;
    font-size: 20px;
}
.ntf-list {
    width: 100%;
    display: flex;
    padding: 10px;
    flex-direction: column;
    padding-bottom: 50px;
    flex-wrap: nowrap;
    align-items: center;
}
.ntf-prf-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.ntf-prf-img-tp {
    width: 36px;
}
.nft-cntnt {
    display: flex;
    color: white;
    width: 600px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    padding-top: 0px;
}
.ntfTtleDiv {
    display: flex;
    background-image: url(./img/ntf_back.webp);
    background-size: cover;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 50px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 80px;
    justify-content: flex-end;
}
.Rnk-list-all {
    background-image: linear-gradient(to right bottom, #3a1766, #521e8b, #6c25b0, #882ad7, #a72eff);
    color: white;
}
#progressContainer {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 20%;
}
#progressBar {
    width: 0%;
    height: 20px;
    background-color: green;
}
#progressText {
    text-align: center;
    color: black;
}
#dv-progress {
    display: none;
}
#tx-country {
    display: none;
}
#tx-city {
    display: none;
}
.short {
    width: 100%;
    border-radius: 20px;
}
.star_user {
    width: 100%;
    border-radius: 24px;
}
.WL {
    font-size: 34px;
    display: flex;
    align-items: flex-end;
}
.city {
    width: 512px;
    text-align: center;
}
.video_image_rider_start {
    width: 100%;
}
.flx-inpt {
    display: flex;
    justify-content: center;
    width: 100%;
}
.bdg {
    width: 114px;
}
.front_style_stars{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.Hd_Cntnt_stars{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    width: 100%;
}
.Hd_Cntnt_TFH{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    width: 100%;
}
.fx-dv {
    display: flex;
    justify-content: center;
    align-items: center;
}
.options-card {
    width: 190px;
    height: 254px;
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    padding: 4px;
    margin-bottom: 20px;
}
.options-card:active {
    filter: brightness(0.5);
}
.options-card h2 {
    z-index: 1;
    color: white;
    font-size: 2em;
}
.options-card::before {
    content: '';
    position: absolute;
    width: 100px;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 130%;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
}
@keyframes rotBGimg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.options-card:hover:before {
    background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
    animation: rotBGimg 3.5s linear infinite;
} 
.flx-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 70px;
}
.icon-choose {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.hobby-choose {
    position: absolute;
}
.form-group {
    border: 0px;
}
.login-form {
    width: 376px;
}
.list_rider_room {
    display: none;
    position: absolute;
    z-index: 3;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh;   
}
.sp_list {
    display: none;
    position: absolute;
    z-index: 4;
    top: 0px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 92vh;   
}
.fr_list {
    display: none;
    position: absolute;
    z-index: 3;
    top: 0px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 92vh;   
}
.lst_rd_rm {
    background-image: url(./img/J0024.webp);
    background-size: cover;
    height: 70vh;
    width: 97%;
    border-radius: 20px;
    padding: 10px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.lst_rd_rm_account {
    background-image: url(./img/J0024.webp);
    background-size: cover;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    padding: 10px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.prf_users {
    display: flex;
    width: 100%;
    height: 60px;
    border-radius: 20px;
    color: white;
    margin-bottom: 10px;
    justify-content: space-evenly;
    align-items: center;
}
.prf_slt_users {
    display: flex;
    width: 100%;
    height: 60px;
    border-radius: 20px;
    color: white;
    margin-bottom: 10px;
    justify-content: center;
}
.usr_nm {
    display: flex;
    align-items: center;
    padding-left: 12px;
}
.room-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66%;
}
.Tltl-list {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 30px;
}
.add-team {
    position: fixed;
    width: 60px;
    bottom: 47px;
    right: 0px;
    z-index: 1;
}
.hdntag {
    display: none;
}
.change-tm-nm {
    display: none;
    position: absolute;
    z-index: 4;
    justify-content: center;
    width: 100%;
    height: 80vh;
    align-items: center;
}
.chng-tm-nm {
    width: 90%;
    background-image: url(./img/J0024.webp);
    background-size: cover;
    border-bottom-right-radius: 60px;
    border-bottom-left-radius: 60px;
    padding: 10px;
}
.btn-chnge-nm {
    display: flex;
    justify-content: center;
    align-items: center;
}
.inpt_chng_room-name {
    text-align: center;
    width: 50%;
    height: 46px;
    border-radius: 30px;
    border: 0px;
    color: #495057;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}
.submit-chng-team-name {
    width: 100px;
    border-radius: 20px;
    height: 36px;
}
.add-users {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 60px;
}
.close_Fr-btn{
    outline: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    height: 36px;
    border-radius: 0.5em;
    box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
    overflow: hidden;
    width: 200px;
}
.close_Fr-btn div {
    transform: translateY(0px);
    width: 100%;
}
.close_Fr-btn div {
    transition: 0.6s cubic-bezier(.16,1,.3,1);
}
.close_Fr-btn div span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0.75em 1.125em;
}
.close_Fr-btn div:nth-child(1) {
    background-color: #21dc62;
}
.close_Fr-btn div:nth-child(2) {
    background-color: #1e90ff;
}
.close_Fr-btn:hover {
    box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
}
.close_Fr-btn p {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}
.close_Fr-btn:active {
    transform: scale(0.95);
}
.send-jn-rm{
    outline: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: 108px;
    height: 36px;
    border-radius: 0.5em;
    box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
    overflow: hidden;
}
.send-jn-rm div {
    transform: translateY(0px);
    width: 100%;
}
.send-jn-rm,
.send-jn-rm div {
    transition: 0.6s cubic-bezier(.16,1,.3,1);
}
.send-jn-rm div span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0.75em 1.125em;
}
.send-jn-rm div:nth-child(1) {
    background-color: #21dc62;
}
.send-jn-rm div:nth-child(2) {
    background-color: #1e90ff;
}
.send-jn-rm:hover {
    box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
}
.send-jn-rm p {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}
.send-jn-rm:active {
    transform: scale(0.95);
}
.get-jn-rm{
    outline: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: 108px;
    height: 36px;
    border-radius: 0.5em;
    box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
    overflow: hidden;
}
.get-jn-rm div {
    transform: translateY(0px);
    width: 100%;
}
.get-jn-rm,
.get-jn-rm div {
    transition: 0.6s cubic-bezier(.16,1,.3,1);
}
.get-jn-rm div span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0.75em 1.125em;
}
.get-jn-rm div:nth-child(1) {
    background-color: #21dc62;
}
.get-jn-rm div:nth-child(2) {
    background-color: #21dc62;
}
.get-jn-rm:hover {
    box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
}
.get-jn-rm p {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}
.get-jn-rm:active {
    transform: scale(0.95);
}
.get-jn-rm-rf{
    outline: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    width: 108px;
    height: 36px;
    border-radius: 0.5em;
    box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
    overflow: hidden;
}
.get-jn-rm-rf div {
    transform: translateY(0px);
    width: 100%;
}
.get-jn-rm-rf,
.get-jn-rm-rf div {
    transition: 0.6s cubic-bezier(.16,1,.3,1);
}
.get-jn-rm-rf div span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0.75em 1.125em;
}
.get-jn-rm-rf div:nth-child(1) {
    background-color: #dc2121;
}
.get-jn-rm-rf div:nth-child(2) {
    background-color: #dc2121;
}
.get-jn-rm-rf:hover {
    box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
}
.get-jn-rm-rf p {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}
.get-jn-rm-rf:active {
    transform: scale(0.95);
}
.snd-join {
    background: none;
    border: none;
    color: white;
}
.hidden_inpt {
    display: none;
}
.display_button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.privacy_policy {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: url(./img/J0024.webp);
    background-size: cover;
}
.small-div {
    width: 50%;
    color: white;
    font-size: 17px;
    line-height: 1.5;
}
.loader-audio {
    display: flex;
    align-items: center;
    width: 44px;
    overflow: hidden;
}
.bar {
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: rgba(255, 255, 255, .5);
    border-radius: 10px;
    animation: scale-up4 1s linear infinite;
}
.bar:nth-child(2) {
    height: 35px;
    margin: 0 5px;
    animation-delay: .25s;
}
.bar:nth-child(3) {
    animation-delay: .5s;
}
@keyframes scale-up4 {
    20% {
        background-color: #ffff;
        transform: scaleY(1.5);
    }
    40% {
        transform: scaleY(1);
    }
}
/* The loader container */
.loader {
    display: none;
    width: 100%;
    height: 246px;
    perspective: 200px;
    position: fixed;
    bottom: 108px;
    z-index: 3;
}
  /* The dot */
.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
    border-radius: 100px;
    border: 40px outset #1e3f57;
    transform-origin: 50% 50%;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    background-color: transparent;
    animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
}
.dot:nth-child(2) {
    width: 140px;
    height: 140px;
    margin-top: -70px;
    margin-left: -70px;
    border-width: 30px;
    border-color: #447891;
    animation-name: dot2;
    animation-delay: 75ms;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}
.dot:nth-child(3) {
    width: 160px;
    height: 160px;
    margin-top: -80px;
    margin-left: -80px;
    border-width: 20px;
    border-color: #6bb2cd;
    animation-name: dot3;
    animation-delay: 150ms;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}
@keyframes dot1 {
    0% {
        border-color: #1e3f57;
        transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    }
    50% {
        border-color: #1e574f;
        transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
    }
    100% {
        border-color: #1e3f57;
        transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    }
}
@keyframes dot2 {
    0% {
        border-color: #447891;
        box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
        transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    }
    50% {
        border-color: #449180;
        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
        transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
    }
    100% {
        border-color: #447891;
        box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
        transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    }
}
@keyframes dot3 {
    0% {
        border-color: #6bb2cd;
        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
        transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    }
    50% {
        border-color: #6bcdb2;
        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
        transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
    }

    100% {
        border-color: #6bb2cd;
        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
        transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
    }
}
.point-img {
    height: 36px;
    width: 42px;
    border-radius: 20px;
}
.input-audio {
    display: none;
    width: 100%;
    height: 48px;
    background-image: url(./img/footer.webp) ;
    border-radius: 20px;
    position: fixed;
    bottom: 54px;
    z-index: 3;
    justify-content: space-between;
}
.spinner {
    --s: 9px;
    width: 56px;
    height: 56px;
    background: #e73535;
    border-radius: 20%;
    animation: spinner-ehcge9 1.5s infinite linear;
    clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s)));
}
@keyframes spinner-ehcge9 {
    100% {
        transform: rotate(1turn);
    }
}
.send-icon {
    margin-right: 5px;
    transition: transform 0.3s ease;
}

/* From Uiverse.io by vinodjangid07 */ 
.bin-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background-color: rgb(255, 95, 95);
    cursor: pointer;
    border: 3px solid rgb(255, 201, 201);
    transition-duration: 0.3s;
}
.bin-bottom {
    width: 15px;
}
.bin-top {
    width: 17px;
    transform-origin: right;
    transition-duration: 0.3s;
}
.bin-button:hover .bin-top {
    transform: rotate(45deg);
}
.bin-button:hover {
    background-color: rgb(255, 0, 0);
}
.bin-button:active {
    transform: scale(0.9);
}
.audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    background-image: linear-gradient(to right bottom, #3a1766, #521e8b, #6c25b0, #882ad7, #a72eff);
    color: white;
    padding: 8px;
    border-radius: 8px;
    width: 400px;
    border-radius: 19.5px;
}
.play-pause-btn, .mute-btn {
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
}
.play-audio {
    background-image: url(./img/play.webp);
    background-size: cover;
}
.pause-audio {
    background-image: url(./img/pause_1.webp);
    background-size: cover;
}

.seek-bar, .volume-bar {
    flex: 1;
    -webkit-appearance: none;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
.seek-bar::-webkit-slider-thumb, .volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #6200ea;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.front-div-call, .front-div-call-team {
    display: none;
    position: absolute;
    z-index: 10;
    background-image: url(./img/J0024.webp) ;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 20px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.front-div-call-accept, .front-div-call-accept-team {
    display: none;
    position: absolute;
    z-index: 10;
    background-image: url(./img/J0024.webp) ;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 20px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.display-call-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32vh;
}
.call-profile, .call-profile-team {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.call-username {
    color: white;
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
}
.call-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    margin-bottom: 14px;
}
.call-title {
    text-align: center;
    color: white;
    font-size: 18px;
}
.icon-style {
    width: 70px;
    border-radius: 50%;
    background-color: #00bfff;
    margin-bottom: 10px;
}
.icon-style-accept {
    width: 70px;
    border-radius: 50%;
    background-color: #00ff25;
    margin-bottom: 10px;
}
.icon-cancel {
    width: 47px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-bottom: 10px;
}
.endCall {
    width: 46px;
    border-radius: 50%;
    background-color: red;
}
.mute-audio-call {
    width: 47px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.mute-video-call {
    width: 47px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.change-call {
    display: flex;
    height: 344px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.change-call-accept {
    display: flex;
    height: 344px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.endCallTitle {
    color: white;
    text-align: center;
    font-size: 18px;
}
#localVideo {
    position: absolute;
    z-index: 2;
    bottom: 70px;
    right: 0px;
    width: 25vh;
    border-radius: 20px;
}
#remoteVideo {
    width: 100%;
    height: 100%;
}
.flexy-botton-call {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    position: absolute;
    z-index: 3;
    bottom: 0px;
}
.end-current-call, .end--call {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.video-outside {
    width: 100%;
    height: 100vh;
    background-color: black;
}
.video-title {
    width: 100%;
    padding: 10px;
    padding-bottom: 0px;
    color: white;
    font-weight: 700;
    font-size: 21px;
}
.video-content {
    border-radius: 20px;
    width: 100%;
}
.video-opinion {
    width: 100%;
    height: 36vh;
}
.video-support {
    width: 46px;
}
.other_points {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
    width: 30px;
}
.video-delete-show {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 70%;
    z-index: 1;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.video-btn-delete {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 60px;
    background-color: red;
    color: white;
    font-size: 30px;
    border-radius: 20px;
}
.ntf-username {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}
.ntf-content {
    font-size: 14px;
    margin-bottom: 10px;
}
.nft-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    position: absolute;
    z-index: 1;
}
.notification, .message, .team {
    font-weight: 700;
}
.notification::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    left: 23px;
    top: 2px;
}
.message::before, .team::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    right: 23px;
    top: 2px;
    animation: scaleLoop 2s ease-in-out infinite;
}
.icon-user,
.icon-baller,
.icon-rider,
.icon-skater {
    font-size: 16px;
    font-weight: 700;
}
.choose-user::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 0px;
    background-image: url(./img/body.webp);
    background-size: cover ;
    width: 60px;
    height: 60px;
}
.choose-baller::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 0px;
    background-image: url(./img/ball.webp);
    background-size: cover ;
    width: 60px;
    height: 60px;
}
.choose-rider::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 0px;
    background-image: url(./img/helmet.webp);
    background-size: cover ;
    width: 70px;
    height: 60px;
}
.choose-skater::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 0px;
    background-image: url(./img/skater.webp);
    background-size: cover ;
    width: 65px;
    height: 50px;
}
.choose-martial-arts::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 0px;
    background-image: url(./img/martial_arts.webp);
    background-size: cover ;
    width: 65px;
    height: 50px;
}
.pst_short_rider_stars {
    width: 100%;
    display: flex;
    align-items: center;
    height: 100vh;
}
.img_logo {
    width: 57px;
    animation: scaleLoop 2s ease-in-out infinite;
}
.img_logoo {
    width: 57px;
}
@keyframes scaleLoop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);   /* 20% smaller */
    }
    100% {
        transform: scale(1);
    }
}
.sup_new_frnds {
    text-align: center;
    font-weight: 500;
    color: white;
    margin-bottom: 30px;
}
.span-error-message {
    color: white;
}
.div_error_img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.label-pivacy {
    display: flex;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 800;
    flex-direction: column;
}
.link-text {
    color: blue;
}
.nav_icon {
    width: 30px;
}
.div-prv-acct {
    display: flex;
}
.dv-user-champions {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-bottom: 30px;
}
.small-title-champions {
    font-size: 10px;
}
.flex-title-ch {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.champions-btn-yes {
    width: 34px;
    height: 18px;
    background-color: green;
    border-radius: 20px;
    color: white;
}
.champions-btn-no {
    width: 34px;
    height: 18px;
    background-color: red;
    border-radius: 20px;
    color: white;
}
.flex-btn-ch {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding: 20px;
}
.flag_icon {
    width: 30px;
    border-radius: 10px;
}
.cur_user_img {
    width: 50px;
}
.alerts-danger {
    background-color: red;
}
.warning_message {
    font-size: 14px;
    text-align: center;
    height: 60px;
    color: white;
}
.icon-email {
    width: 36px;
}
.btn-email {
    display: none;
}
.message_current {
    position: absolute;
    top: 40vh;
    left: 0px;
    width: 100%;
    background-color: red;
    border-radius: 20px;
    padding: 20px;
    color: white;
    text-align: center;
}
.list-team-users {
    width: 100%;
    height: 90%;
}
.country_column {
    border: none;
}
.top_row_table{
    font-size: 14px;
    color: white;
    border: none;
}
.age_column{
    border: none;
    padding: 2px;
}
.badge_column {
    border: none;
    padding: 1px;
    width: 60px;
}
.category_column{
    border: none;
    padding: 2px;
}
.img-room-message {
    border-radius: 20px;
}
.vid-time {
    position: absolute;
    right: 0;
    bottom: 6px;
    z-index: 1;
    font-size: 13px;
    background: black;
    border-radius: 20px;
    opacity: 50%;
    padding: 0px 4px;
}
.vid-time-icon {
    width: 10px;
    height: 10px;
}
.videoInChatContainer {
    border-radius: 20px;
}
#previewContainerVideoChat {
    height: 90vh;
    display: flex;
    justify-content: center;
}
.element_header_show {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.top_tree {
    width: 100%;
    color: white;
    text-align: center;
    font-size: 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top_tree-title {
    width: 100%;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}
.top_tree-content-1 {
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right bottom, #ffd700, #f6c103, #ecac0a, #e09811, #d28516, #ca7e21, #c17728, #b8702e, #b3723a, #ad7445, #a77650, #a0785a);
    margin: 4px;
    border-radius: 34px;
    justify-content: space-around;
    width: 370px;
}
.top_tree-content-2 {
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right bottom, #ffffff, #e6e6e6, #cdcdcd, #b5b5b5, #9e9e9e, #9b9b9b, #979797, #949494, #a3a3a3, #b3b3b3, #c3c3c3, #d3d3d3);    margin: 4px;
    border-radius: 34px;
    justify-content: space-around;
    width: 370px;
}
.top_tree-content-3 {
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right bottom, #654321, #6f4622, #7a4a23, #854c25, #904f28, #9d5c2f, #ab6936, #b8763d, #c8914c, #d7ad5e, #e4c974, #f0e68c);    margin: 4px;
    border-radius: 34px;
    justify-content: space-around;
    width: 370px;
}
.view-post {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 4px;
    display: flex;
    align-items: center;
}
.view-icon_post {
    width: 22px;
}
.view-user {
    color: white;
}
.command_center {
    background-color: black;
    color: white;
    height: 100vh;
}
.command_center-title {
    width: 100%;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
}
.command_center-content {
    display: flex;
    justify-content: space-evenly;
    font-size: 18px;
    align-items: center;
    margin-bottom: 10px;
}
.comman_center-btn {
    width: 100%;
}
.starImgHome {
    width: 100%;
    position: absolute;
    z-index: 1;
}
.home_badge {
    width: 50px;
}
.top_user_home {
    display: flex;
    align-items: center;
}
.profile-inside-messages {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.profile_inside_messages-text {
    color: white;
    padding: 10px 46px;
    text-align: center;
}
.adsbygoogle {
    display: block;
}
#sizeOutput {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 22vh;
}
#uploadProgress {
    width: 100%;
    margin-top: 4px;
    height: 8px;
    display: none;
    position: absolute;
    bottom: 25vh;
}
#uploadBar {
    width: 0%;
    height: 100%;
    background: #2196f3;
    transition: width 0.3s ease;
    border-radius: 20px;
}
.filtTaxo {
    width: 100%;
    height: 64vh;
    display: none;
    justify-content: center;
    position: absolute;
    z-index: 5;
}
.search-output {
    background-image: linear-gradient(to right bottom, #3a1766, #521e8b, #6c25b0, #882ad7, #a72eff);
    color: white;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 90px;
    padding: 6px;
}
.search_bdg {
    width: 48px;
}
.dv-numberss {
    display: flex;
    justify-content: space-around;
}
.category_ranking {
    width: 100%;
    position: absolute;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
}
.go {
    font-size: 24px;
    font-weight: 900;
}
.ads-width-100 {
    z-index: 1;
}
#AMPB {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 11;
    width: 100%;
    height: 90vh;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.AMPB_options {
    width: 356px;
    height: 350px;
    background: url(/static/img/nav.webp) no-repeat center / cover;
    z-index: 6;
    transition: right 1s;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#mt_on_btn {
    position: absolute;
    bottom: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#sp_btn {
    position: absolute;
}
#ps_btn {
    position: absolute;
    right: 42px;
}
#title_AMPB {
    position: absolute;
    top: 76px;
    font-weight: 700;
    font-size: 40px;
}
#TF_btn {
    position: absolute;
    left: 42px;
    width: 60px;
}
.is_SocialImg {
    display: none;
}
.MBSP_options {
    position: fixed;
    top: 22px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 17px;
    z-index: 1;
}
.MBSP_op {
    color: white;
    font-weight: 700;
}
.redNewMsgPoint {
    position: absolute;
    z-index: 1;
    background-color: red;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    bottom: 0;
}
.weight_font {
    font-weight: 700;
}
.emptyDivTst {
    height: 28px;
}
.flexFooter {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    color: white;
    width: 100%;
}
.TitleDayMsg {
    width: 100%;
    text-align: center;
    color: white;
    font-weight: 600;
}
.DsplyMsgTm {
    display: flex;
    align-items: center;
    font-size: 12px;
}
.ChatMsg {
    margin-left: 4px;
}
.Bo {
    padding: 10px;
    padding-top: 0;
    text-align: center;
}
.cssbuttons-io-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2em;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    padding: .5em 1.5em;
    color: white;
    background: linear-gradient(0deg, rgb(0, 150, 60), rgb(100, 250, 150));
    border: none;
    outline: none;
    border-bottom: 3px solid rgb(0, 130, 40);
    box-shadow: 0 .5em .5em -.4em rgb(0, 0, 0, .5);
    letter-spacing: 0.08em;
    border-radius: 20em;
    cursor: pointer;
    transition: .5s;
}

.cssbuttons-io-button:hover {
    filter: brightness(1.2);
    color: rgb(0, 0, 0, .5);
}

.cssbuttons-io-button:active {
    transition: 0s;
    transform: rotate(-10deg);
}
.accountAdd24h {
    width: 70px;
    height: auto;
    animation: rotate360 4s linear infinite;
}
.tfhrotate {
    width: 40px;
    height: auto;
    animation: rotate360 4s linear infinite;
    position: absolute;
    z-index: 4;
    bottom: 20px;
}
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.top_account {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    display: flex;
}
.f_accountR {
    display: flex;
    width: 57%;
    justify-content: flex-end;
    align-items: center;
}
.f_accountL {
    display: flex;
    width: 43%;
    justify-content: flex-end;
    align-items: center;
}
.AMPB_title {
    color: white;
    text-align: center;
}
.tfhNickname {
    color: white;
    display: flex;
    flex-direction: column;
}
.tfhHtitle {
    color: white;
    text-align: center;
    top: -8px;
}
.intTFHViews {
    color: white;
    top: 14px;
}
.showTFHViews {
    display: flex;
    width: 30%;
    align-items: center;
    justify-content: center;
    top: -10px;
    height: 46px;
}
.div24h {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 37%;
    width: 100px;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.accountAddt24h {
    width: 60px;
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 21px;
}
.tfhicon {
    width: 40px;
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 31px;
}
.showHidTFHViews {
    display: flex;
    align-items: center;
    height: 100%;
}
.showUserListView {
    position: absolute;
    z-index: 2;
    height: 90vh;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}
.userListView {
    width: 90%;
    height: 70vh;
    border-radius: 20px;
    background-image: url(/static/img/dwn.webp);
    background-size: cover;
}
.listViewTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 100%;
    color: white;
}
.dsplUserInfo {
    height: 100%;
    display: flex;
    align-items: center;
}
.userPostTime {
    position: absolute;
    color: white;
    bottom: 0;
    overflow: hidden;
}
.progress-container {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    position: absolute;
    z-index: 1;
    top: 15px;
    width: 100%;
}
.progress-bar {
    flex-grow: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}
.fill {
    height: 100%;
    background: white;
    width: 0%;
    transition: width linear;
    transition-play-state: running;
}
#storyVideo {
    width: 100%; max-width: 600px; border-radius: 10px;
}
#video-wrapper {
    display: flex; justify-content: center;
}
.tap-zones {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 300px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
    top: 145px;
}
.zone {
    flex: 1;
    height: 100%;
    cursor: pointer;
}
.zone-left {
    /* Optional background for debugging */
    /* background: rgba(255, 0, 0, 0.1); */
}
.zone-right {
    /* background: rgba(0, 255, 0, 0.1); */
}
.TFHmenu {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 160px;
}
.whycity {
    color: white;
    padding: 18px;
    text-align: center;
}
.Show_ranking {
    padding: 10px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 10px;
    background: linear-gradient(160deg, #ff3c38, #ff6b6b, #f06595, #845ef7, #339af0, #20c997, #51cf66, #fcc419);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
}
.stars-title {
    display: flex;
}
#countdownMtP {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(160deg, #ff3c38, #ff6b6b, #f06595, #845ef7, #339af0, #20c997, #51cf66, #fcc419);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    20% { background-position: 20% 50%; }
    40% { background-position: 40% 50%; }
    60% { background-position: 60% 50%; }
    80% { background-position: 80% 50%; }
    100% { background-position: 100% 50%; }
}
#BtnSubmitProfile {
    display: none;
}
.middle_div_change {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.is_MSPB {
    text-align: center;
    border: 0;
    border-radius: 36px;
    width: 200px;
    height: 32px;
}
.icon_options {
    height:40px; width:40px; margin-right:5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.change_icon {
    position: absolute;
    top: 1px;
    right: 1px;
    width:30px;
    z-index: 1;
}
.google-sign-in {
    background: #ffffff52;
    font-family: "Google Sans", arial, sans-serif;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.25px;
    text-align: center;
    border-radius: 40px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 164px;
    justify-content: center;
}
.google-icon {
    height: 21px;
    margin-right: 8px;
    min-width: 18px;
    width: 18px;
}
.pOr {
    color: white;
    width: 100%;
    text-align: center;
}
#flash-message {
    display: none;
    position: fixed;
    top: 40vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2efb3499;
    color: #fff;    
    text-align: center;
    width: 260px;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}

#flash-message.show {
    display: block;
    opacity: 1;
}
.loading-animation {
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}
.loader-wrapper {
    width: 60px;
    height: 60px;
    overflow-y: hidden;
}
.loading_icon {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 17px;
}

.loader_animation {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 10px solid #162534;
    border-top-color: #4bc8eb;
    border-bottom-color: #f13a8f;
    border-radius: 50%;
    animation: rotate0925 5s linear infinite;
    overflow-y: hidden;
}

.loader-inner {
    border-top-color: #36f372;
    border-bottom-color: #fff;
    animation-duration: 2.5s;
}

@keyframes rotate0925 {
    0% {
    transform: scale(1) rotate(360deg);
    }

    50% {
    transform: scale(.8) rotate(-360deg);
    }

    100% {
    transform: scale(1) rotate(360deg);
    }
}
.chats_taxo_group_name_True {
    color: white;
    width: 178px;
    text-align: center;
}
.room_nm {
    width: 136px;
    text-align: center;
    color: white;
}
.sponsored_t {
    width: 100%;
    text-align: center;
}
.sponsored {
    width: 100%;
    height: 100px;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.tape {
    display: flex;
    position: absolute;
    left: 0;
    justify-content: space-between;
    align-items: center;
}
.tape img {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin: 0 20px;
}
.BtnChoosespon {
    width: 166px;
    background: linear-gradient(744deg, #af40ff, #5b42f3 60%, #00ddeb);
    border-radius: 20px;
}
.sponsDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 20px;
}
.cntnt_spon {
    width: 100px;
}
.sponTitle {
    text-align: center;
}
.messageAn {
    opacity: 0;
    transform: translateY(40px);
    animation: slideIn 0.3s ease forwards;
}
/* Keyframes for slide + fade-in */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#gpay-button {
    display: none;
}
.tTime, .tCity {
    display: none;
    opacity: 0;
    transition: opacity 4s ease;
}
@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.tFade {
    display: block;
    animation: fadeInOut 6s ease-in-out forwards;
}
.melting-text {
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    animation: melt 3s infinite ease-in-out;
    background: linear-gradient(90deg, #ff6f61, #ffbd44, #ff6f61);
    -webkit-background-clip: text;
    color: transparent;
    height: 48px;
    overflow: hidden;
}
.melting-text-small {
    font-size: 1.2rem;

}
.melting-text::before,
.melting-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff6f61, #ffbd44, #ff6f61);
    -webkit-background-clip: text;
    color: transparent;
    z-index: -1;
    transform: scaleY(1);
    opacity: 0.5;
    animation: drip 3s infinite ease-in-out;
}

.melting-text::after {
    filter: blur(10px);
    opacity: 0.3;
}

/* Keyframes for melting effect */
@keyframes melt {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}

@keyframes drip {
    0%, 100% {
        transform: scaleY(1);
        opacity: 0.5;
    }
    50% {
        transform: scaleY(1.5);
        opacity: 0.7;
    }
}
.fixed-width {
    width: 42px !important;
    height: 42px;
}
.opi-contant {
    height: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-size: 20px;
}
.menu_iconn {
    width: 24px;
    margin-right: 6px;
}
.homeUserName {
    display: flex;
    justify-content: center;
    color: white;
    padding: 16px 10px;
    font-weight: 900;
    font-size: 18px;
}
.chng-username {
    position: absolute;
    z-index: 1;
    width: 100%;
    text-align: center;
}
#clock {
    width: 100%;
    font-family: 'Share Tech Mono', monospace;
    color: #ffffff;
    text-align: center;
    color: #daf6ff;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .time {
        letter-spacing: 0.05em;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .date {
        letter-spacing: 0.1em;
        font-size: 22px;
        height: 30px;
        overflow-y: hidden;
        width: 80px;
    }
    .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
    }
}
.double_click {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.double_click.showww {
    animation: sup 0.8s ease forwards;
}
@keyframes sup {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}
.outhomepage {
    height: 100vh;
    background-image: url(/static/img/front_login_page.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.Lg_Btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.lg_Btn {
    background: white;
    color: blue;
    border-radius: 12px;
    width: 100px;
    padding: 0 12px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Main_center {
    width: 100%;
    height: 64vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    flex-direction: column;
    padding: 0px 36px 0px 36px;
}
.titleMCenter {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 10px;
    font-family: Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    overflow-y: hidden;
    z-index: 2;
}
.contentMCenter {
    text-align: center;
    line-height: 22px;
    font-family: Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    text-size-adjust: none;
    overflow-wrap: break-word;
    z-index: 2;
}
.Blg {
    display: flex;
    align-items: center;
}
.LgOuthome {
    width: 44px;
}
.Ttle_logo {
    width: 110px;
    height: 21px;
}
.outputImage1 {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 22px;
    width: 150px;
    rotate: 10deg;

    animation: jitter 3s infinite;
}

@keyframes jitter {
    0%   { transform: translate(0, 0) rotate(26deg); }
    10%  { transform: translate(-2px, 2px) rotate(26deg); }
    20%  { transform: translate(2px, -2px) rotate(26deg); }
    30%  { transform: translate(-3px, 0) rotate(26deg); }
    40%  { transform: translate(3px, 2px) rotate(26deg); }
    50%  { transform: translate(-3px, -3px) rotate(26deg); }
    60%  { transform: translate(-2px, 3px) rotate(26deg); }
    70%  { transform: translate(-3px, -2px) rotate(26deg); }
    80%  { transform: translate(-4px, 0) rotate(26deg); }
    90%  { transform: translate(-2px, 2px) rotate(26deg); }
    100% { transform: translate(0, 0) rotate(26deg); }
}
.outputImage2 {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 22px;
    width: 150px;
    rotate: -26deg;
    animation: jitter 3s infinite;
} 
.outputImage3 {
    position: absolute;
    z-index: 1;
    bottom: 34px;
    left: 16px;
    width: 150px;
    animation: jitter 3s infinite;
} 
.outputImage4 {
    position: absolute;
    z-index: 1;
    bottom: 53px;
    right: 20px;
    width: 120px;
    animation: jitter 3s infinite;
}
.signal {
    position: absolute;
    top: 0%;
    right: 43%;
    width: 12px;
    height: 12px;
    background: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    animation: scaleLoop 2s ease-in-out infinite;
}

@keyframes pulse {
    0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
    }
    100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
    }
}
.cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: black;
    margin-left: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.Tt-chat {
    color: white;
}
.Add-close_fr {
    width: 420px;
    height: 100vh;
    background-color: #0b132b;
    padding: 20px;
    position: fixed;
    z-index: 3;
    bottom: -100%;
    transition: bottom 0.6s ease-in-out;
    color: white;
}
.Add-close_fr.show {
    bottom: 0;
}
.Ttle_close_fr {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.add-friend-close {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.done-animation {
    position: relative;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #4CAF50;
    animation: pop 0.4s ease forwards;
}
.btn_frr {
    width: auto;
    position: absolute;
    z-index: 3;
    right: 0px;
    top: 20%;
}

.hidden {
    display: none;
}

@keyframes pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
.close_fr-done {
    position: absolute;
    z-index: 1;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.icon_add_pru {
    height: 40px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, hsl(38 92% 50%) 0%, hsl(28 90% 55%) 100%);;
    padding: 0.5rem;
    margin-right: 14px;
    display: flex;
    justify-content: center;

}
.tlt-produ {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: hsl(30 10% 15%);
}
.tlt-cntnt-produ {
    line-height: 1.75rem;
    color: hsl(30 8% 45%);
    font-size: 0.75rem;
    line-height: 1rem;
}
.rounded-lg {
    font-weight: 700;
    background-color: hsl(41deg 92% 50% / 10%);
    color: hsl(38 92% 50%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    margin-right: 14px;
}
.nmbrStyle {
    display: flex;
}
.contentMCenterAr {
    direction: rtl;
    unicode-bidi: plaintext;
}
.lg_BtnAr {
    background: white;
    color: blue;
    border-radius: 12px;
    padding: 0 12px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iconMtsoud {
    width: 14px;
}
.show-usser {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: white;
}
.usser1 > img {
    width: 120px;
    text-align: center;
    filter: invert(1);
}
.usser1 > div {
    text-align: center;
    font-size: 24px;
}
/* 123 */
@media screen and (max-width:420px) {
    .post_content_TFH {
        overflow: hidden;
        position: relative;
        width: 100%;
        border-radius: 19.5px;
        animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
    }
    .InsdDv{
        width: 100%;
        height: auto;
        position: sticky;
    }
    .post_content_stars { 
        overflow: hidden;
        position: relative;
        width: 100%;
        border-radius: 19.5px;
        margin-bottom: 12px;
        animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
    }
    .small-div {
        width: 100%;
        color: white;
        font-size: 17px;
        line-height: 1.5;
        padding: 30px;
    }
    #search-form{
        height: 100%;
        width: 100%;
    }
    .city {
        width: 512px;
        text-align: right;
        padding-right: 10px;
    }
    .video_text_start { 
        text-align: center;
        margin-bottom: 14px;
    }
    .video_image_rider_start {

    }
    .div_vid_profile {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
        justify-content: space-evenly;
    }
    .F_F_V{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
    .clsfctn_prfl{
        display: flex;
        flex-direction: column;
    }
    .clsfctn_prfl_slash{
        text-align: center;
        width: 100%;
        font-size: 18px;
    }
    .clsfctn_prfl_state{
        width: 474px;
        font-size: 18px;
        text-align: left;
        padding-left: 10px;
    }
    .clsfctn_prfl_city{
        width: 100%;
        font-size: 18px;
    }
    .Eml_accnt{
        text-align: center;
        font-size: 18px;
    }
    .WL {
        font-size: 20px;
    
    }
    .btn_support_rider{
        width: 48px;
    }
    .opinion-post {
        width: 80px;
    }

    .support-post {
        width: 80px;
    }
    .out-support-post {
        width: 80px;
    }
    .avatar-frame {
        position: absolute;
        pointer-events: none;
    }
    .avatar-large .avatar-frame {
        top: -10%;
        left: -10%;
        max-width: 120%;
    }
    .avatar-x-large .avatar-frame {
        top: -12.5%;
        left: -12.5%;
        max-width: 125%;
    }
    .rider_team_name {
        color: white;
        font-size: 15px;
        width: 82px;
    }
    .message_No_store_yet {
        color: white;
    }
    .e-card {
        margin: 52px auto;
        background: transparent;
        box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
        position: relative;
        width: 198px;
        height: 222px;
        border-radius: 16px;
        overflow: hidden;
    }
    .wave {
        position: absolute;
        width: 540px;
        height: 700px;
        opacity: 0.6;
        left: 0;
        top: 0;
        margin-left: -50%;
        margin-top: -70%;
        background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);
    }
    .icon {
        width: 3em;
        margin-top: -1em;
        padding-bottom: 1em;
    }
    .infotop {
        text-align: center;
        font-size: 20px;
        position: absolute;
        top: 5.6em;
        left: 0;
        right: 0;
        color: rgb(255, 255, 255);
        font-weight: 600;
    }
    .name {
        font-size: 14px;
        font-weight: 100;
        position: relative;
        top: 1em;
        text-transform: lowercase;
    }
    .wave:nth-child(2),
    .wave:nth-child(3) {
        top: 210px;
    }
    .playing .wave {
        border-radius: 40%;
        animation: wave 3000ms infinite linear;
    }
    .wave {
        border-radius: 40%;
        animation: wave 55s infinite linear;
    }
    .playing .wave:nth-child(2) {
        animation-duration: 4000ms;
    }
    .wave:nth-child(2) {
        animation-duration: 50s;
    }
    .playing .wave:nth-child(3) {
        animation-duration: 5000ms;
    }
    .wave:nth-child(3) {
        animation-duration: 45s;
    }
    @keyframes wave {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .LftSd {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .card_premium{
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        width: 17rem;
        background-color: rgb(122, 48, 143);
        background-image: radial-gradient(
        circle at 0% 0%,
        rgb(37, 7, 44) 15%,
        rgba(0, 0, 0, 0) 75%
        ),
        radial-gradient(
        circle at 100% 100%,
        rgb(25, 2, 31, 0.9) 15%,
        rgba(0, 0, 0, 0) 150%
        ),
        linear-gradient(
        135deg,
        rgba(24, 8, 28, 0) 0%,
        rgb(122, 48, 143) 50%,
        rgba(24, 8, 28, 0) 100%
        );
        border-radius: 0.5rem;
        margin-bottom: 10px;
        height: 350px;
    }
    .card_premium::before {
        content: "";
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
        background-color: rgb(122, 48, 143);
        background-image: linear-gradient(
            0deg,
            rgba(118, 42, 180, 1) 0%,
            rgb(199, 95, 228) 75%
    );
        border-radius: 9999px;
        box-shadow: 0 1px 5px 3px rgb(199, 95, 228), 0 0 30px 5px rgb(199, 95, 228);
    }
    .card_premium .title_premium {
        font-size: 1rem;
        color: white;
        font-weight: 600;
    }
    .card_premium .pricing {
        font-size: 1.5rem;
        color: white;
        font-weight: 600;
    }
    .card_premium .pricing .pricing-time,
    .card_premium .sub-title_premium {
        font-size: 0.75rem;
        color: rgb(184, 132, 199);
        font-weight: 500;
    }
    .card_premium .list_premium {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 14px;
        color: white;
        font-weight: 500;
        list-style: none;
    }
    .card_premium .list_premium .list_premium-item .check {
        margin-right: 0.25rem;
        font-size: 1rem;
        color: rgb(199, 95, 228);
        font-weight: 900;
    }
    .card_premium .button_premium {
        overflow: hidden;
        cursor: pointer;
        position: relative;
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
        width: 100%;
        height: fit-content;
        background-color: rgb(122, 48, 143);
        font-size: 0.75rem;
        color: white;
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0px 0px 2px 1px rgb(122, 48, 143);
        transition: all 0.3s cubic-bezier(1, 0, 0, 1);
    }
    .card_premium .button_premium .text-button_premium {
        position: relative;
        z-index: 10;
    }
    .card_premium .button_premium::before,
    .card_premium .button_premium::after {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease-in-out;
    }
    .card_premium .button_premium::before {
        left: 0;
        background-image: radial-gradient(
            circle at 0% 45%,
            rgba(16, 5, 36, 1) 19%,
            rgba(16, 5, 36, 0.26) 46%,
            rgba(16, 5, 36, 0) 100%
    );
    }
    .card_premium .button_premium::after {
        right: 0;
        background-image: radial-gradient(
            circle at 100% 45%,
            rgba(16, 5, 36, 1) 19%,
            rgba(16, 5, 36, 0.26) 46%,
            rgba(16, 5, 36, 0) 100%
    );
    }
    .card_premium .button_premium:hover {
        box-shadow: 0px 0px 20px 0 rgb(122, 48, 143);
    }
    .card_premium .button_premium:hover::before,
    .card_premium .button_premium:hover::after {
        width: 0;
        opacity: 0;
    }
    .cards_premium{
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        padding: 30px 0px 50px 0px;
    }
    .cards_premium_for_client{
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        padding: 0px;
    }
    .front_style_stars{
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    .Content_profile-vid{
        padding: 20px 0px 20px 0px;
        border-radius: 19px;
        flex-direction: column;
        align-items: center;
    }
    .Content_profile-short{
        padding: 20px 0px 20px 0px;
        border-radius: 19px;
        flex-direction: column;
        align-items: center;
    }
    .Content_profile-img{
        padding: 20px 0px 20px 0px;
        border-radius: 19px;
        flex-direction: column;
        align-items: center;
    }
    .Content_profile-txt{
        padding: 20px 0px 20px 0px;
        border-radius: 19px;
        flex-direction: column;
        align-items: center;
    }
    .Number_support_stars{
        display: flex;
        justify-content: center;
        height: 18px;
        position: absolute;
        z-index: 1;
        width: 100%;
        color: whitesmoke;
        bottom: 15%;
    }
    .Number_support{
        display: flex;
        justify-content: center;
        height: 18px;
    }
    .img_support_post{
        width: 40px;
        height: 36px;
    }
    .Spprt_Cmmnt{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 50px;
        padding: 0px;
    }
    .Spprt_opinions{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 54px;
        padding: 0px;
        align-items: center;
    }
    .Spprt_Cmmnt_stars{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 54px;
        padding: 0px;
        position: absolute;
        bottom: 6%;
    }
    .chss_pst{
        width: 100%;
        height: 38px;
    }
    .card_post_image{
        position: relative;
        width: 100%;
        height: 612px;
        transform-style: preserve-3d;
        transform: translateZ(-140px);
        transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
        overflow-x: visible;
    }
    .card_post_image > div {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .pst_img_rider{
        padding: 0px 12px;
    }
    .pst_short_rider{
        padding: 0px 12px;
    } 
    .image_size{
        border-radius: 10px;
        width: 100%;
    }
    .support_icon{
        width: 20px;
    }
    .comment_icon{
        width: 20px;
    }
    .share_icon{
        height: 20px;
    }
    .S_C_SH{
        display: flex;
        justify-content: center;
        width: 146px;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0;
    }
    .Img_S_N_SH{
        width: 60px;
        height: 100%;
        padding-right: 0px;
    }
    .Dv_Nmbr_S_N_SH{
        display: flex;
        justify-content: space-around;
        height: 100%;
        align-items: center;
        width: 64px;
        color: white;
    }
    .custum-file-upload-video {
        height: 94%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: space-between;
        gap: 0px;
        cursor: pointer;
        align-items: center;
        border: 2px dashed #cacaca;
        background-color: rgba(255, 255, 255, 1);
        padding: 4px;
        border-radius: 10px;
        box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
        justify-content: center;
    }
    .custum-file-upload-video .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custum-file-upload-video .icon svg {
        height: 80px;
        fill: rgba(75, 85, 99, 1);
    }
    .custum-file-upload-video .text {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custum-file-upload-video .text span {
        font-weight: 400;
        color: rgba(75, 85, 99, 1);
    }
    .custum-file-upload-video input {
        display: none;
    }
    .custum-file-upload-short {
        height: 96%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: space-between;
        gap: 0px;
        cursor: pointer;
        align-items: center;
        border: 2px dashed #cacaca;
        background-color: rgba(255, 255, 255, 1);
        padding: 4px;
        border-radius: 10px;
        box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
        justify-content: center;
    }
    .custum-file-upload-short .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custum-file-upload-short .icon svg {
        height: 80px;
        fill: rgba(75, 85, 99, 1);
    }
    .custum-file-upload-short .text {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custum-file-upload-short .text span {
        font-weight: 400;
        color: rgba(75, 85, 99, 1);
    }
    .custum-file-upload-short input {
        display: none;
    }
    .custum-file-upload-image {
        height: 94%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: space-between;
        gap: 0px;
        cursor: pointer;
        align-items: center;
        border: 2px dashed #cacaca;
        background-color: rgba(255, 255, 255, 1);
        padding: 4px;
        border-radius: 10px;
        box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
        justify-content: center;
    }
    .custum-file-upload-image .icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custum-file-upload-image .icon svg {
        height: 80px;
        fill: rgba(75, 85, 99, 1);
    }
    .custum-file-upload-image .text {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custum-file-upload-image .text span {
        font-weight: 400;
        color: rgba(75, 85, 99, 1);
    }
    .custum-file-upload-image input {
        display: none;
    }
    .video_pst_contnt{
        position: relative;
        width: 100%;
        height: 188px;
        transform-style: preserve-3d;
        transform: translateZ(-140px);
        transition: transform 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
        overflow-x: visible;
    }
    .video_pst_contnt > div {
        position: absolute;
        height: 100%;
        width: 100%;
        transition: all 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    }
    .btn_jstf_cntnt_cntr{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 104px;
    }
    .content_video_middle{
        width: 100%;
    }
    .Hd_Cntnt{
        display: flex;
        height: 50px;
    }
    .Hd_Cntnt_stars{
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 7vh;
    }
    .Hd_Cntnt_TFH{
        display: flex;
        height: auto;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 22px;
    }
    .Hd_Cntnt_right_side{
        display: flex;
        height: 72px;
        justify-content: center;
    }
    .Hd_Cntnt_right_side_stars{
        display: flex;
        height: 50px;
    }
    .filtering_in_taxo{
        width: 100%;
        padding: 14px 16px;
    }
    .search_icon{
    }
    .inp_search_riders_big{
        height: 100%;
        width: 100%;
        background-color: #f3edf7;
        padding: 6px 8px 6px 6px;
        display: flex;
        border-radius: 14px;
    }
    .inp_search_riders_small{
    }
    .taxanomy_menu{
        width: 100%;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: right;
        padding: 12px 0px 12px 12px;
    }
    .search_product{
        width: 100%;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: right;
        padding: 12px 0px 12px 0px;
    }
    .taxonomy_ttl{
        width: 100%;
        height: 100px;
        color: white;
        font-size: 20px;
        font-weight: 500;
        padding: 10px 10px 0px 10px;
    }
    .taxonomy_ttl_1{
        width: 100%;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        padding-bottom: 2px;
    }
    .taxonomy_ttl_2{
        width: 100%;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }
    .taxonomy_title{
        height: 100px;
        font-weight: 500;
        padding: 0px 12px 0px 12px;
    }
    .lg_taxonomy_ttl{
        width: 130px;
    }
    .taxonomy_table_icon_badge{
        padding-right: 0px;
    }
    .taxonomy_table_icon_badge > img{
        width: 40px;
    }
    .taxonomy_main{
        width: 100%;
        height: 780px;
    }
    .taxonomy_table_icon_profile_left{
        padding-right: 3px;
        position: absolute;
        z-index: 0;
    }
    .taxonomy_table_icon_profile_left > img{
        width: 50px;
        border-radius: 50%;
        height: 50px;
    }
    .taxonomy_table_icon_profile_right{
        padding-right: 3px;
        position: absolute;
        z-index: 0;
        width: 50px;
        border-radius: 50%;
        height: 50px;
    }
    .rider_user_name{
        font-size: 12px;
    }
    .flex-align-items{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 74px;
    }
    .rider_column{
        width: 300px;
        height: 56px;
    }
    .Number_taxonomy_rider{
    }
    .taxonomy_table{
        border: none;
    }
    #taxonomy_table_div{
        padding: 0px;
    }
    #menu_friend_account{
        width: 340px;
        height: 342px;
        z-index: 4;
        padding: 4px 0px;
    }
    .content_video{
        width: 730px;
        height: 408px;
        background-color: white;
        border-radius: 19px;
    }
    .content_short{
        display: flex;
        width: 100%;
        height: 640px;
        background-color: white;
        border-radius: 19px;
        flex-direction: column;
        justify-content: space-between;
    }
    .content_image{
        display: flex;
        width: 730px;
        height: 518px;
        background-color: white;
        border-radius: 19px;
        flex-direction: column;
        justify-content: space-between;
    }
    .content_image_header{
        height: 68px;
        display: flex;
        align-items: center;
    }
    .content_image_icon_return{
        height: 47px;
        width: 54px;
        padding-left: 10px;
    }
    .content_image_title{
        width: 260px;
        text-align: center;
    }
    .content_image_middle{
        height: 100%;
        width: 100%;
    }
    .content_image_footer{
        display:flex;
        width: 100%;
        height: 70px;
        align-items: center;
        justify-content: flex-end;
        overflow-y: hidden;
    }
    .content_wallpaper_footer{
        display:flex;
        width: 100%;
        height: 70px;
        align-items: center;
        justify-content: center;
    }
    .content_text_footer{
        display:flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 86px;
    }
    .content_text{
        width: 730px;
        height: 450px;
        background-color: white;
        border-radius: 19px;
    }
    .content_advantage{
        width: 730px;
        height: 450px;
        background-color: white;
        border-radius: 19px;
    }
    .add_video{
        width: 100%;
    }
    .add_short
    ,.add_tfh{
        height: 700px;
        width: 100%;
        padding: 0px 10px;
    }
    .add_image{
        height: 700px;
        width: 100%;
        padding: 0px 10px 0px 10px;
    }
    .add_wallpaper{
        height: 700px;
        width: 100%;
        padding: 0px 10px 0px 10px;
    }
    .add_text{
        height: 700px;
        width: 100%;
        padding: 56px 10px 0px 10px;
    }
    .add_content{
        background-image: url(./img/video_image_txt_adv_phone.webp);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 364px;
        border-radius: 40%;
    }
    .footer_btn_link{
        display: none;
    }
    .card__price-box > img {
        width: 114px;
    }
    .friends_followers_voters_div {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        padding-bottom: 10px;
    }
    .Crd_Accnt_private{
        width: 100%;
        display: flex;
        padding: 0px 30px 30px 30px;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
        flex-wrap: nowrap;
        margin: 0px;
    }
    .width_space_title_profile{
        width: 100%;
    }
    .title_informations{
        display: flex;
        text-align: center;
        width: 100%;
        padding: 30px 10px 0px 10px;
        flex-direction: column;
    }
    .badge_profile {
        width: 100%;
        padding: 10px 10px 10px 10px;
        height: 208px;
    }
    .title_profile {
        font-size: 20px;
        text-align: right;
    }
    .image_profile_account_div_private{
        position: absolute;
        z-index: 1;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        top: 108px;
        padding-left: 10px;
    }
    .info_rider {
        display: flex;
        margin: 0px 10px;
        background: linear-gradient(-45deg, #24ff72, #9a4eff);
        padding: 10px;
        border-radius: 16px;
        flex-direction: column-reverse;
    }
    .title_rider_name_accout{
        padding-top: 72px;
        margin-bottom: 62px;
        text-align: center;
        font-size: 26px;
    }
    .Crd_Accnt {
        width: 100%;
        display: flex;
        padding: 4px 30px 10px 30px;
        justify-content: flex-end;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        margin-top: 0px;
    }
    .classification_profile {
        display: flex;
        position: absolute;
        z-index: 1;
        top: 288px;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0px;
        
    }
    .card__title {
        height: 170px;
    }  
    .card__side {
        border-radius: 50%;
        height: 160px;
        -webkit-transition: all 0.8s ease;
        transition: all 0.8s ease;
        position: absolute;
        width: 160px;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        overflow: hidden;
    }
    .card__side--front-1 {
        border-radius: 50%;
        height: 160px;
        background: linear-gradient(-45deg, #f403d1, #64b5f6);
    }
    .card_profile {
        -webkit-perspective: 150rem;
        perspective: 150rem;
        -moz-perspective: 150rem;
        position: relative;
        height: 172px;
        width: 160px;
        border-radius: 50%;
    }
    .image_profile_account_div{
        position: absolute;
        z-index: 1;
        display: flex;
        width: 100%;
        height: 174px;
        align-items: center;
        justify-content: center;
        top: 72px;
    }
    .background_account{
        width: 100%;
        height: 170px;
    }
    .background_profile{
        height: 166px;
        width: 100%;
    }
    .chooses_post {
        width: 33%;
        height: 110px;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
    }
    .chooses_post_stars {
        display: none;
        position: absolute;
    }
    .options-str {
        width: 300px;
        height: 300px;
    }
    .div_content {
        width: 100%;
        padding: 0px 3px 0px 3px;
    }
    .div_content_stars {
        width: 100%;
    }
    .div_friends{
        width: 100%;
        padding: 0px;
        display: flex;
        justify-content: center;
        padding: 10px;
    }
    .div_teams {
        width: 100%;
        height: 144px;
        padding: 0px;
        display: flex;
        justify-content: center;
        padding: 10px 10px 0px 10px;    
    }
    .contant_home_page{
        width: 100%;
        padding-bottom: 48px;
    }
    .nav_home_page{
        display: none;
    }
    .content_store{
        display: none;
    }
    .titlemr_txt{
        height: 76px;
    }
    .Old_Price_Post_Id{
        font-size: 16px;
        text-decoration: line-through;
        font-family: 'Raleway', sans-serif;
        text-align: center;
    }
    .on_click{
        width: 254px;
        text-decoration: none;
    }
    .motorcycle_home{
        background: url(./img/motorcycle_home.jpeg);
        background-repeat: no-repeat;
        background-size:cover;
    }
    .bicycle_home{
        background: url(./img/bicycle_home.jpeg);
        background-repeat: no-repeat;
        background-size:cover;
    }
    .t_of_mtr_arab {
        font-size: 31px;
        text-align: center;
        font-weight: 600;
        font-style: normal;
        font-family: 'Rubik', sans-serif;
    }
    .sdocument2{
        position: relative;
        padding: 22px 22px 22px 22px;
        border-radius: 24px;
        background: #f9f9f9;
        opacity: 70%;
    }
    .sdocument2_promo{
        position: relative;
        padding: 22px 22px 22px 22px;
        border-radius: 24px;
        background: #ffc8dd;
        color: #e94b4b;
    }
    .home_promo_text_hello{
        
        height: 357px;
        color: white;
        font-size: 36px;
        font-family: El Messiri;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        align-items: center;
    }
    .home_promo_text{
        position: absolute;
        
        top: 1px;
        z-index: 2;
        color: white;
        font-size: 99px;
        font-family: El Messiri;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        align-items: center;
        padding: 164px 30px 0px 30px;
    }
    .home_promo_img{
        width: 100%;
        height: 667px;
        background-image: url(./img/promo_cake_phone.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .content22{
        position: relative;
        width: 400px;
        border-radius: 22px;
        color: white;
        margin: 0px;
    }
    .content22_promo{
        position: relative;
        width: 400px;
        margin: 18px 10px 10px 10px;
        border-radius: 22px;
        background: #ffc8dd;
    }
    .DvBtn{
        padding: 0px 0px 0px 4px;
        text-align: right;
        height: 40px;
    }
    .TpBk {
        height: 36px;
        font-size: 18px;
        text-align: center;
        font-family: 'Lemonada', cursive;
    }
    .TtlN1 {
        font-size: 2rem;
        margin: 0px;
        font-weight: 700;
        font-family: 'Miltonian Tattoo', serif;
        color: black;
        text-align: center;
        font-style: normal;
    }
    .PrcN1 {
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        height: 30px;
        font-weight: 600;
        font-size: 23px;
        font-family: 'Marhey', sans-serif;
        text-align: center;
    }
    .Price_Post_Id {
        font-size: 28px;
        height: 48px;
        text-align: center;
        font-family: 'Marhey', sans-serif;
    }
    .Price_Post_Id_promo {
        font-size: 28px;
        height: 72px;
        text-align: center;
        font-family: 'Marhey', sans-serif;
        color: #e94b4b;
    }
    .TtlDscrptn {
        font-weight: 800;
        font-size: 22px;
        height: 40px;
        text-align: center;
        font-family: 'Readex Pro', sans-serif;
    }
    .TtlDscrptn_promo {
        font-weight: 800;
        font-size: 22px;
        height: 40px;
        text-align: center;
        font-family: 'Readex Pro', sans-serif;
        color: #e94b4b;
    }
    .BkClssfctn {
        height: 44px;
        font-weight: 800;
        font-size: 22px;
        text-align: center;
        margin-bottom: 26px;
        font-family: 'Readex Pro', sans-serif;
    }
    .request_3 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 66px;
    }
    .Ifram_Y{
        width: 100%;
        height: 202px;
    }
    .BtnB_request {
        white-space: normal;
        border-radius: 14px;
        background-color: white;
        color: blue;
        border: 0px;
        height: 46px;
        padding: 6px 8px 6px 8px;
        
        font-family: Lemonada;
        font-size: 22px;
        font-weight: 900;
    }
    .BtnB_request_promo {
        white-space: normal;
        border-radius: 14px;
        background-color: white;
        color: #f781ae;
        border: 0px;
        height: 58px;
        padding: 10px 40px 10px 40px;
        
        font-family: Lemonada;
        font-size: 22px;
        font-weight: 900;
    }
    .ExplntrVd {
        font-size: 22px;
        width: 100%;
        text-align: center;
        font-weight: 800;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 1px;
    }
    .document {
        padding: 10px;
        border-radius: 19px;
    }
    .flexible {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .request_spc {
        padding: 10px;
        margin-bottom: 60px;
    }
    .location_request {
        padding: 10px;
        text-align: right;
        font-size: 20px;
        margin-bottom: 20px;
    }
    .address_request{
        text-align: right;
        font-size: 20px;
        margin-bottom: 20px;
    }
    .motorcycle_name_request{
        font-size: 26px;
        text-align: right;
        margin-bottom: 20px;
    }
    .motorcycle_id_request{
        font-size: 26px;
        text-align: right;
    }
    .price_request{
        font-size: 26px;
        text-align: right;
        margin-bottom: 20px;
    }
    .full_name_request{
        width: 100%;
        text-align: right;
        font-family: Rubik;
    }
    .form_group_request{
        float: right;
        margin-bottom: 20px;
    }
    .full_name_input_request{
        width: 300px;
        height: 38px;
    }
    .email_request{
        width: 100%;
        text-align: right;
        font-family: Rubik;
    }
    .email_input_request{
        width: 300px;
        height: 38px;
    }
    .Numberphone_request{
        width: 100%;
        text-align: right;
        font-family: Rubik;
    }
    .Numberphone_input_request{
        width: 300px;
        height: 38px;
        text-align: center;
    }
    .Note_request{
        text-align: right;
        width: 300px;
        font-family: Rubik;
    }
    .Note_input_request{
        width: 286px;
        height: 160px;
        text-align: right;
    }
    .alerts {
        padding: .75rem 1.25rem;
        border: 1px solid transparent;
    }
    .alerts-success {
        color: #ffffff;
        background-color: #00ff0a;
        border-color: #c3e6cb;
    }
    .All_img{
        width: 100%;
        background-image: url(./img/home_phone_page-Recovered.webp);
    }
    footer{
        justify-content: center;
        align-items: flex-end;
    }
    .cont{
        display: block;
        width: 139px;
        margin: auto;
        margin-top: 12px;
    }
    .header_btn{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main_home_1 {
        background-image: url(/static/img/upload_product.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .MnHmN1 {
        padding: 40px 20px 10px 20px;
        background-image: none;
        height: 596px;
    }
    .main_home_2 {
        background-image: url(/static/img/mm2.webp);
        height: 677px;
        
        background-size: cover;
        background-repeat: no-repeat;
    }
    .main_home_3 {
        background-image: url(/static/img/mm3.webp);
        height: 677px;
        
        background-size: cover;
        background-repeat: no-repeat;    
    }
    .main_home_4 {
        height: 642px;
        background-image: none;
    }
    .main_home_5 {
        height: 677px;
        background-image: none;
    }
    .main_home_6 {
        background-image: url(/static/img/mm6.webp);
        height: 387px;
        background-size: cover;
        background-repeat: no-repeat; 
    }
    .big_logo{
        width: 360px;
        padding: 0px;
    }
    .div_language{
        width: 300px;
        height: 530px;
        margin: 30px auto 30px auto;
        background-image: url(./img/choose.webp);
        background-size: cover;
        border-radius: 10%;
        padding: 30px 32px 0px 32px;
    }
    .txth1 {
        font-size: 28px;
        font-weight: 600;
        color: rgb(255, 255, 255);
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        line-height: 48.07px;
        text-align: center;
        z-index: 2;
        padding: 0px 0px 0px 0px;
    }
    .txth2 {
        position: relative;
        font-size: 23px;
        color: white;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        line-height: 32px;
        text-align: center;
        z-index: 2;
    }
    .txth3 {
        position: relative;
        font-size: 18px;
        padding: 30px 0px 0px 0px;
        color: white;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        line-height: 32px;
        text-align: center;
        z-index: 2;
    }
    .TxtArSmll{
        position: relative;
        top: 148px;
        padding: 0px 30px;
        font-size: 42px;
        color: white;
        width: 648px;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 48.2px;
        text-align: center;
        align-items: center;
        z-index: 2;
    }
    .btnh1 {
        font-size: 26px;
        width: 210px;
        height: 50px;
        transform: perspective(400px) rotateX(2deg);
        color: white;
        font-weight: 900;
        border: none;
        border-radius: 5px;
        background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(70,135,252,1) 100%);
        box-shadow: rgba(63,94,251,0.2) 0px 40px 29px 0px;
        will-change: transform;
        transition: all 0.3s;
        border-bottom: 2px solid rgba(70,135,252,1);
    }
    .BtnDwn {
        position: relative;
        top: 148px;
        left: 0px;
        font-size: 26px;
        width: 200px;
        margin: 0px 100px 0px 100px;
        height: 50px;
        transform: perspective(400px) rotateX(2deg);
        color: white;
        font-weight: 900;
        border: none;
        border-radius: 5px;
        background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(70,135,252,1) 100%);
        box-shadow: rgba(63,94,251,0.2) 0px 40px 29px 0px;
        will-change: transform;
        transition: all 0.3s;
        border-bottom: 2px solid rgba(70,135,252,1);
    }
    .titleh{
        font-size: 46px;
        font-weight: 600;
        color: white;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        text-align: center;
        margin: 16px auto 0px auto;
    }
    .th3{
        position: absolute;
        width: 468px;
        right: 0px;
        top: 362px;
        font-size: 40px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 20px 0px 20px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 33px;
        text-align: center;
    }
    .TxtHmAr1{
        position: absolute;
        width: 490px;
        right: 0px;
        top: 379px;
        font-size: 40px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 20px 0px 20px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 33px;
        text-align: center;
    }
    .btnh2{
        position: absolute;
        right: 60px;
        top: 610px;
        margin: 0px;
        padding: 0px 0px;
        border-radius: 14px;
        border: 1px solid rgb(61, 106, 255);
        font-size: 26px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 2px;
        background: blue;
        width: 224px;
        height: 46px;
        color: #fff;
        overflow: hidden;
        box-shadow: 0 0 0 0 transparent;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        z-index: 5;
        text-decoration: none;
    }
    .imgh1{
        width: 100%;
        height: 370px;
        z-index: 0;
        margin: 0px 20px 0px 20px;
    }
    .img_cos{
        position: absolute;
        top:140px;
        left: 0px;
        width: 573px;
        height: 460px;
        z-index: 1;
    }
    .th4{
        position: relative;
        width: 375px;
        right: 0px;
        top: 224px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 40px 0px 40px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 34px;
        text-align: center;
    }
    .TxtHmAr2{
        position: relative;
        width: 375px;
        right: 0px;
        top: 224px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 20px 0px 10px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 34px;
        text-align: center;
    }
    .th44{
        position: relative;
        right: 0px;
        top: 251px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 20px 0px 40px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 34px;
        text-align: center;
    }
    .TxtHmAr3{
        position: relative;
        right: 0px;
        top: 164px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 20px 0px 20px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 34px;
        text-align: center;
    }
    .btnh3{
        position: absolute;
        left: 0px;
        margin: 0px 82px 0px 82px;
        top: 580px;
        border-radius: 14px;
        border: 1px solid rgb(61, 106, 255);
        font-size: 25px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 2px;
        background: blue;
        width: 224px;
        height: 46px;
        color: #fff;
        overflow: hidden;
        box-shadow: 0 0 0 0 transparent;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        z-index: 1;
    }
    .imgh2{
        position: relative;
        top: -222px;
        width: 380px;
        float: none;
        padding: 0px 20px 0px 20px;
    }
    .btnh4{
        position: absolute;
        left: 0px;
        margin: 0px 10px 0px 105px;
        top: 512px;
        padding: 0px 0px;
        border-radius: 14px;
        border: 1px solid rgb(61, 106, 255);
        font-size: 25px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 2px;
        background: blue;
        width: 224px;
        height: 46px;
        color: #fff;
        overflow: hidden;
        box-shadow: 0 0 0 0 transparent;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        z-index: 1;
    }
    .th6{position: absolute; width: 442px;left: 0px;top: 280px;font-size: 40px;color: white;font-family: 'Russo One', sans-serif;z-index: 2;padding: 0px 20px 0px 20px;font-style: normal;font-weight: 600;font-size: 30px;line-height: 36px;text-align: center;}
    .TxtHmAr4{
        position: absolute;
        width: 504px;
        left: 0px;
        top: 188px;
        font-size: 40px;
        color: white;
        font-family: 'Russo One', sans-serif;
        z-index: 2;
        padding: 0px 20px 0px 20px;
        font-style: normal;
        font-weight: 600;
        font-size: 30px;
        line-height: 36px;
        text-align: center;
    }
    .btnh5{
        position: absolute;
        right: 0px;
        top: 520px;
        padding: 0px 0px;
        margin: 0px 76px 0px 20px;
        border-radius: 14px;
        border: 1px solid rgb(61, 106, 255);
        font-size: 25px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 2px;
        background: blue;
        width: 224px;
        height: 46px;
        color: #fff;
        overflow: hidden;
        box-shadow: 0 0 0 0 transparent;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        z-index: 1;
    }
    .th7{
        padding: 20px;
        color: white;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 30px;
        line-height: 40px;
        text-align: center;
    }
    .FtDv{
        display: flex;
        justify-content: center;
        padding-left: 0px;
        height: 136px;
    }
    .TxtHmAr4{
        position: relative;
        padding: 0px 20px;
        top: 3px;
        left: 0px;
        color: white;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 34px;
        line-height: 40px;
        text-align: center; 
    }
    .txtl1{
        color: white;
    }
    .slogin{
        position: relative;
        width: 390px;
        border-radius: 24px;
        padding: 28px 20px 44px 20px;
        margin: 0px auto 0px auto;
    }
    .btnlogin{
        position: relative;
        top: 0px;
        left: 0px;
        margin: 0px auto 20px auto;
        padding: 1em 1.8em;
        outline: none;
        border: 1px solid #303030;
        background: #5271FF;
        color: white;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 15px;
        overflow: hidden;
        transition: 0.2s;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
    }
    .btnsignup{
        left: 0px;
        margin: 0px auto 0px auto;
    }
    .imgl{
        position: relative;
        right: 0px;
        top: 0px;
        float: none;
        margin: 0px auto 0px auto;
        width: 326px;
        z-index: 1;
        margin: 20px;
    }
    .DvImgLgn{
        display: flex;
        
        justify-content: center;
        align-content: center;
    }
    .main_login_1{
        background-image: url(./img/upload_product.webp);
        background-size: cover;
        height: 100vh;
    }
    .main_login_2{
        background-size: cover;
    }
    .con{
        border-radius: 22px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .mtr_video{
        display: none;
    }
    .mtr_video_phone{
        display: block;
        width: 100%;
        height: 100%;
    }
    .txtmr{
        padding: 20px 30px 0px 30px;
        position: absolute;
        
        top: 232px;
        z-index: 3;
        color:white;
        font-size: 44px;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 900;
        text-align: center;
        align-items: center;
        left: 0px;
        line-height: 86px;
    }
    .con2{
        position: relative;
        z-index: 0;
        padding: 0px 20px 10px 20px;
        border-bottom-left-radius: 22px;
        border-bottom-right-radius: 22px;
    }
    .titlemr{
        position: relative;
        font-size: 30px;
        color: white;
        font-style: normal;
        font-weight: 800;
        text-align: center;
        align-items: center;
        font-family: 'Lemonada', cursive;
    }
    .card_mtr{
        position: relative;
        padding: 0px 10px 0px 10px;
        width: 800px;
        margin-bottom: 40px;
        border-radius: 49px;
    }
    .dflex{
        width: 375px;
        height: 276px;
    }
    .mr{
        width: 307px;
        margin: 0px auto 0px auto;
        height: 183px;
        border-radius: 49px;
        float: none;
    }
    .ctxt1{
        position: relative;
        top: 13px;
        font-size: 30px;
        color: black;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        align-items: center;
    }
    .ctxt2{
        position: relative;
        top: 33px;
        font-size: 16px;
        color: black;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 600;
        text-align: center;
        align-items: center;
    }
    .staars{
        position: relative;
        top: 38px;
        left: 0px;
        width: 300px;
        display: flex;
        justify-content: space-around;
        margin: auto;
    }
    .stars{
        width: 271px;
        height:50px;
        justify-content:space-between;
        top: 55px;
        margin: 0px auto 0px auto;
    }
    .strs{
        width: 30px;
        height: 30px;
    }
    .btnbooking{
        position: relative;
        top: 54px;
        left: 0px;
        width: 281px;
        height:66px;
        border-radius: 39px; 
    }
    .main_Abt_us{
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment:fixed;
        height: 100%;
        padding: 10px 6px 10px 6px;
    }
    .right{
        height: 400px;
    }
    .mrrs{
        position: relative;
        width: 88px;
        height: 72px;
        margin-right: 10px;
        margin-top: 10px;
        border-radius: 49px;
    }
    .ctxt22{
        position: relative;
        top: 16px;
        font-size: 33px;
        color: black;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 600;
        text-align: center;
        align-items: center;
    }
    .btnbookingg{
        position: relative;
        top: 62px;
        left: 34px;
        border-radius: 14px;
        border: 1px solid rgb(61, 106, 255);
        font-size: 28px;
        font-weight: 600;
        background: blue;
        width: 232px;
        height: 52px;
        color: #fff;
        overflow: hidden;
        box-shadow: 0 0 0 0 transparent;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        z-index: 1;
    }
    .choose{
        position: relative;
        width: 284px;
        top: 83px;
        height:auto;
        background: #F1F2F6;
        margin: 0% auto 195px auto;
        padding: 42px 24px 58px 24px;
        border-radius: 42px;
    }
    .titlech{
        color: #e2f2ff;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        padding: 18px;
        display: flex;
        border-bottom: 1px solid #8a8c8e;
        justify-content: center;
        align-items: center;
    }
    .type{
        position: relative;
        
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .btnch1{
        position: relative;
        width: 216px;
        height: 53px;
        border-radius: 16px;
        font-size: 20px;
        background: #5271FF;
        color: white;
        float: left;
        border: none;
        display: flex;
    }
    .btnch2{
        position: relative;
        width: 216px;
        height: 53px;
        border-radius: 16px;
        font-size: 20px;
        background: #5271FF;
        color: white;
        float: left;
        border: none;
    }
    .groupbtn{
        display: none;
    }
    .content_parts{
        flex-direction: column;
        justify-content:flex-start;
    }
    .gparts{
        padding: 20px 20px 20px 20px;
    }
    .cardparts{
        margin: 10px auto 10px auto;
        width: 246px;
    }
    .imgprts{
        width: 200px;
        height: 163px;
    }
    .part{
        padding: 0px 0px 75px 0px;
        margin: 0px auto 75px auto;   
    }
    .bigcardprts{
        background-color: #F1F2F6;
        padding: 42px;
        width: 1300px;
        border-radius: 19.5px;
    }
    .simgpart{
        position: relative;
        width: 85px;
        margin-right: 5px;
        margin-top: 10px;
        border-radius: 49px;
    }
    .textpart{
        height: 310px;
    }
    .bgtitleprt{
        position: relative;
        width: 464px;
        top: 0px;
        font-size: 36px;
        color: black;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 800;
        text-align: center;
        align-items: center;
    }
    .bgcmpnyprt{
        position: relative;
        width: 556px;
        top: 5px;
        font-size: 45px;
        color: black;
        font-family: 'Russo One', sans-serif;
        font-style: normal;
        font-weight: 600;
        text-align: center;
        align-items: center;
    }
    .starspart{
        position: relative;
        top: 14px;
        width: 350px;
        left: 3px;
        display: flex;
        justify-content: space-around;
    }
    .dflex2{
        justify-content: space-between;
        flex-direction: column;
    }
    #dflex2{
        justify-content: space-between;
        flex-direction: column;
    }
    .s_crd_mtr{
        width: 455px;
        background-color: #FFFFFF;
        border-radius: 19.5px;
        padding: 0px 0px 0px 0px;
        margin-bottom: 38px;
    }
    .img_bccl {
        width: 100%;
        border-radius: 19px;
        height: 190px;
    }
    .img_bccl_promo{
        width: 100%;
        border-radius: 19px;
    }
    .article{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin: 12px;
        height: 100vh;
        padding: 10px;
        justify-content: flex-end;
    }
    .paper_1{
        width: 379px;
        display: flex;
        background: white;
        border-radius: 19.5px;
        margin: 8px 0px 8px 0px;
        float: right;
        padding: 20px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    .paper_2{
        width: 365px;
        height: 90vh;
        background: white;
        border-radius: 19.5px;
        margin-top: 8px;
        padding: 10px;
    }
    .request_document{
        width: 600px;
        background: white;
        border-radius: 29px;
        margin: 0px;
        padding: 42px 20px 20px 20px;
    }
    .none{
        display: block;
    }
    .action_id{
        display: flex;
        justify-content: space-between;
        border: 2px solid;
        width: 100%;
        border-radius: 29px;
        color: black;
        flex-direction: column-reverse;
        padding: 20px;
        align-items: center;
        direction: rtl;
        text-align: right;
    }
    .TtlAndPrc{
        display: flex;
        flex-grow: 1;
        padding-right: 16px;
        padding-left: 8px;
        align-items: flex-start;
        flex-direction: column;
    }
    .TtlAndPrc_arab{
        display: flex;
        flex-grow: 1;
        padding-right: 16px;
        padding-left: 8px;
        align-items: center;
        flex-direction: column;
    }
    .Ttl{
        font-size: 30px;
        padding-left: 0px;
        font-weight: 700;
    }
    .Ttl_arab{
        font-size: 33px;
        padding-left: 0px;
        text-align: center;
        color: #e94b4b;
        padding-bottom: 32px;
    }
    .Imgs{
        width: 100%;
        float:none;
        padding: 0px;
        height: auto;
    }
    .Imgs_promo{
        width: 100%;
        float:none;
        padding: 0px;
    }
    .Imgs_Prt{
        width: 100%;
        float:none;
        padding: 0px;
    }
    .JsScrlImgs{
        font-size: 0px;
        scroll-behavior: smooth;
        overflow: hidden;
        cursor: pointer;
        white-space: nowrap;
        padding-right: 29px;
        width: 560px;
        height: auto;
        top: 0;
    }
    .JsScrlImgs_Prt{
        font-size: 0px;
        scroll-behavior: smooth;
        overflow: hidden;
        cursor: pointer;
        white-space: nowrap;
        padding-right: 29px;
        width: 560px;
        top: 0;
    }
    .JsScrlImgs img{
        width:100%;
        height: 256px;
        object-fit: cover;
        margin-left: 14px;
    }
    .DvAbtExImgs{
        width: 100%;
        padding: 0px 12px 0px 12px;
    }
    .DvAbtExImgs_Prt{
        width: 100%;
        padding: 0px 12px 0px 12px;
    }
    .VdExplntr{
        padding: 10px 28px 38px 28px;
    }
    .LftAddMn{
        width:100%;
    }
    .RghtAddMn{
        display: none;
    }
    .AddMn2Sd{
        display: revert;
    }
    .middleSd{
        width: 100%;
    }
    .RghtSd{
        width: 100%;
    }
    .map{
        width: 372px;
        height: 430px;
        padding: 0px;
        margin: 0px 0px 0px 0px;
    }
    .map1{
        width: 100%;
        height: 400px;
        border-radius: 107px 107px 0px 0px;
        margin: 0px auto 0px auto;
    }
    .paper_3{
        width: 246px;
        display: flex;
        border-radius: 29px;
        padding: 20px;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 8px 0px 0px 0px;
        flex-wrap: nowrap;
    }
    .leftpage{
        width: 300px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    .small_title{
        font-size: 22px;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 14px;
    }
    .footer_information{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .Team_work{   
        font-size: 20px;
        margin-bottom: 40px;
    }
    .footer_text{
        width: 100%;
        font-weight: 600;
        font-size: 26px;
        font-family: 'Suez One', serif;
        line-height: 46px;
        text-align: center;
    }
    .footer_text_2{
        width: 100%;
        font-weight: 600;
        font-size: 26px;
        font-family: 'Suez One', serif;
        line-height: 46px;
        text-align: center;
    }
    .quick_links{
        text-align: center;
        color: white;
        font-family: 'Shrikhand', serif;
        font-size: 36px;
        font-weight: 800;
    }
    .quick_links_content{
        padding: 0px 0px 22px 0px;
        font-family: 'Racing Sans One', serif;
        text-align: center;
        font-size: 22px;
    }
    .Dv_QR{
        display: none;
    }
    .Dv_QR_img{
        display: none;
    }
    .Ttl_Cntrl_Rm{
        width: 500px;
        padding: 35px 27px 0px;
        color: white;
        height: 156px;
        font-size: 40px;
        font-weight: 700;
    }
    .img_flex{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px 20px;
    }
    .bgpriceprt {
        left: 0px;
        top: 246px;
    }
}