/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
 @import url('https://fonts.googleapis.com/css?family=Saira Stencil One&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Dongle&display=swap');

 
.pending{background: #ffc107 !important; color: #000; padding: 1px 9px; border-radius: 10px; font-size: x-small; font-weight: 600;}
.Approved{background: #28a745 !important; color: #fff; padding: 1px 9px; border-radius: 10px; font-size: x-small; font-weight: 600;}



body {
  margin: 0;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #e6e6e6;
  text-decoration: none;}


/* Custom CSS */
  .slide-menu {
    height: 100%;
    width: 0%;
    position: fixed;
    top: 0;
    left: -580px;
    background-color: #007cea;
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 60px;
    z-index: 1000;
  }
  
  .slide-menu a{
    padding: 8px 8px 8px 0px;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    display: block;
    transition: 0.3s;
  }
  
  .slide-menu:hover {
    color: #fff;
  }
  
  .slide-menu .closebtn {
    position: absolute;
    top: 0;
    right: 30px;
    font-size: 36px;
  }
  
  .navbar {
    background-color: #007cea;
    z-index: 999;
  }
  
  .navbar-brand {
    color: #fff;
    padding-bottom : 0px;
    font-family: Saira Stencil One; 
    font-size: 36px;
  }

  .navbar-nav .nav-link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
  }
      @media (max-width: 600px) { .navbar-brand, .navbar-nav .nav-link  { font-size: 28px;}}


  
  .navbar-brand:hover, .navbar-nav .nav-link:hover {
    color: #ddd;
  }

  .websitetitle{
    font-family: pacifico;
    left: 245px;
    position: absolute;
    bottom: 20px;
    font-size: 14px;
    color: #fff;
  }
      @media (max-width: 600px) { .websitetitle  { left: 195px; bottom: 15px; font-size: 12px;}}




  @media (max-width: 600px) {
    .slide-menu {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: -800px;
      background-color: ##107ab9;
      overflow-x: hidden;
      transition: 0.3s;
      padding-top: 60px;
      z-index: 1000;
    }
    
    .slide-menu a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 16px;
      color: #fff;
      display: block;
      transition: 0.3s;
    }
    
    .slide-menu a:hover {
      color: #f1f1f1;
    }
    
    .slide-menu .closebtn {
      position: absolute;
      top: 0;
      right: 30px;
      font-size: 36px;
    }
    
    .navbar {
      background-color: #007cea;
      z-index: 999;
    }
    
    .navbar-brand, .navbar-nav .nav-link {
      color: #fff;
    }
    
    .navbar-brand:hover, .navbar-nav .nav-link:hover {
      color: #fff;
    }
}



.banner{
    border-radius: 5px;
    border: 2px solid #fff;
    box-shadow: 0 4px 8px #9d9d9d;
  }

  @media (max-width: 600px) { .banner { width: 97%; margin-top: 20px;}}


/*  ----- Search Form   -------  */


.search-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18vh;
  background-color: #e6e6e6;
  animation: 1s ease-out 0s 1 slideInFromTop;
}
      @media (max-width: 600px) { .search-form-container  {  height: 13vh;}}
      
    
.search-form {
  transition: box-shadow 0.3s ease;
  width: 40%;

}
    @media (max-width: 600px) { .search-form { width: 95%;}}


.search-input {
  border-radius: 25px;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  height: 50px;
  font-size: 16px;
}

    @media (max-width: 600px) { .search-input { font-size: 16px;}}

.search-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-btn {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); font-size: 18px; border-radius: 25px 25px; font-size: 20px;}





/*  bODY    */

.browse-featured{
  font-size: 14px;
   color:#4d5053;
}
.category-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  
}
    @media (max-width: 600px) { .category-container { gap: 10px;}}   


.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 14px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}
.category i{
  font-size: 30px;
  margin-bottom: 10px;
  color: #00adb5;
}

.index-cat-icon{
  width: 75px;
}

.index-cat-icon:hover{ 
transform: scale(1.15);
transition: all 0.3s ease-in-out;}

.cat-links, .cat-links:hover{
  color: #4f4949;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.7rem;
}



/*  search page   */

.search-info{
  font-size: 0.8em;
  color: #5e5c5c;
  font-family: Roboto;
  font-weight: 500;
  
}

.verified{float: right;  position: absolute; top: 5px; right: 5px;}
      
.search-con{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
            border: 3px solid rgba(255, 255, 255, 0.13);
            animation: 1s ease-out 0s 1 slideInFromLeft;
          }

.card-title {color: #2948a6; margin-bottom: 0.25rem; font-size: 18px; font-weight: 550;}
          @media (max-width: 600px) { .card-title {font-size: 20px;}}








/*   Details Page */
.details-info{
  font-size: 1em;
  color: #5e5c5c;
  font-family: Roboto;
  font-weight: 500;
  line-height: 12px;
  margin-bottom: 0px; 
  margin-left: -10px;
}

.details-info-d{
  font-size: 1em;
  color: #5e5c5c;
  font-family: Roboto;
  font-weight: 500;
  line-height: 12px;
  margin-bottom: 0px; 
  margin-left: -8px;
}

@media (max-width: 600px) { .details-info-d {font-size: 0.9em;}}

.details-dp{
  max-width: 105%;
  height: 270px;
  background-position: center;
   background-size: cover;
   background-size: 100%;
   transition: all 0.3s ease-in-out;
   border: 3px solid #fff; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.details-dp:hover{
  background-size: 113%;
  transition: all 0.4s ease-in-out;
} 



.details-info-top{
  margin-top: 8px;
  overflow: hidden;
    text-wrap: nowrap;
}
    @media (max-width: 600px) { .details-info-top {padding-left: 2px; margin-top: 15px;}}



  

.card-title-d{color: #2948a6; margin-bottom: 0.25rem; font-size: 20px; font-weight: 550;}
        @media (max-width: 600px) { .card-title-d {font-size: 20px; font-weight: 600;}}


        .dashboard-card {
          border-radius: 10px;
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
          background-color: #ffffff;
          margin-bottom: 20px;
          padding: 20px 10px 10px 10px;
          
      }

      .recently-added-card {
        border-radius: 10px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        margin-bottom: 20px;
        padding: 20px 10px 10px 10px;
    }

    .list-group-item { display: flex; align-items: center; border: 0px;}
    .list-group-item .dot {height: 10px; width: 10px; border-radius: 50%; margin-right: 10px;}
    .custom-card { border-radius: 5px; padding: 15px; display: flex; flex-wrap: wrap; background: #fff;}

      .list-group-item:hover{
        font-weight: 600;

      }
      /*.dashboard-card img {
          width: 100%;
          height: auto;
          border-radius: 10px;
      }*/
      
      .dashboard-card-header {
          font-size: 28px;
          margin-bottom: 15px;
          line-height: 8px;
          font-family: Dongle;
          letter-spacing: 0.05em;
      }
      .dashboard-card-body {
          display: flex;
          align-items: center;
          font-size: 14px;
          
        }

      .fadetails{font-size: 28px; padding: 6px 16px; color: #d92873; position: relative;
        top: 0;
        transition: top ease 0.5s;}

      .fadetails:hover{top: -7px;}

      .share-button{
        padding: 6px 20px 6px 10px;
        background-color: #0097a7;
        border-radius: 10px;
        color: #fff;
        text-decoration: none;
      }

      .details {
          font-size: 14px;
          color: #333;
      }
      .file-list {
          list-style-type: none;
          padding-left: 0;
      }
      .file-list li {
          display: flex;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid #eee;
      }
      .file-list img {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          margin-right: 10px;
      }
      .file-details {
          font-size: 14px;
          color: #333;
      }
      .file-name {
          font-weight: bold;
      }
      .file-info {


  /* details page close */



/* Login form */


.loginBox{ background: url('../images/login-bg.jpg') no-repeat center center fixed; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 340px;
  min-height: 200px;
   border-radius: 10px;
   padding: 40px;
   box-sizing: border-box;
  box-shadow: 0 0 15px 9px #00000096;}
   
   .user{margin: 0 auto;display: block;margin-bottom: 20px; }
   
   h3{margin: 0;padding: 0 0 20px;color: #59238F;text-align: center}
   .loginBox input{width: 100%;margin-bottom: 20px}
   .loginBox input[type="text"], 
   .loginBox input[type="password"]{
    border: none;border: 2px solid #515151;
    outline: none;height: 40px;color: #fff;background: #000;font-size: 16px;padding-left: 20px;box-sizing: border-box}
    .loginBox input[type="text"]:hover, .loginBox input[type="password"]:hover{color: #42F3FA;border: 1px solid #42F3FA;box-shadow: 0 0 5px rgba(0,255,0,.3), 0 0 10px rgba(0,255,0,.2), 0 0 15px rgba(0,255,0,.1), 0 2px 0 black}
    .loginBox input[type="text"]:focus, .loginBox input[type="password"]:focus{border-bottom: 2px solid #42F3FA}
    .inputBox{position: relative}.inputBox span{position: absolute;top: 10px;color: #262626}
    .loginBox input[type="submit"]{border: none;outline: none;height: 40px;font-size: 16px; background: #59238F;color: #fff;border-radius: 20px;cursor: pointer}
    .loginBox a{color: #262626;font-size: 14px;font-weight: bold;text-decoration: none;text-align: center;display: block}a:hover{color: #fff}

    .login-error{color: #42F3FA; font-size: 0.8rem;}




/*   Phone Login */

.phem-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
}
    @media (max-width: 600px) { .phem-container {width: 90%;}}

.phem-input {
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.phem-card {
  color: #024430 !important;
  text-align: center;
  background-color: #fff;
  padding: 30px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  font-family: sans-serif, serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

.pe_signin_button button {
  width: 400px;
}

.pe_signin_button button {
  width: 320px;
}

.phone-login-title{
  font-size: 14px;
}




/*   LISTINGS   */
.alert-container{
  width: 345px;
  height: auto;
  padding: 20px;
  margin: auto;
  background: #fff;
  border: 1px solid #eee;
  text-align: center;
}

.search-alert-war{color: #856404; background: #fff3cd; border:1px solid #f7d466; padding: .75rem 1.25rem; margin: auto; }
.search-alert-success{color: #155724; background: #d4edda; border: 1px solid #65d27e; padding: .75rem 1.25rem; margin: auto; font-weight: 600; }

.noresultfound{margin: auto; border: 2px solid #d5cece; width: 305px; margin-bottom: 10px;}

.searcherror{margin: auto; border: 2px solid #d5cece; width: 305px; margin-bottom: 10px;}




/*   Footer */
.footer {
  background-color: #343a40;
  color: white;
  padding: 40px 0;
  font-size: 14px;
}
.footer a {
  color: white;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: none;
}

.footer-list{
  line-height: 30px;
}


.market-button {
  display: inline-block;
  margin-right: 14px;
  margin-bottom: 14px;
  padding: 5px 14px 5px 45px;
  transition: background-color 0.3s;
  border: 1px solid #e1e7ec;
  border-radius: 5px;
  background-position: center left 12px;
  background-color: #fff;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  text-decoration: none;
}
.market-button:hover {
  background-color: #f5f5f5;
}
.market-button .mb-subtitle {
  display: block;
  margin-bottom: -4px;
  color: #9da9b9;
  font-size: 12px;
}
.market-button .mb-title {
  display: block;
  color: #606975;
  font-size: 18px;
}

.market-button.google-button {
  background-image: url(../images/gplay.png);
}




#about-container{
  width: 80%;
  background: #fff;
  margin: auto;
  padding: 4.5rem;
}
      @media (max-width: 600px) { #about-container{width: 98%; padding: 2rem;}}

#about-container p{
  margin: auto;
  margin-top: auto;
  line-height: 30px;
  text-indent: 50px;
  margin-top: 20px;
  text-align: justify;
  font-size: 1rem;
}
@media (max-width: 600px) { #about-container p{font-size: 0.8rem;}}

.contact-admin-img{
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid #588955;
  border-radius: 20px;
  margin-bottom: 50px;
}
    @media (max-width: 600px) { .contact-admin-img{ width: 100%; border-radius: 1.5rem;}}






/* Page Load Animations / transition */



@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}







/*   Slider Image - Details    */

.carousel-item {
    height: 400px; /* Set consistent height for all items */
        }

    .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    cursor: pointer;
    }

    
    .modal-img {
      width: 100%;
      height: auto;
    }

    @media (max-width: 768px) {
  .carousel-item {
    height: 200px;
    width: 100%;
  }
  .modal-img {
      width: 100%;
      height: auto;
    }
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: transparent; /* Remove background color */
  background-image: none;        /* Remove default arrow image */
  width: 2rem;
  height: 2rem;
  border: 2px solid white;       /* Optional: make a white circle */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-control-prev,
.carousel-control-next {
    background: none;
    border: none;
}
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: '';
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.carousel-control-prev-icon::after {
  transform: rotate(135deg);
}

.carousel-control-next-icon::after {
  transform: rotate(-45deg);
}

/* Slider Close */

