/*******************Page Loading Progreass Bar***************/

#loading {

    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    background-color: #8f8888;
    z-index: 100;
  }
  #loading-image {
    z-index: 100;
    width: 50px;
    height: 20px;
  }

  /* All page width  (e.g., screen width greater than 768px) */
@media screen and (min-width: 1024px) {
    .containe {
      width: 80%; /* Display full size on small screens */
    margin: 0; /* Reset margin */
    padding-left: 20px; /* Add padding to create space on all screens */
     padding-left: 20px; /* Add padding to create space on all screens */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    margin: 0 auto;
    }
  }



@media screen and (min-width: 300px) {
    body{
   padding: 0px;
   margin:0px;
    }
  }

    @media screen and (max-width: 480px) {
  .hide_mobile {
    display: none;
  }


  .notification
  {
    display: none;
  }
  .title_mobile{
    font-size: 13px;



  }
  .subtitle_mobile
  {
    font-size: 15px;
    color: white;
    font-weight: bolder;
  }
}
@media screen and (min-width: 480px) {
  .hide_computer {
    display: none;
  }
}


input[type=text] {

  border: 1px solid black;

}
input[type=text]:focus {

  border: 1px solid black;

}

.borders {

  border: 1px solid black;

  margin-right: 5px;


}


  .changecolor
  {
    font-size: 12px;
    /* line-height: 6px; */
    /* font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    letter-spacing: 0.5px;

  }





  .subCategory
  {
    font-size: 12px; color:#666565;


  }
  .subCategory:hover
  {
     transform: scale(1.05);
     color:#000000;
     text-decoration: none;
     /* font-size: 14px; */


  }

  .chnageFont
  {

    /* font-family:Arial, Helvetica, sans-serif; */
    letter-spacing: 0.6px;
    font-size: 12px;
  }

  .linespace
  {

      line-height: 10%;
      letter-spacing: 1.5px;
      font-size: 14px;
  }
  .unformate
  {
      text-decoration: none;
      color: black;
      text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
      font-size: 20px;
  }
  .cardfomats:hover
  {
    transition: transform .60s; /* Animation */


 margin: 0 auto;
 transform: scale(1.01);
 /* border:2px solid rgb(2, 2, 2); */

  }
/* in side main category */
  ul.striped-list > li:nth-of-type(odd) {
    background-color:rgb(250, 250, 250);
}

.changecolor:hover
{
font-weight: bold;

}

/* Product and services search button  */

.searchBtn {
  float: left;
  width: 10%;
  padding: 5px;
  /* background:red; */
  color: white;
  font-size: 17px;
  border: 0px;
  border-left: none;
  cursor: pointer;
}

.searchBtn:hover {
    border: .3px  black;
  background:rgb(255, 255, 255);

}


/* Search section location icon and city text box  */


.input-icons i {
    position: absolute;
    margin-right:40px;
}

.input-icons {
    width: 100%;
    /* margin-bottom: 10px; */
    margin-right:40px;
}

.icon {
    padding: 10px;
    margin-right:-7px;
}

  .searchCity
  {
    background-color: #f7f2f2;

  }
  a:hover
  {
    text-decoration: none;
    color: black;

  }
  .hideLinkFormatt:hover
  {
    text-decoration: none;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

    color: black;

  }

  .topServiceProvider
  {
    padding: 5px;
    text-decoration: none;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

    color: black;

  }
  .subtitle_mobile
  {
    font-size: 25px;
    color: white;
    font-weight: bolder;
  }

/* star for view listing */
.rating {
  display: inline-block;
  font-size: 0;
}
.star {
  display: inline-block;
  font-size: 25px;
  color: #ccc;
  cursor: pointer;
}
.star.rated {
  color: #f90;
}

/* This is used for scrollbar*/



    .list-container {
  max-height: 400px; /* Set a maximum height for the container */
  overflow-y: scroll; /* Add a vertical scrollbar */
}

.list-group {
  list-style: none; /* Remove the default bullet points */
  padding-left: 0; /* Remove the default padding */
}



.list-group-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a shadow on mouse hover */
}

.list-group-item:first-child {
  border-top-left-radius: 0.25rem; /* Add rounded corners to the first and last list items */
  border-top-right-radius: 0.25rem;
}

.list-group-item:last-child {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

/********************************FIXED SEARCH BOX IN COMPUTER VIEW**************************************** */
     @media screen and (min-width: 1024px) {
    .fixedscroll
    {
     position: relative;
  height: 200px; /* Set the desired height */
  /* overflow: auto; */
  position: sticky;
  top: 60px;

  background-color: #fff; /* Set the desired background color */
  z-index: 1;

        }
    }

    /************************Header Search Box*******************************/
                .HeaderSearchBox {
                    /* display: none; */
            position: sticky;
            margin-top:0px;
            padding-top: 0px;


            /* height: 200px; */
            background-color: #fff;
            z-index: 1;
            /* Initially hide the search box        opacity: 0; */

            transition: opacity 2s; /* Add a smooth transition effect */
            }

            .HeaderSearchBox.show {
            opacity: 1; /* Show the search box when the "show" class is added */
            }



    /************************Body Search Box*******************************/
    .bodySearchBox {


        /* height: 200px; */

        transition: opacity 2s; /* Add a smooth transition effect */
        }

        .bodySearchBox.d-block {
        opacity: 1; /* Show the search box when the "show" class is added */
        }




input#searchServices::placeholder {
   color: var(--placeholder-color);
}


/* Category List every page left side desing  col-4*/
.Category-list-left_-side
  {
    font-size: 12px;
    line-height: 7px;
    /* font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    letter-spacing: 0.6px;
    color:rgb(147, 28, 28);
    /* margin-block-end: 0%; */

  }
/* how Category name every page col-8 */
  .Show-Category-BoxStyle
  {
      width: auto;
      border: 1px solid rgb(154, 154, 154);
      padding: 4px;
      border-radius: 7%;
      margin-top: 5px;
      text-align: center;
      font-size: 14px;
      box-shadow: 1px 1px 5px 1px rgb(241, 242, 243);

  }