@import url('https://fonts.cdnfonts.com/css/samsung-sharp-sans');

:root{
    --primary-color: #DF5C0C;
    --primary-dark-color: #c3510a;
    --font: 'Samsung Sharp Sans', sans-serif;
    --Linear-stroke: linear;
    --black: #333;
    --white: #fff;
    --black-paragraph: #333333bf;
    --white-paragraph: rgba(255, 255, 255, 0.60);
    --footer-bg: #FEFBF8;
    
}
body{
    font-family: var(--font);
    background: #f9f9f9;
    font-size: 16px;
}
/* REUSEABLE CSS */
p{
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    color: var(--black-paragraph);
}
.container-fluid{
    --bs-gutter-x: 5rem;
}
.beamer_defaultBeamerSelector{
    bottom: 300px!important;
    right: 10px!important;
}
#smartsupp-widget-container > div #smartsupp-widget-button{
    bottom:240px!important;
    right: 10px!important;
}
div,
input,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a{
    font-family: var(--font);
}
.hidden{
    display: none!important;
}
.table_row .serv_id {
    display: flex;
    gap: 5px;
}
label{
    font-weight: bold;
    color: var(--black)!important;
}
a{
    text-decoration: none!important;
}
.navigation_menu{
    background: none;
    border: none;
}
.link{
    color: var(--primary-color);
    cursor: pointer;
}
.text-black{
    color: var(--black)!important;
}
.text-primary{
    color: var(--primary-color)!important;
}
.text-success{
    color: #10940D!important;
}
.btn-primary{
    color: var(--white);
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.32px;
    padding: 13px 24px;
    border-radius: 50px;
    height: 52px;
    max-height: 52px;
    min-width: 180px;
    background: var(--primary-color);
    border-color: var(--primary-color);
    cursor: pointer;
    transition: 0.5s;
}
.btn-outline-primary{
    color: var(--primary-color);
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.32px;
    padding: 13px 24px;
    border-radius: 50px;
    height: 52px;
    max-height: 52px;
    min-width: 180px;
    border-color: var(--primary-color);
    cursor: pointer;
    transition: 0.5s;
}

.btn-outline-primary:hover{
    background: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
}

.btn-primary.btn_has_icon{
    display: flex;
    gap: 5px;
}

.user_action_menu .btn{
    min-width: 100%;
    max-width: 100%;
    height: 40px;
}

.btn-primary.btn_has_icon > span > img{
    filter: brightness(100);
    transition: 0.5s;
}
.btn-primary:hover{
    background: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
}
.btn-primary.btn_has_icon:hover span > img{
    transform:  translateX(3px);
}
.card{
    border-radius: 10px;
    border: 0.5px solid rgba(217, 217, 217, 0.50);
    background: var(--white);
    box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
}
.card-header{
    font-size: 18px!important;
    color: var(--black)!important;
    font-weight: 500;
    border-radius: 10px!important;
    padding: 20px 20px;
    border: none!important;
    background: #f8f8f8;
}
.card .card-body{
    padding: 15px 25px;
}
.card .card-body .card_head p{
    font-size: 14px;
    font-weight: 400;
    color: var(--black-paragraph);
    margin-bottom: 0;
}
.card .card-body .card_head h3{
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-color);
    margin-bottom: 0;
}
.card .card-body .card_head.has_underline{
    padding-bottom: 8px;
    border-bottom: 1px solid #D9D9D9;
}
.general_link {
    transition: 0.5s;
}
.general_link .icon{
    margin-top: 3px;
    transition: 0.5s;
}
.general_link:hover .icon,
.general_link:hover .txt
{
    color: var(--primary-color);
}
.general_link:hover .icon{
    transform: translateX(-5px);
}

.xx_item{
    padding: 40px 20px;
    border-radius: 10px;
    border: 0.5px solid rgba(217, 217, 217, 0.50);
    box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
}
.gg_item{
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
}
.gg_item h6,
.xx_item h6{
    font-size: 14px;
    color: var(--black-paragraph);
    font-weight: 400;
}
.gg_item h4,
.xx_item h4{
    font-size: 16px;
    font-weight: 500;
}

.card_bg_gradient{
    background: linear-gradient(74deg, #D13808 36.15%, #F1AE0B 68.8%, #AA9A0D 96.97%);
    border: transparent;
}
/* NAVBAR CSS */
.navbar{
    height: 70px;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.navbar .nav-logo{
    min-width: 140px;
    width: 140px;
    max-width: 200px;
}
.navbar-nav .nav-item .nav-link{
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    padding-left: 1.5rem!important;
    padding-right: 1.5rem!important;
}
.navbar-nav .nav-item .nav-link.signup_btn{
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50px;
    padding: 0.5rem 24px;
    border-color: var(--primary-color);
}
.user_menu{
    position: fixed;
    bottom: 0;
    background: var(--white);
    border-radius: 20px 20px 0px 0px;
    max-width: 100%;
    width: 100%;
    min-height: 200px;
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 25px;
    pointer-events: none;
    transform: translateY(100%);
    box-shadow: 0 -4px 50px 10px #8d8d8dc4;
    transition: 0.5s ease;
}
.user_nav_menu{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0px;
}
.user_nav_menu .nav_menu_item{
    font-size: 16px;
    font-weight: 400;
    color: var(--black);    
}
.user_nav_menu .nav_menu_item.active,
.user_nav_menu .nav_menu_item:hover{
    color: var(--primary-color);
}
.user_action_menu{
    display: flex;
    align-items: center;
    gap: 5px;
    flex-direction: column;
}

.user_menu.actived{
    transform: translateY(0%);
    pointer-events: inherit;
}
.burger_icon > img{
    width: 30px;
}
.bg_wraper{
    transition: 0.5s ease;
}
.bg_wraper.actived{
    display: block;
    position: fixed;
    backdrop-filter: blur(10px);
    height: 100vh;
    top: 0px;
    width: 100%;
    pointer-events: none;
}
.user_menu .close_menu{
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    font-size: 25px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fc1e1e;
    color: #fc1e1e;
    border-radius: 50px;
}

.input_icon_wrap{
    position: relative;
}

.input_icon_wrap .form-control{
    font-size: 14px;
    font-weight: 400;
    border: 2px solid #DFDFE6;
    height: 56px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: none!important;
}
.form-control{
    font-size: 14px;
    font-weight: 400;
    border: 0.7px solid rgba(223, 223, 230, 0.70);
    height: 46px;
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: none!important;
}
.form-group{
    margin-bottom: 1.5rem;
}
.form-group label,
.mb-3 label{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--black-paragraph);
}
.input_icon_wrap .form-control{
    padding-left: 43px;
}
.form-control.border-round{
    border-radius: 25px;
}
.form-control:focus{
    border-color: var(--primary-color);
}

.form-control::placeholder{
    color: rgba(51, 51, 51, 0.50);
}

.input_icon_wrap .icon{
    position: absolute;
    font-size: 25px;
    color:rgba(51, 51, 51, 0.50);
    line-height: 58px;
    left: 14px;
}


.section_title{
    margin-bottom: 50px;
}
.section_title h4{
    font-size: 20px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.4px;
    color: var(--primary-color);
}
.section_title h2{
    font-family: var(--font);
    font-size: 40px;
    color: var(--black);
    font-weight: 600;
    letter-spacing: -1.2px;
}
.section_title p{
    font-size: 16px;
    font-weight: 400;
    color: var(--black-paragraph);
    line-height: 150%;
}

/* FOOTER CSS */
footer{
    background: #FEFBF8; 
    padding: 70px 0px;
}
.footer_info .famsup_brand{
    margin-bottom: 20px;
}
.footer_info .famsup_brand > img{
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}
.footer_info p{
    width: 50%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.footer_menu h4{
    font-size: 20px;
    color: var(--black);
    margin-bottom: 15px;
}
.menu_wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.menu_wrap a{
    font-size: 16px;
    font-weight: 400;
    display: block;
    color: var(--black-paragraph);
}
.footer-line{
    color: var(--primary-color);
    margin-top: 50px;
    margin-bottom: 20px;
}
.bottom_foo_menu{
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--black-paragraph);
}
.bottom_foo_menu > a{
    color: var(--black-paragraph);  
    font-size: 16px;
    font-weight: 400; 
}
.copyright_text{
    font-weight: 500;
    color: var(--black-paragraph);
    margin-right: 10px;
}

.auth_main{
    margin-bottom: 150px;
}

/* MAIN BANNER CSS */
#banner{
    padding: 120px 0px;
    background: linear-gradient(#ffffffbc, #ffffffbc),url(https://cdn.mypanel.link/hj0v8i/3hd3us3zhgd9nt92.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom; 
}
#banner .banner_content h1{
    font-size: 50px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -1.5px;
    font-style: normal;
    line-height: 1.3;
}
#banner .banner_cta{
    display: flex;
    align-items: center;
    gap: 30px;
}

#banner .banner_cta .link_banner{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
}
#banner .banner_img{
    position: relative;
    text-align: right;
}
#banner .banner_img .main_img{
    position: relative;
}

#banner .banner_img .like_icon,
#banner .banner_img .tik_icon,
#banner .banner_img .youtube_icon,
#banner .banner_img .ig_icon{
    position: absolute;
}

#banner .banner_img .like_icon{
    top: -45px;
    right: 250px;
    z-index: 1;
}

#banner .banner_img .tik_icon{
    top: -45px;
    right: -40px;
    z-index: 1;
}

#banner .banner_img .youtube_icon{
    right:  270px;
    bottom: 0;
    z-index: 1;
}

#banner .banner_img .ig_icon{
    bottom: -15px;
    right: -20px;
    z-index: 1;
}

/* lOGIN CSS */
#loginarea{
    padding: 80px 0px;
}

.card.login_card{
    background: linear-gradient(#fff,#fff),linear-gradient(80deg,#ff3f02,#f1ae0b, #aa9a0d);
    border: 1px double transparent;
    background-origin: border-box;
    background-clip: padding-box,border-box;
    border-radius: 10px;
    box-shadow: 0px 2px 15px 0px rgba(153, 153, 153, 0.10);
}

.card.login_card .card-body{
    padding: 30px 80px;
}

.card.login_card .sign_box_title{
    margin-bottom: 15px;
}

.card.login_card .sign_box_title h3{
    color: var(--black);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.card.login_card .sign_box_title p{
    color: var(--black-paragraph);
    text-align: center;
    font-weight: 400;
    font-size: 14px;
}

.login_top{
    display: grid;
    grid-template-columns: 1fr 1fr 230px;
    gap: 20px;
}

.login-btn{
    min-height: 56px;
}

.login_bottom{
    display: grid;
    grid-template-columns: 1fr 1fr 230px;
}
.login_bottom .signup_txt{
    text-align: right;
}

/* WHYCHOOSE CSS */
#whychoose{
    padding: 70px 0px;
}
#whychoose .why_choose_cont_wrap{
    display: flex;
    flex-direction: column;
    gap: 20px;
} 
#whychoose .why_choose_cont_wrap .why_item{
    display: flex;
    gap: 25px;
}

#whychoose .why_choose_cont_wrap .why_item .icon{
    min-width: 50px;
    min-height: 50px;
}

#whychoose .why_choose_cont_wrap .why_item .why_cont h3{
    color: var(--black);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
#whychoose .why_choose_cont_wrap .why_item .why_cont p{
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}
/* BENIFITS CSS */
#benifits{
    padding: 50px 0px;
}
#benifits .main_box{
    width: 100%;
    height: 340px;
    padding: 0px 50px;
    background: #ddd;
    margin-bottom: 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    color: var(--white);
}

#benifits .main_box .box__cont h3{
    font-size: 34px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--white);
}
#benifits .main_box .box__cont p{
    color: var(--white-paragraph);
    width: 70%;
}

#benifits .main_box.box_1{
    background: url(https://cdn.mypanel.link/hj0v8i/7lp33yna1j2z2g2q.png);
}
#benifits .main_box.box_2{
    background: url(https://cdn.mypanel.link/hj0v8i/mckgmlmaqpe808wm.png);
}
#benifits .main_box.box_3{
    background: url(https://cdn.mypanel.link/hj0v8i/5n7oaonf3o40fqq5.png);
}
#benifits .main_box.box_4{
    background: url(https://cdn.mypanel.link/hj0v8i/3olc1ghtmuugfhhb.png);
}

#benifits .main_box.box_1,
#benifits .main_box.box_2,
#benifits .main_box.box_3,
#benifits .main_box.box_4{
    background-repeat: no-repeat;
    background-size: cover;
}

/* TESTIMONIALS CSS */
#testimonials{
    padding: 50px 0px;
}
.testimonials_slide_wrap {
    padding-bottom: 100px;
}
.testimonials_slide_wrap::after{
    content: '';
    width: 400px;
    height:500px;
    display: block;
    background: linear-gradient(to right, #ffffff39, #ffffff43);
    position: absolute;
    right: 0;
    top: -50px;
    z-index: 99;
}
.testimonials_slide_wrap .textimonial_item {
    position: relative;
    min-height: 400px;
    width: 100%;
    padding: 50px 40px;
    background: linear-gradient(#fff,#fff),linear-gradient(80deg,#ff3f02,#f1ae0b, #aa9a0d);
    border: 1px double transparent;
    background-origin: border-box;
    background-clip: padding-box,border-box;
    border-radius: 10px;
    box-shadow: 0px 2px 20px 0px rgba(153, 153, 153, 0.15);
    z-index: 1;
}
.testimonials_slide_wrap .textimonial_item .testi_txt{
    font-family: var(--font);
    font-size: 16px;
    width: 95%;
    margin: 0 auto;
    font-weight: 400;
    color: var(--black);
    text-align: center;
}

.testimonials_slide_wrap .textimonial_item .testi_use{
    position: absolute;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 50px;
    left: 0;
    justify-content: center;
    width: 100%;
}
.testimonials_slide_wrap .textimonial_item .testi_use .name{
    position: relative;
    font-family: var(--font);
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
}
.testimonials_slide_wrap .textimonial_item .testi_use .name::before{
    content: '';
    width: 14px;
    height: 2px;
    background: #959595;
    display: block;
    position: absolute;
    left: -30px;
    top: 13px;
}
.testimonials_slide_wrap .textimonial_item .testi_use .avatar > img{
    width: 50px;
    height: 50px;
    border-radius: 50px;
}
.cta_wrap p{
    font-weight: 600;
}
.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 35px 10px;
}
.pagination > li a {
    display: flex;
    width: 40px;
    height: 40px;
    background: #d1370834;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--primary-color);
    font-weight: bold;
    border-radius: 4px;
}
.pagination > li.active a{
    background: var(--primary-color);
    color: var(--white);
}
/* FAQ CSS */
#faq{
    display: block;
    padding: 50px 0px;
    margin-bottom: 30px;
}

#faq .faq_box{
    background: var(--white);
    padding: 30px 50px;
    box-shadow: 0px 5px 16px 0px rgba(217, 217, 217, 0.20);
    border-radius: 20px;
    border: 0.4px solid rgba(217, 217, 217, 0.60);
}

#faq .faq_box .accordion .accordion-item{
    margin-bottom: 10px;
    border: none;
    background: none!important;
    border-bottom: 1px solid #D9DBE9;
    border-radius: 0px;
}

#faq .faq_box .accordion .accordion-item .accordion-header,
#faq .faq_box .accordion .accordion-item .accordion-header button{
    font-size: 20px;
    font-weight: 500;
    background: none!important;
    border : none!important;
    box-shadow: none!important;
}

#faq .faq_box .accordion .accordion-item  .accordion-button:not(.collapsed){
    color: var(--primary-color);
}

/*
    Sign Up Page
*/
#signup{
    padding: 50px 0px;
    background: linear-gradient(#ffffffbc, #ffffffbc),url(https://cdn.mypanel.link/hj0v8i/3hd3us3zhgd9nt92.png);
}

#signup .signup{
    padding: 30px 30px;
    border-radius: 20px;
    background: var(--white)!important;
    box-shadow: 0 0 10px #dddddd53;
}

.signup h1{
    font-size: 32px;
    text-align: center;
    color: var(--black);
    font-weight: 500;
}

.signup p{
    font-size: 16px;
    text-align: center;
    color: var(--black-paragraph);
    font-weight: 500;
}
.signup .or{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
}
.signup .or span.line,
.signup .or span.line{
    width: 100%;
    height: 1px;
    background: #F1F1F1;
}

.signup_txt{
    color: var(--black);
}

/*
    Dashboard CSS
*/
.dash_menu{
    width: 100%;
    height: 80px;
    background: var(--white);
    /* background: red; */
    box-shadow: 0px 2px 4px 0px rgba(217, 217, 217, 0.15);
    display: flex;
    align-items: center;
}

.dash_menu .dash_menu_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash_menu .dash_m_left{
    display: flex;
    align-items: center;
    gap: 15px;
}

.dash_menu .dash_m_left .nav_toggle_btn{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    background: #F6F7F9;
}

.dash_menu .dash_m_left .nav_toggle_btn > img{
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
}

.dash_menu .dash_m_left h3{
    font-size: 20px;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0;
}
.sidebar_user,
.dash_menu .dash_m_right .users{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.sidebar_user .user_av_icon,
.dash_menu .dash_m_right .users .user_av_icon{
    width: 50px;
    height: 50px;
}

.dash_menu .dash_m_right .users .info h5{
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--black);
}

.sidebar_user .info h5{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1;
    font-weight: bold;
}

.sidebar_user  .info .ac_link,
.dash_menu .dash_m_right .users .info .ac_link{
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 14px;
    gap: 5px;
}

.sidebar_user  .info .ac_link{
    font-weight: 500;
    line-height: 1;
}

.users .info .ac_link .icon{
    font-size: 20px;
    line-height: 1;
}

.sidebar_user .ac_link .icon{
    font-size: 20px;
    margin-top: 5px;
}

.sidebar_slide{
    max-width: 300px;
    background: var(--white);
}

.sidebar_slide .offcanvas-body{
    padding: 30px 28px;
}

.sidebar_user{
    margin-bottom: 40px;
}

.menu_links{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.logout_btn .logout,
.menu_links .menu_item{
    display: flex;
    gap: 10px;
    align-items: center;
    transition: 0.5s ease;   
}

.logout_btn .logout .icon,
.menu_links .menu_item .menu_icon{
    color: var(--black-paragraph);
    font-size: 25px;
}


.logout_btn .logout .text,
.menu_links .menu_item .menu_name{
    font-size: 16px;
    color: var(--black-paragraph);
    font-weight: 500;
}

.menu_links .menu_item:hover .menu_icon,
.menu_links .menu_item.active .menu_icon{
    color: var(--primary-color);
}
.menu_links .menu_item:hover .menu_name,
.menu_links .menu_item.active .menu_name{
    color: var(--primary-color);
}

.logout_btn .logout .icon{
    line-height: 1;
    color: #EB5757;
}

.logout_btn .logout .text{
    color: #EB5757;
}

/* New Order Page */
#welcomeBanner{
    margin-top: 70px;
}
#welcomeBanner .card.welcome{
    background: url(https://cdn.mypanel.link/hj0v8i/fx4ijr42rcx5cyod.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 166px;
    border: none!important;
    border-radius: 20px;
    display: flex;
    padding: 10px 30px;
}

#welcomeBanner .card.welcome h3{
    font-size: 24px;
    font-weight: 500;
}
#welcomeBanner .card.welcome p{
    font-size: 16px;
    font-weight: 500;
    color: var(--white-paragraph);
}
#welcomeBanner .card.welcome .model > img{
    bottom: -10px;
    right: -20px;
}

.cos_wraper{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.xos_item,
.cos_wraper .cos_item{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 10px;
}
.xos_item{
    margin:0px;
}
.xos_item .xos_icon,
.cos_wraper .cos_item .cos_icon{
    min-width: 60px;
    min-height: 60px;
    background:#F9F9F9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.cos_wraper .cos_item h5{
    font-size: 16px;
    font-weight: 400;
    color: var(--black-paragraph);
    margin-bottom: 3px;
}

.cos_wraper .cos_item h3{
    font-size: 20px;
    font-weight: 500;
    color: var(--black);
}

.xos_item .xos_txt h4{
    font-size: 18px;
    color: var(--black-paragraph);
    font-weight: 500;
    margin-bottom: 0;
}
.filter_btn_wraper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.filter_btn_wraper .filter_btn{
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 15px;
    border-radius: 50px;
    background: none;
    border: none;
}
.filter_btn_wraper .filter_btn .icon{
    pointer-events: none;
}
.filter_btn_wraper .filter_btn .txt{
    font-size: 12px;
    color: var(--black-paragraph);
    font-weight: 400;
    pointer-events: none;
}

.filter_btn_wraper .filter_btn.active{
    background: var(--primary-color);
    color: var(--white)!important;
}

.filter_btn_wraper .filter_btn.active .txt{
    color: var(--white);
    pointer-events: none;
}

.filter_btn_wraper .filter_btn.active .icon{
    filter: brightness(1000) invert(0);
    pointer-events: none;
}

.services_des h6{
    font-size: 18px;
    color: var(--black);
}

.services_des .serv_box{
    background: #F9F9F9;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 400;
    color: var(--black-paragraph);
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.services_des .serv_box .serv_left{
    display: flex;
    gap: 10px;
}
.filter_drop_wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

.filter_drop_wrap > li > a {
    display: flex;
    width: 100%;
    white-space: pre-wrap;
    text-align: left;
    gap: 5px;
    padding: 7px 15px;
    border-bottom: 1px solid #ddd;
}

/* Ticket Page */
.ticket-card{
    display: block;
    padding: 30px 15px;
    border-radius: 10px;
    border: 1px solid rgba(217, 217, 217, 0.70);
    box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.04);
    margin-bottom: 10px;
}

.ticket-card .ticket-title{
    font-size: 13px;
    color: var(--black-paragraph);
    font-weight: 400;
    margin-bottom: 5px;
}

.ticket-card .sctc-text{
    font-size: 14px;
    font-weight: 400;
    color: var(--black);
}
/* View Ticket */
.message_form{
    position: relative;
}

.message_form .icon{
    font-size: 35px;
    left: 10px;
    position: absolute;
    color: #33333380;
    top: 6px;
}
.message-box{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.message-box.message_user div:last-child{
    background: var(--black);
    padding: 15px 25px;
    color: var(--white);
    border-radius: 20px 0px ;
}
.message-box.message_admin div:first-child{
    background: linear-gradient(74deg, #D13808 36.15%, #F1AE0B 68.8%, #AA9A0D 96.97%);
    padding: 15px 25px;
    color: var(--white);
    border-radius: 0px 20px ;
}
.text-grey{
    color: var(--white-paragraph)!important;
}
.message_form .form-control{
    font-size: 16px;
    padding-left: 45px;
    border-radius: 50px;
    height: 56px;
}

.message_form .btn-send{
    position: absolute;
    right: 10px;
    height: 40px;
    width: 100px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50px;
    top: 8px;
}

/* Child Panel */
.ns_card{
    position: relative;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    background: #F9F9F9;
}

.ns_card .copy_btn{
    position: absolute;
    font-size: 18px;
    background: none;
    border: none;
    top: 10px;
    color: var(--black-paragraph);
    right: 10px;
}

.child_panel_os{
    font-family: var(--font);
    padding: 20px;
    border-radius: 10px;
    background: #f8f8f8;
    display: flex;
    font-size: 16px;
    font-weight: 400;
    color: var(--black);
    gap: 10px;
    align-items: center;
}

.child_panel_accoridion .accordion-item{
    border-radius: 10px;
    border: 1px solid rgba(217, 217, 217, 0.70)!important;
    background: var(--white);
    box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
    margin-bottom: 20px;
}
.child_panel_accoridion .accordion-item .accordion-header,
.child_panel_accoridion .accordion-item .accordion-header .accordion-button{
    background: transparent;
    border-radius: 10px!important;
    border: none!important;
    box-shadow: none!important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-paragraph);
}
.child_panel_accoridion .accordion-item .accordion-header .accordion-button::after{
    display: none;
}

.child_panel_accoridion .accordion-item .accordion-header .accordion-button .icon :last-child,
.child_panel_accoridion .accordion-item .accordion-header .accordion-button .icon :first-child{
    font-size: 22px;
    color: var(--black-paragraph);
}

.child_panel_accoridion .accordion-item .accordion-header .accordion-button .icon :last-child{
    display: none;
}

.child_panel_accoridion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon :first-child{
    display: none;
}
.child_panel_accoridion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon :last-child{
    display: block;
}

.phone_d-block{
    display: none;
}

.mobile_bottom_menu{
    display: none;
}
/*
    API
*/
.api_items_wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.api_items_wrap .api_item{
    text-align: left;
}

.api_items_wrap .api_item h6{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px!important;
    color: var(--black);
}

.api_items_wrap .api_item p{
    font-size: 14px;
    color: var(--black-paragraph);
    font-weight: 400;
}

.card.card-code {
    background: #121212;
    color: var(--white);
}

/* Table Type SS */
.table_body .badge{
    font-size: 14px;
    padding: 10px 15px!important;
    border-radius: 50px;
    font-weight: 400;
}
.table_body .badges{
    display: inline-flex;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 50px;
}

.table_body .badges.bg_transparent_success{
    color: #10940D;
    background: rgba(16, 148, 13, 0.10);
}


.table_body .badge.text-bg-success{
    background: #10940D!important;
    border-color: #10940D!important;
}
.table_type_oo .table_head,
.table_type_ss .table_head{
    background: var(--black);
    font-size: 16px;
    font-weight: bold;
    border-radius: 15px;
    color: var(--white);
    padding: 15px 20px;
}
.table_type_ss .table_body{
    font-size: 16px;
    font-weight: 400;
    color: var(--black);
}
.table_type_oo .table_body .table_row,
.table_type_ss .table_body .table_row{
    padding: 15px 15px;
    border-bottom: 0.75px solid #f1f1f1;
}
.table_type_oo .table_body .table_row:last-child,
.table_type_ss .table_body .table_row:last-child{
    border: none;
}

.table_type_ss .table_body .table_row,
.table_type_ss .table_head .table_row{
    display: grid;
    grid-template-columns: 1fr 40% 1fr 1fr 1fr;
    gap: 8px;
}

.update_table_card .table_type_ss .table_body .table_row,
.update_table_card .table_type_ss .table_head .table_row{
    grid-template-columns: 50% 20% 1fr;
}

.service_tables{
    margin-bottom: 25px;
}
.service_tables .table_type_ss .table_body .table_row,
.service_tables  .table_type_ss .table_head .table_row{
    display: grid;
    grid-template-columns: 100px 40% repeat(4,1fr);
    gap: 8px;
}

.table_type_oo .table_body .table_row,
.table_type_oo .table_head .table_row{
    display: grid;
    grid-template-columns: 100px 32% repeat(2, 1fr) 20% repeat(2, 1fr);
    grid-gap: 10px;
}
.table_type_oo .table_body .table_row div:first-child,
.table_type_oo .table_head .table_row div:first-child{
    text-align: left;
}

.table_type_oo .table_body .table_row div:last-child,
.table_type_oo .table_head .table_row div:last-child{
    text-align: right;
}

.table_type_oo .table_row .order_link a{
    color: var(--primary-color)!important;
}
.table_type_oo .table_row .order_link a:hover{
    text-decoration: underline!important;
}

.badges.order_status{
    font-size: 16px;
    background: rgb(232, 232, 232);
}
.badges.order_status{
    display: inline-flex;
    gap: 3px;
    border: 0.8px solid rgba(42, 42, 42, 0.2);
}

.badges.order_status .icon{
    width: 25px;
    height: 25px;
    display: flex;
    font-size: 22px;
    align-items: center;
}

.badges.order_status.in_progress{
    border: 0.8px solid rgba(16, 148, 13, 0.20);
    background: rgba(16, 148, 13, 0.10);
    color:#10940D;
}
.badges.order_status.pending{
    border: 0.8px solid rgba(13, 83, 148, 0.2);
    background: rgba(13, 83, 148, 0.10);
    color:rgb(13, 83, 148);
}
.badges.order_status.canceled{
    border: 0.8px solid rgba(255, 84, 62, 0.20);
    background: rgba(255, 84, 62, 0.10);
    color:#FF543E;
}
.badges.order_status.completed{
    border: 0.8px solid rgba(16, 148, 13, 0.30);
    background: rgba(16, 148, 13, 0.20);
    color:#0d7d0b;
}
.badges.order_status.processing{
    border: 0.8px solid rgba(55, 113, 200, 0.20);
    background: rgba(55, 113, 200, 0.10);    
    color:#3771C8;
}
.badges.order_status.partials{
    border: 0.8px solid rgba(251, 196, 0, 0.20);
    background: rgba(251, 196, 0, 0.10);    
    color:rgb(251, 196, 0);
}
.orders_more:hover,
.orders_more{
    background: var(--primary-color);
    color: var(--white);
    font-size: 16px;
    border-radius: 50px;
    padding: 10px 20px;
}

/* Filter CSS */

.services_filter .card-body{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 25px;
}
.order_filter .card-body{
    display: grid;
    grid-template-columns: 5fr 2fr;
    grid-gap: 25px;
}
.update_filter .card-body{
    display: grid;
    grid-gap: 25px;
    grid-template-columns: 2fr 1fr;
}
.order_filter .card-body .search,
.update_filter .card-body .search,
.services_filter .card-body .search{
    position: relative;
}
.order_filter .card-body .search .form-control,
.update_filter .card-body .search .form-control,
.services_filter .card-body .search .form-control{
    border-radius: 25px;
    border: 1px solid #DFDFE6;
    background:  #FCFCFD;
    height: 50px;
    padding-left: 40px;
}
.order_filter .card-body .search .search_btn,
.update_filter .card-body .search .search_btn,
.services_filter .card-body .search .search_btn{
    position: absolute;
    background: none;
    border: none;
    font-size: 25px;
    top: 8px;
    left: 5px;
    color: var(--black-paragraph);
}
.orders_menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.orders_menu .orders_btn{
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px 20px;
    height: 50px;
    font-size: 16px;
    border-radius: 50px;
    color: var(--black);
    border: 1px solid #D9D9D9;
    background: #FCFCFD;
    transition: 0.5s ease;
}
.orders_menu .orders_btn:hover,
.orders_menu .orders_btn.active{
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}
.orders_menu .orders_btn .icon{
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 25px;
}

.btn__filter{
    font-size: 18px;
    font-weight: 500;
    color: var(--black-paragraph);
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #FCFCFD!important;
    border: 1px solid rgba(217, 217, 217, 0.50);
    border-radius: 50px;
    padding-left: 15px;
    padding-right: 15px;
    justify-content: space-between;
}

.btn__filter:focus{
    border-color: var(--black);
}

.btn__filter .icon{
    position: relative;
    top: 3px;
    font-size: 28px;
}
.btn__filter .left{
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn__filter::after{
    display: none;
}
.select2-container .dropdown-menu > li > a {
    border-bottom: 1px solid #ddd;
    padding: 5px 13px;
}
/*
*
************************
* Responsive area
*************************
*/

@media only screen and (max-width: 1200px) {
    
}

@media only screen and (max-width:992px) {
    #banner {
        padding: 70px 0px;
    }
    .signup h1,
    #banner .banner_content h1{
        font-size: 30px;
    }
    p{
        font-size: 14px;
        line-height: 20px;
    }
    #banner .banner_img .like_icon {
        top: -46px;
        right: 160px;
    }
    #banner .banner_img .youtube_icon {
        right: 170px;
        bottom: -17px;
    }
    #banner .banner_img .ig_icon {
        bottom: -30px;
        right: -32px;
    }
    #loginarea {
        padding: 40px 0px;
    }
    .card.login_card .card-body {
        padding: 30px 20px;
    }
    .login_top{
        gap: 10px;
        grid-template-columns: 1fr 1fr 185px;
    }
    .section_title h4 {
        font-size: 18px;
    }    
    .section_title h2{
        font-size: 30px;
    }
    .section_title p{
        font-size: 14px;
    }
    #whychoose .why_choose_cont_wrap .why_item{
        gap: 10px;
    }
    #benifits .main_box{
        height: 250px;
    }
    #benifits .main_box .box__cont p{
        width: 100%;
    }
    #benifits .main_box .box__cont h3{
        font-size: 23px;
        margin-bottom: 10px;
    }
    .testimonials_slide_wrap .textimonial_item{
        width: 90%;
        margin: 0 auto;
    }
    .testimonials_slide_wrap .textimonial_item .testi_txt{
        width: 95%;
    }
    #whychoose .why_choose_cont_wrap{
        gap: 5px;
    }
    #faq .faq_box .accordion .accordion-item .accordion-header, #faq .faq_box .accordion .accordion-item .accordion-header button{
        font-size: 18px;
    }
    #faq .faq_box{
        padding: 15px;
    }
    #faq .faq_box .accordion .accordion-item{
        margin-bottom: 0px;
    }
    #faq .faq_box .accordion .accordion-item:last-child{
        border-bottom: none;
    }
    .footer_info p{
        width: 100%;
    }
    .footer_menu{
        text-align: center;
    }
    .footer_menu.footer_2{
        text-align: right;
    }
    #welcomeBanner .card.welcome p{
        width: 60%;
    }
    .auth_main{
        margin-bottom: 30px;
    }
    .cos_wraper{
        grid-template-columns: repeat(3, 1fr);
    }
    .cos_wraper.affiliate_cos{
        grid-template-columns: repeat(2, 1fr);
    }
    .xos_item .xos_icon, .cos_wraper .cos_item .cos_icon{
        width: 50px;
        height: 50px;
    }
    .cos_wraper .cos_item h3{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0;
    }
    .api_items_wrap {
        grid-template-columns: repeat(3,1fr);
    }
    .cos_wraper.addfund{
        grid-template-columns: 1fr 1fr 0fr 1fr;
    }
    .table_type_ss .table_body .table_row,
    .table_type_ss .table_head .table_row{
        display: grid;
        grid-template-columns: 50px 200px repeat(3, 1fr);
        gap: 8px;
    }
    .card.service_tables,
    .card.service_tables .card-body{
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
    }

    .service_tables  .table_type_ss .table_head{
        display: none;
    }

    .table_body .table_row .serv_id{
        grid-area: servId;
        color: var(--black-paragraph);
        font-weight: 500;
    }
    .table_body .table_row .serv_id::before{
        content: 'ID: ';
    }
    .table_body .table_row .serv_name{
        grid-area: servName;
        font-size: 18px;
        font-weight: 500;
        color: var(--black);
        margin-bottom: 15px;
    }
    .table_body .table_row .serv_rate{
        grid-area: servRate;
        padding-top: 40px;
        position: relative;
    }
    .table_body .table_row .serv_rate::before{
        content: 'Per 1000';
        position: absolute;
        top: 0px;
        color: var(--black-paragraph);
    }
    .table_body .table_row .serv_min{
        grid-area: servMin;
        padding-top: 30px;
        position: relative;
    }
    .table_body .table_row .serv_min::before{
        content: 'Min';
        position: absolute;
        top: 0px;
        color: var(--black-paragraph);
    }
    .table_body .table_row .serv_max{
        grid-area: servMax;
        padding-top: 30px;
        position: relative;
    }
    .table_body .table_row .serv_max::before{
        content: 'Max';
        position: absolute;
        top: 0px;
        color: var(--black-paragraph);
    }
    .table_body .table_row .serv_action{
        grid-area: servAction;
    }
    .table_body .table_row .serv_action > .btn{
        width: 100%;
        margin-top: 10px;
        padding: 12px 0px!important;
        height: auto;
    }
    .service_tables .table_type_ss .table_body .table_row{
        background: var(--white);
        border: 1px solid #ddd;
        margin-bottom: 20px;
        border-radius: 15px;
    }
    .service_tables .table_type_ss .table_body .table_row{
        border: 0.5px solid rgba(217, 217, 217, 0.50)!important;
        background: #FFF;
        padding-top: 15px!important;
        grid-row-gap: 30px;
        align-items: center;
        box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
        margin-bottom: 15px;
        grid-template-columns: inherit;
        grid-template-areas: 
        'servId servId servId servId servId servId'
        'servName servName servName servName servName servName'
        'servRate servRate servMin servMin servMax servMax'
        'servAction servAction servAction servAction servAction servAction';
        gap: 8px;
    }
    .card.orders_card .card-body,
    .card.orders_card{
        background: none;
        border: none;
        box-shadow: none;
        padding: 0px!important;
    }
    .card.orders_card .table_type_oo .table_head{
        display: none;
    }
    .table_type_oo .table_row .order_id,
    .table_type_oo .table_row .order_link,
    .table_type_oo .table_row .charge,
    .table_type_oo .table_row .quantity,
    .table_type_oo .table_row .services,
    .table_type_oo .table_row .status,
    .table_type_oo .table_row .action{
        position: relative;
    }
    .table_type_oo .table_row .order_id{
        width: 100%;
        grid-area: order_id;
    }
    .table_type_oo .table_row .order_id::before{
        content: 'Order ID : ';
    }
    .table_type_oo .table_row .order_link{
        grid-area: order_link;
        margin-bottom: 10px;
    }
    .table_type_oo .table_row .order_link::before{
        content: 'Link';
        position: absolute;
        top: -30px;
        font-weight: 500;
        color: var(--black-paragraph);
    }
    .table_type_oo .table_row .charge{
        grid-area: order_charge;
    }
    .table_type_oo .table_row .charge::before{
        content: 'Charges';
        position: absolute;
        top: -37px;
        font-weight: 500;
        color: var(--black-paragraph);
    }
    .table_type_oo .table_row .quantity{
        grid-area: order_quantity;
    }
    .table_type_oo .table_row .quantity::before{
        content: 'Qantity';
        position: absolute;
        top: -30px;
        font-weight: 500;
        color: var(--black-paragraph);
    }
    .table_type_oo .table_row .services{
        grid-area: order_services;
    }
    .table_type_oo .table_row .services::before{
        content: 'Services';
        position: absolute;
        top: -30px;
        font-weight: 500;
        color: var(--black-paragraph);
    }
    .table_type_oo .table_row .status{
        grid-area: order_status;
    }
    .table_type_oo .table_row .status::before{
        content: 'Status';
        position: absolute;
        top: -30px;
        font-weight: 500;
        color: var(--black-paragraph);
    }

    .table_type_oo .table_row .action{
        grid-area: order_action;
    }

    .table_type_oo .table_row .action .orders_more {
        width: 100%;
        height: 47px;
        text-align: center;
    }

    .table_type_oo .table_body .table_row{
        border: 0.5px solid rgba(217, 217, 217, 0.50)!important;
        background: #FFF;
        padding-top: 15px!important;
        grid-row-gap: 40px;
        align-items: center;
        box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
        margin-bottom: 15px;
        grid-template-columns: inherit;
        border-radius: 10px;
        grid-template-areas: 
        'order_id order_id order_id order_id order_id order_id'
        'order_link order_link order_link order_link order_link order_link'
        'order_charge  order_charge order_quantity  order_quantity order_status order_status '
        'order_services order_services order_services order_services order_action order_action';
    }
    .table_type_oo .table_row .charge.refill_date::before{
        content: 'Date'!important;
    }
    .table_type_oo .table_row .quantity.refill_order_id::before{
        content: 'Service Id'!important;
    }
    .table_body .table_row .serv_id{
        position: relative;
    }

    .table_body .table_row .serv_id .favs{
        position: absolute;
        right: 0px;
        font-size: 20px;
    }
}
@media only screen and (max-width:768px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        --bs-gutter-x: 2.5rem;
    }
    .signup p,
    p{
        font-size: 14px;
        line-height: 20px;
    }
    .navbar .nav-logo {
        width: 130px;
        min-width: 130px;
    }
    .section_title h4{
        font-size: 18px;
        margin-bottom: 5px;
    }
    .section_title h2{
        font-size: 28px;
    }
    .section_title p{
        width: 100%;
        font-size: 14px;
    }
    .section_title p > br{
        display: none;
    }
    .section_title {
        margin-bottom: 35px;
    }
    #banner{
        padding: 50px 0px;
    }
    .signup h1,
    #banner .banner_content h1{
        font-size: 28px;
        letter-spacing: -0.72px;
    }
    #banner .banner_cta{
        flex-direction: column;
        gap: 20px;
    }
    #banner .banner_cta > .btn-primary{
        width: 100%;
    }
    #banner .banner_cta{
        margin-bottom: 20px;
    }
    
    #banner .banner_img{
        margin: 30px;
    }
    #banner .banner_img .main_img{
        left: -15px;
    }
    #banner .banner_img .like_icon{
        top: -44px;
        right: 172px;
        z-index: 1;
    }
    
    #banner .banner_img .tik_icon{
        top: -45px;
        right: -40px;
        z-index: 1;
    }
    
    #banner .banner_img .youtube_icon{
        right: 172px;
        bottom: -26px;
        z-index: 1;
    }
    
    #banner .banner_img .ig_icon{
        bottom: -44px;
        right: -13px;
        z-index: 1;
    } 

    .card.login_card .card-body{
        padding: 16px 20px;
    }
    #whychoose,
    #loginarea {
        padding: 40px 0px;
    }

    .login_top{
        grid-template-columns: 1fr;
        gap: 0px;
    }
    .phone_d-block{
        display: block;
    }
    .phone_d-none,
    .login_top > div:last-child{
        display: none;
    }

    .card.login_card .sign_box_title h3{
        font-size: 18px;
    }

    .login_bottom{
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
    }
    .forgot_link{
        display: block;
        text-align: right;
    }
    #whychoose .row.d-flex{
        flex-direction: column-reverse;
    }
    .why_ch_main{
        margin-bottom: 20px;
    }
    #whychoose .why_choose_cont_wrap .why_item .why_cont h3{
        font-size: 16px;
        margin-bottom: 8px;
    }
    #whychoose .why_choose_cont_wrap .why_item .why_cont p{
        font-size: 14px;
    }
    #whychoose .why_choose_cont_wrap{
        gap: 15px;
    }
    #benifits .main_box{
        height: 200px;
    }
    #benifits .main_box .box__cont h3{
        font-size: 24px;
        margin-bottom: 15px;
    }
    #benifits .main_box .box__cont p{
        width: 100%;
    }
    .cta_wrap{
       flex-direction: column;
       gap: 15px!important;
    }
    .cta_wrap > .btn-primary{
        width: 100%;
    }
    .testimonials_slide_wrap .textimonial_item {
        width: 95%;
        margin: 0 auto;
    }
    .testimonials_slide_wrap::after{
        display: none;
    }
    .testimonials_slide_wrap .textimonial_item .testi_txt{
        margin-top: 15px;
        width: 100%;
    }
    .testimonials_slide_wrap {
        padding-bottom: 70px;
    }
    #faq .faq_box{
        padding: 10px;
        border-radius: 10px;
    }
    #faq .faq_box .accordion .accordion-item .accordion-header, #faq .faq_box .accordion .accordion-item .accordion-header button{
        font-size: 14px;
    }
    #faq .faq_box .accordion .accordion-item{
        margin-bottom: 0;
    }
    #faq .faq_box .accordion .accordion-item:last-child{
        border: none;
    }
    .accordion-body{
        padding-top: 0;
    }
    .footer_info p{
        width: 100%;
    }
    .footer_2{
        text-align: right;
    }
    .bottom_foo_menu{
        flex-direction: column;
    }
    .bottom_foo_menu span{
        display: none;
    }
    .copyright_text{
        margin-top: 10px;
        text-align: center!important;
    }
    .footer_menu{
        text-align: left;
    }
    .auth_main{
        margin-bottom: 30px;
    }
    .api_items_wrap {
        grid-template-columns: repeat(3,1fr);
    }
    .card.update_table_card,
    .card.update_table_card .card-body,
    .card.add_fund_table_card .card-body,
    .card.add_fund_table_card{
        background: none;
        border: none;
        padding: 0;
    }
    .table_type_ss .table_head{
        display: none;
    }
    .cos_wraper.addfund{
        grid-template-columns: 1fr;
    }
    .width-100-mob{
        width: 100%;
    }
    .d-sm-none{
        display: none!important;
    }
    .table_type_ss .table_body .table_row .service,
    .table_type_ss .table_body .table_row .date,
    .table_type_ss .table_body .table_row .update,
    .table_type_ss .table_body .table_row .id,
    .table_type_ss .table_body .table_row .name,
    .table_type_ss .table_body .table_row .rates,
    .table_type_ss .table_body .table_row .time,
    .table_type_ss .table_body .table_row .status{
        padding-top: 10px;
        position: relative;
    }
    .table_type_ss .table_body .table_row .id{
        grid-area: id;
    }
    .table_type_ss .table_body .table_row .id::before{
        content: '#';
        position: absolute;
        top: -15px;
        color: var(--black-paragraph);
    }
    .table_type_ss .table_body .table_row .name{
        grid-area: name;
    }
    .table_type_ss .table_body .table_row .name::before{
        content: 'Payment Method';
        position: absolute;
        top: -15px;
        color: var(--black-paragraph);
    }
    .table_type_ss .table_body .table_row .rates{
        grid-area: rates;
    }
    .table_type_ss .table_body .table_row .rates::before{
        content: 'Amount';
        position: absolute;
        top: -18px;
        color: var(--black-paragraph);
    }
    .table_type_ss .table_body .table_row .time{
        grid-area: time;
    }
    .table_type_ss .table_body .table_row .time::before{
        content: 'Date';
        position: absolute;
        top: -18px;
        color: var(--black-paragraph);
    }
    .table_type_ss .table_body .table_row .status{
        grid-area: status;
    }
    .table_type_ss .table_body .table_row .status::before{
        content: 'Status';
        position: absolute;
        top: -18px;
        color: var(--black-paragraph);
    }

    .table_type_ss .table_body .table_row .service{
        grid-area: services;
    }
    .table_type_ss .table_body .table_row .service::before{
        content: 'Service Name';
        position: absolute;
        top: -15px;
        color: var(--black-paragraph);
    }

    .table_type_ss .table_body .table_row .date{
        grid-area: date;
    }
    .table_type_ss .table_body .table_row .date::before{
        content: 'Date';
        position: absolute;
        top: -15px;
        color: var(--black-paragraph);
    }

    .table_type_ss .table_body .table_row .update{
        grid-area: update;
    }

    .table_type_ss .table_body .table_row .update::before{
        content: 'Update';
        position: absolute;
        top: -15px;
        color: var(--black-paragraph);
    }

    .table_type_ss .table_body .table_row{
        border-radius: 10px;
        border: 0.5px solid rgba(217, 217, 217, 0.50)!important;
        background: #FFF;
        grid-row-gap: 30px;
        align-items: center;
        box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
        margin-bottom: 15px;
        padding-top: 30px;
        grid-template-columns:inherit;
        grid-template-areas:
        'id name name name name name'
        'time time rates rates  status status';
    }

   .update_table_card .table_type_ss .table_body .table_row{
        border-radius: 10px;
        border: 0.5px solid rgba(217, 217, 217, 0.50)!important;
        background: #FFF;
        grid-row-gap: 30px;
        align-items: center;
        box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.06);
        margin-bottom: 15px;
        padding-top: 30px;
        grid-template-columns:inherit;
        grid-template-areas:
        'services services services services services services'
        'date date update update  update update';
    }

    .table_type_oo .table_body .table_row{
        grid-template-areas: 
        'order_id order_id order_id order_id order_id order_id'
        'order_link order_link order_link order_link order_link order_link'
        'order_charge  order_charge order_charge order_quantity  order_quantity  order_quantity '
        'order_services order_services order_services  order_services order_services order_services'
        'order_status order_status order_status  order_action order_action order_action';
    }
    .order_filter .card-body{
        grid-template-columns: 1fr;
    }
    .orders_menu .orders_btn{
        font-size: 16px;
        padding: 8px 15px;
    }
    .orders_menu .orders_btn .icon{
        width: 16px;
        height: 16px;
        font-size: 16px;
    }
    .order_filter .card-body .search .form-control, .update_filter .card-body .search .form-control, .services_filter .card-body .search .form-control{
        padding-left: 40px;
        -webkit-padding-start: 40px;
    }
    #banner,
    #login,
    #whychoose,
    #benifits,
    #testimonials,
    #faq{
        overflow-x: hidden;
    }
}

@media only screen and (max-width:550px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        --bs-gutter-x: 2.5rem;
    }
    p{
        font-size: 14px;
        line-height: 20px;
    }
    .navbar .nav-logo {
        width: 130px;
        min-width: 130px;
    }
    .section_title h4{
        font-size: 18px;
        margin-bottom: 5px;
    }
    .signup h1,
    .section_title h2{
        font-size: 28px;
    }
    .section_title p{
        width: 100%;
        font-size: 14px;
    }
    .section_title p > br{
        display: none;
    }
    .section_title {
        margin-bottom: 35px;
    }
    #banner{
        padding: 50px 0px;
    }
    
    #banner .banner_content h1{
        font-size: 28px;
        letter-spacing: -0.72px;
    }
    #banner .banner_cta{
        flex-direction: column;
        gap: 20px;
    }
    #banner .banner_cta > .btn-primary{
        width: 100%;
    }
    #banner .banner_cta{
        margin-bottom: 20px;
    }
    
    #banner .banner_img{
        margin: 30px;
    }
    #banner .banner_img .main_img{
        left: -15px;
    }
    #banner .banner_img .like_icon{
        top: -44px;
        right: 172px;
        z-index: 1;
    }
    
    #banner .banner_img .tik_icon{
        top: -45px;
        right: -40px;
        z-index: 1;
    }
    
    #banner .banner_img .youtube_icon{
        right: 172px;
        bottom: -26px;
        z-index: 1;
    }
    
    #banner .banner_img .ig_icon{
        bottom: -44px;
        right: -13px;
        z-index: 1;
    } 

    .card.login_card .card-body{
        padding: 16px 20px;
    }
    #whychoose,
    #loginarea {
        padding: 40px 0px;
    }

    .login_top{
        grid-template-columns: 1fr;
        gap: 0px;
    }
    .phone_d-block{
        display: block;
    }
    .phone_d-none,
    .login_top > div:last-child{
        display: none;
    }

    .card.login_card .sign_box_title h3{
        font-size: 18px;
    }

    .login_bottom{
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
    }
    .forgot_link{
        display: block;
        text-align: right;
    }
    #whychoose .row.d-flex{
        flex-direction: column-reverse;
    }
    .why_ch_main{
        margin-bottom: 20px;
    }
    #whychoose .why_choose_cont_wrap .why_item .why_cont h3{
        font-size: 16px;
        margin-bottom: 8px;
    }
    #whychoose .why_choose_cont_wrap .why_item .why_cont p{
        font-size: 14px;
    }
    #whychoose .why_choose_cont_wrap{
        gap: 15px;
    }
    #benifits .main_box{
        height: 200px;
    }
    #benifits .main_box .box__cont h3{
        font-size: 24px;
        margin-bottom: 15px;
    }
    #benifits .main_box .box__cont p{
        width: 100%;
    }
    .cta_wrap{
       flex-direction: column;
       gap: 15px!important;
    }
    .cta_wrap > .btn-primary{
        width: 100%;
    }
    .testimonials_slide_wrap .textimonial_item {
        width: 95%;
        margin: 0 auto;
    }
    .testimonials_slide_wrap::after{
        display: none;
    }
    .testimonials_slide_wrap .textimonial_item .testi_txt{
        margin-top: 15px;
        width: 100%;
    }
    .testimonials_slide_wrap {
        padding-bottom: 70px;
    }
    #faq .faq_box{
        padding: 10px;
        border-radius: 10px;
    }
    #faq .faq_box .accordion .accordion-item .accordion-header, #faq .faq_box .accordion .accordion-item .accordion-header button{
        font-size: 14px;
    }
    #faq .faq_box .accordion .accordion-item{
        margin-bottom: 0;
    }
    #faq .faq_box .accordion .accordion-item:last-child{
        border: none;
    }
    .accordion-body{
        padding-top: 0;
    }
    .footer_info p{
        width: 100%;
    }
    .footer_2{
        text-align: right;
    }
    .bottom_foo_menu{
        flex-direction: column;
    }
    .bottom_foo_menu span{
        display: none;
    }
    .copyright_text{
        margin-top: 10px;
        text-align: center!important;
    }
    #signup .signup{
        padding: 20px 10px;
    }
    .input_icon_wrap .form-control{
        border-radius: 18px;
    }
    .dash_menu .dash_m_right .users .info{
        display: none;
    }
    #welcomeBanner .card.welcome .model{
        display: none;
    }
    #welcomeBanner .card.welcome p{
        width: 100%;
    }
    #welcomeBanner .card.welcome{
        padding: 8px;
    }
    .dash_menu{
        height: 65px;
    }
    .dash_menu .dash_m_left h3 {
        font-size: 18px;
    }
    .sidebar_user .user_av_icon, .dash_menu .dash_m_right .users .user_av_icon{
        width: 40px;
        height: 40px;
    }
    #welcomeBanner {
        margin-top: 20px;
    }
    #welcomeBanner .card.welcome{
        min-height: 120px;
    }
    h4,
    #welcomeBanner .card.welcome h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    #welcomeBanner .card.welcome p{
        font-size: 14px;
    }
    .cos_wraper{
        grid-template-columns: 1fr;
        gap: 0px;
    }
    .xos_item, .cos_wraper .cos_item{
        gap: 10px;
    }
    .xos_item .xos_icon, .cos_wraper .cos_item .cos_icon{
        width: 40px;
        height: 40px;
    }
    .cos_wraper .cos_item h5{
        font-size: 14px;
    }
    .cos_wraper .cos_item{
        margin-top: 15px;
    }
    .cos_wraper .cos_item h3{
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 0;
    }
    .xos_item .xos_txt h4{
        font-size: 16px;
    }
    .filter_btn_wraper .filter_btn{
        gap: 5px;
    }
    .filter_btn_wraper .filter_btn{
        padding: 8px 10px;
    }
    .card .card-body {
        padding: 15px 15px;
    }
    .auth_main{
        margin-bottom: 80px;
    }
    .form-group label,
    .mb-3 label{
        font-size: 15px;
        margin-bottom: 7px;
    }
    /* bottom menu */
    .mobile_bottom_menu{
        display: block;
        width: 100%;
        height: 70px;
        position: fixed;
        bottom: 0;
        background: var(--white);
        z-index: 99;
        padding-top: 10px;
        border-top: .75px solid #ddd;
    }

    .mobile_bottom_menu .container-fluid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
    .mobile_bottom_menu .container-fluid .menu_item{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .mobile_bottom_menu .container-fluid .menu_item .icon{
        font-size: 22px;
        height: 20px;
        margin-bottom: 3px;
        color: var(--black-paragraph);
    }
    .mobile_bottom_menu .container-fluid .menu_item .txt{
        font-size: 14px;
        font-weight: 500;
        color: var(--black-paragraph);
    }
    .mobile_bottom_menu .container-fluid .menu_item.active .txt,
    .mobile_bottom_menu .container-fluid .menu_item.active .icon{
        color: var(--primary-color);
    }
    .services_des h6{
        font-size: 14px;
        text-align: center;
    }
    .services_des .serv_box{
        padding: 10px 13px;
        font-size: 16px;
    }
    .services_des .serv_box{
        font-size: 14px;
    }
    .xx_item {
        padding: 25px 12px;
    }
    .gg_item h4, .xx_item h4{
        font-size: 14px;
    }
    .gg_item h6, .xx_item h6 {
        font-size: 12px;
        margin-bottom: 5px!important;
    }
    .message-box.message_user{
        grid-template-columns: 1fr 11fr;
    }
    .message-box.message_admin{
        grid-template-columns: 11fr 1fr;
    }
    .api_items_wrap {
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }
    .services_filter .card-body{
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .update_filter .card-body{
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
}