body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
  }
  
  .same{
    width: 50%;
    margin: 0px auto;
    
}
.goToSignIn{
    width: 50%;
    margin: 0px auto;
}
.alreadyAccount{
    display: none;
    
}
.wrongInfo{
    display: none;
    
}
.suh{
    margin: 15% auto 2% auto;
    
}
.but{
    margin: 1% auto 1% auto;
}

 .grid{
     margin: 2% 0% 0% 0%;
 }
.cardstyling{
    margin: 0% 0% 2% 0%;
} 
.validate{
    max-height: 300px;
    max-width: 300px;
    overflow: scroll x;
}
.activeUser{
    display: none;
}
#postad{
    display: none;
}
#greetUser{
    display: none;
}
#search{
     
    height: 70%;
}

.userProfile{
    display: none;
}
.userAds{
    display: none;
}
.category{
    color: gray;
}
.favourite{
    display: none;
}
.text-messages{
    color: gray;
}
.navbar {
    background-image: linear-gradient(to right, #def4fd, #ffffff);
    padding: 10px 0;
}
.navbar-brand > img {
    width: 14rem;
    height: 4rem;
    margin-left: auto;
    
}

.nav-link {
    font-size: 16px;
    color: #0c0c0c !important;
    margin: 2px;
}

.navbar-nav {
    text-align: right;
}

.navbar-toggler {
    padding-right: 0;
    outline: none;
    border: none;
}
img {
    transition: transform 0.3s ease; 
    transform: scale(1); 
}
img:hover {
    transform: scale(1.3); 
}

.slogan {
    
        text-align: center;
        margin-top: -75px; }

@media screen and (max-width: 768px){
    .slogan {
                font-size:smaller;
                text-align: center;
                margin-top: 100px; }
            
            
                 
                    .slogan h1 {
                      font-size: 1.5rem; /* Adjust the font size to make it smaller (you can adjust the value as needed) */
                    }
                  }
                
                  body {
                    display: flex;
                    flex-direction: column;
                    min-height: 100vh;
                }
                
                .container {
                    flex: 1;
                }
                
              
                
                
                           
                .search-container {
                    display: flex;
                    align-items: center;
                }
                
                .search-btn {
                    background-color: transparent;
                    border: none;
                    cursor: pointer;
                }
                
                .fa-search {
                    color: #fff;
                }
                
              /* searchbar style for mobile view  */
                @media (max-width: 767px) {
                    .nav-item.active input {
                        display: none;
                    }
                }
                /* CSS for hiding search icon button in desktop view */
@media (min-width: 768px) {
    .hide-on-desktop {
      display: none !important;
    }
    #searchBarMobile {
        display: none !important;
      }
  }
  
                @media (min-width: 768px) {

                    .navbar-toggle{
display: none;
                    }
                    
                }
                
                #loading {
                    position: absolute;
                    top: 43%;
                    left: 50%;
                    transform: translate(-50%, -50%); /* Center the element */
                    width: 80px; /* Adjust width as needed */
                    height: 80px; /* Adjust height as needed */
                    line-height: 80px; /* Match the height for vertical centering */
                    font-size: 20px; /* Adjust font size as needed */
                    color: #000;
                    background-color: #fff;
                    background-image: url(images/loading.gif);
                    background-repeat: no-repeat;
                    background-size: contain; /* Ensure the image fits within the container */
                    background-position: center;
                    text-align: center;
                  }
                  @media (max-width: 767px) {
                    #searchBarMobile {
                      display: block;
                      width: 100%; /* Set the search bar width to 100% on mobile */
                      margin-right: 0; /* Remove any right margin to ensure full width */
                    }
                   
                    /* #navbarResponsive {
                        display: none; 
                      }  */
                  }
                  #searchBarMobile, #searchBar {
                    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
                }
                
                 .square-card {
  width: 100px;   /* adjust size */
  height: 200px;  /* same as width for square */
  margin: auto;   /* center in column */
}
.square-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  aspect-ratio: 1 / 1;   /* keeps box square */
  border-radius: 12px;   /* rounded corners */
  font-weight: bold;
  margin: 5px 0;
  padding: 10px;
}

/* You can use your existing gradient classes (l-bg-cherry, l-bg-orange-dark, etc.)
   If you don’t have a pink one, add it: */
.l-bg-pink {
  background: #ff1493; /* deep pink */
}