

body{
    margin: 0px;
    padding: 0px;
}

.brand h1 a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 28px;
}
img.logo {
    width: 18px;
    margin-right: 4px;
}

.brand h1 a span {
    color: #dfcc06;
}


.contaner {
    width: 60%;
    margin: 0px auto;
    background: radial-gradient(white, #d1d1d1);
}


.top_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
    padding: 11px 8px;
    position: fixed;
    left: 0;
    z-index: 1000;
    right: 0;
    top: 0;
    width: 100%;
}

.nav_link ul {
    display: flex;
    list-style: none;
    margin: 0px 0px;
}

.nav_link > ul li {
    margin: 0px 5px;
}

.nav_link > ul li a {
    text-decoration: none;
    color: white;
    font-family: sans-serif;
    font-size: 15px;
}

.brand h1 {
    font-family: sans-serif;
    margin: 0px 0px;
    color: #f5ec06;
}


.bottom_nav {
    display: flex;
    justify-content: space-between;
    padding: 10.5px 10px;
    background: black;
    align-items: center;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1000;
    top: 0;
    width: 60%;
    margin: auto;
}


.new_empty_div {height: 54px;}

.search {
    width: 100%;
    margin: 0px 7px;
    background: white;
    border-radius: 51px;
    padding: 0px 4px;
}


.search_form_div {
    display: flex;
    width: 100%;

}


.input_div {
    width: 100%;
}


.input_div input {
    width: 100%;
    border: none;
    height: 33px;
    padding: 0px 3px;
    background: none;
}


.input_div input:focus {
  
    outline: none;
}



.search_btn button {
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0px 5px;
}

.back a {
    color: #ffffff;
}



.city select {
    width: 44px;
    border: navajowhite;
    background: black;
    color: white;
}


.empty_div {
    height: 38px;
}
.category_div {
    background: #000000de;
    padding: 9px 0px;
    display: flex;
    align-items: center;
    position: fixed;
    justify-content: center;
    z-index:20;
    left: 0;
    right: 0;
}
.directory_link > a {
    text-decoration: none;
    color: #e9c511;
    padding: 0px 7px 0px 5px;
}

.link_div::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
.link_div {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }


.link_div {
    display: flex;
    overflow-x: scroll;
  
    
}


.link_div div {
    margin: 0px 10px;
}


.category_active{
    color: #fff700 !important;
}

.link_div div a {
    white-space: nowrap;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 16px;
    color:#d9d9d9;
}


/* card css  */


.sigle_card {

    height: 100%;
    /* background: #4e504f; */

}

.cate_title h3 {
    font-family: sans-serif;
}


footer {
    /* padding: 26px 6px 0px 6px; */
    border-bottom: 5px solid #e9c511;
   
}

.sponsers {
    display: flex;
    justify-content: center;
    padding: 20px 10px;
    width: auto !important;
}


.sponsers div {
    width: 100%;
}




.sponsers div img {
    width: 100%;
    background: white;
}


.coyprigth {
    display: flex;
    justify-content: space-between;
    /* margin: 18px 0px 0px 0px; */
    background: black;
    padding: 8px 5px;
    align-items: center;
}


.copyriht_text p {
    margin: 1px 0px;
    font-family: sans-serif;
    font-size: 12px;
    color: #d9d9d9;
}


.social_links {
    display: flex;
    align-items: center;
}

.social_links div a {
    padding: 2px 4px;
    font-size: 22px;
}


.slider_div {
   
        padding: 0px 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
        grid-auto-rows: minmax(100px, auto);
  
    
}


.img_div > a > img {
    width: 100%;
    height: 100%;
}



/* end card css  */




.front-side {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2% 96% 2%;
  grid-template-rows: 4% 92% 4%;
  position: relative;
  /* margin: 20px auto; */
  overflow: hidden;
  background: radial-gradient(white , white , #c1c1c1);

  /* background-image: url(/img/bg.png); */
  /* background: radial-gradient(#404040, black); */
  background-size: 100% 100%;
  position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    transition: 0.6s;
    animation: 2s rotatecard infinite;
    
}

.main_logo img {
    width: 95px !important;
    height: 95px;
    border-radius: 100%;
    transform: scale(0);
    transition: 550ms;
    object-fit: contain;
}



.center_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main_logo {
    padding: 10px;
    border-radius: 100%;
    display: flex;
    transition: 450ms;
    
}


svg.r_top {
    position: absolute;
    right: 20px;
    top: 60px;
    transform: rotateY(180deg);
    transition: 500ms;
}

svg.l_bottom {
    position: absolute;
    transform: rotateX(180deg);
    left: 20px;
    bottom: 60px;
    transition: 500ms;
}

svg.r_bottom {
    position: absolute;
    transform: rotate(180deg);
    right: 20px;
    bottom: 60px;
    transition: 500ms;
}

svg.l_top {
    position: absolute;
    left: 20px;
    top: 60px;
    transition: 500ms;
}



p.msg-success {
    background: #00ff0826;
    padding: 15px 9px;
    color: #2e8b07;
    font-family: sans-serif;
}


p.msg-error {
    background: #ff000026;
    padding: 15px 9px;
    color: #8b0707;
    font-family: sans-serif;
}



.bottom_navbar {
    display: none;
    padding: 10px 0px;
    background: #000000;
    position: fixed;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 2;
    box-shadow: 0px 6px 37px 2px #525252;
}

.bottom_link_div {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.bottom_link_div a {
    color:#d9d9d9;
    font-size: 14px;
}

.Card_add_link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Card_add_link a {
    font-size: 26px;
    color: #000000;
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    position: absolute;
    bottom: 26px;
    background: #ffffff;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    border: 4px solid #e9c511;
}

.bottom_link_div > div {
    width: 100%;
}

small.icon_title {
    display: block;
    text-align: center;
    color: #afafaf;
    font-size: 11px;
    font-family: sans-serif;
    white-space: nowrap;
}



.Card_add_link small {
    margin-top: 19px;
   
}


.cate_title > h3 {
    text-transform: uppercase;
}

.cate_title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
}

/* .cate_title > div a {
    color: #626262;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
} */


.number_count_container {
    background: #000000;
    padding: 16px;
    margin: 46px 0px;
}

.main_number_count_container {
    display: flex;
    justify-content: center;
    align-items: center;
}


.single_count {
    margin: 0px 5px;
    text-align: center;
    font-family: sans-serif;
    background: #3e3e3e;
    width: 175px;
    padding: 23px 4px;
    border-radius: 10px;
}

.counter_number > h2 {
    margin: 3px 0px;
    font-size: 33px;
    color: #fffb00;
}

.counter_title {
    font-size: 15px;
    color: white;
    text-transform: uppercase;
}




.comment_View_modals {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 70000;
    background: #000000c9;
    height: 100%;
    transform: scale(0);
}

.comment_modal_row {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    transition: 500ms;
}

.comment_inner_modal {
    display: flex;
    width: 940px;
    height: 600px;
}



.comment_post_slider {
    width: 65%;
    
    background: black;
}

.all_side_comment_box {
    width: 35%;
    background: white;
    padding: 10px 13px;
}





.comment_View_modals .comment_inp_inner {
    position: absolute;
    right: 7px;
    width: 33%;
    bottom: 12px;
}


.comment_modal_slider_owl {
    height: 100%;
}


.comment_single_post {
    height: 600px;
}

.comment_View_modals .post__media {
    height: 600px;
    object-fit: cover;

}



.commnet_modal_close_btn {
    position: absolute;
    z-index: 4;
}

button#comment_close_btn {
    background: #0000006b;
    border: none;
    padding: 5px;
    font-size: 17px;
    color: #e6e6e6;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    margin: 10px 0px;
    cursor: pointer;
}


.comment_View_modals .modal_comment_list_show {
    margin: 45px 0px;
}



.comment_header_user_profile_icon {
    display: flex;
    align-items: center;
}

.comment_user_icon_div > img {
    height: 35px;
    object-fit: cover;
    border-radius: 36px;
    border: 1px solid #9f9f9f;
}

.comment_header_rigth_user_detais {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 7px;
    width: 100%;
}

.comment_profile_yellow_star_div > img {
    width: 15px;
    height: 15px;
}

.comment_user_profile_name {
    display: flex;
    align-items: center;
}

p.comment_user_profile_name_text {
    margin-right: 2px;
    font-weight: bold;
}

.posted_date_in_comment_modals {
    font-size: 11px;
}

.side_comment_header_box {
    position: fixed;
    background: white;
    width: 31%;
    top: 0;
}


.comment_is_off_msg {
    font-size: 19px;
    color: #9b9b9b;
}

.comment_is_off {
    text-align: center;
    margin: 120px 1px;
}

.city {
    display: flex;
    align-items: center;
}

.more_option {
    width: 20px;
    text-align: center;
}


.comment_off_icon {
    font-size: 83px;
    color: #d8d8d8;
  }
  

  @media screen and (max-width:780px) {
    .bottom_nav {
        
        position: unset;
        width: auto;
     
    }
    
    
}






@media screen and (max-width:550px){
    .brand h1 a{
        font-size: 21px;
    }
   
    .nav_link > ul li a{
        font-size: 13px;
    }
    .comment_post_slider {
  
      display: none;
    }
  
    .all_side_comment_box {
      width: 100%;
  
  }
  
  .comment_inner_modal {
    display: flex;
    width: 100% !important;
    height: 100vh !important;
  }
  
  
  .comment_modal_row {
    position: unset;
    top: 50%;
    left: 50%;
    transform: translateY(100%) translateX(0%);

  }
  
  .comment_View_modals .comment_inp_inner {
    position: absolute;
    right: 7px;
    width: auto;
    bottom: 8px;
    left: 7px;
  }
  
  
  
  
  .show_not_post_yat {

    height: auto !important;
    margin: 55px 0px;
}

  .side_comment_header_box {
    position: fixed;
    background: white;
    width: -webkit-fill-available;
    top: 0;
    right: 10px;
    left: 10px;
}

.new_empty_div {
    height: 47px;
}
  
  
  }
  




@media screen and (max-width:1080px) {
    .contaner{
        width: 100%;
    }

    .bottom_navbar {
        display: block !important
    }

    footer {
        
        margin-bottom: 50px;
    }
    
    
}


@media screen and (max-width:650px) {
   
    .link_div {
       
        justify-content: unset;
    }
    
}


@media screen and (max-width:500px) {
   
    .slider_div {
        padding: 0px 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .main_logo img {
        width: 50px !important;
        height: 50px;
    }

    .iso_logo img {
        width: 300px !important;
        
    }

    .main_logo{
        padding: 5px;
    }

    
    
}




