@media (max-width: 1024px) {
    #searchButton {
        display: none !important;
      }
    .fa.fa-user.me-sm-1,
    .fa.fa-bell.cursor-pointer {
      display: none !important;
    }
    #iconNavbarSidenav::after {
        display: block;
      }
      .dropdown-menu {
        margin-left: -50px; /* Adjust this value as needed */
      }
  }
  
.big-icon {
    font-size: 1.8em !important; /* Adjust this value to make the icons bigger or smaller */
}
.big-text {
    font-size: 1.4em !important; /* Adjust this value to make the text bigger or smaller */
}

.nav-item {
  margin-bottom: 0.5em !important; /* Adjust this value to increase or decrease the space between items */
}

@media screen and (max-width: 767px) {
  .responsive-image {
    margin-left: -30px; /* Adjust as needed */
  }
  #responsive-image {
    margin-left: -30px; /* Adjust as needed */
    margin-top: 20px; /* Adjust as needed */
  }
}

@media (max-width: 1050px) {
  .navbar.navbar-expand-lg.blur.border-radius-lg.top-0.z-index-3.shadow.position-absolute.mt-2.py-1.start-0.end-0.mx-2 {
    visibility: block;
    height: 0px;
    overflow: block;
  }
}

@media (max-width: 767px) {
  .dropdown-menu.dropdown-menu-end.px-2.py-3.me-sm-n4 {
      right: 16% !important;
      position: absolute;
      left: 0px;
      top: 17px;
      margin: 0px;
      transform: translate3d(247.5px, 66.5px, 0px);
  }
}

@media (max-width: 768px) {
  #sidenav-main {
    display: block !important;
  }
}

@media (max-width: 1495px) {
  /* Hide the text when viewport width is 768px or smaller */
  #createPostButtonText{
      display: none;
  }
  #createPostButton {
    border-radius: 50%; /* Make the button round */
    padding: 10px; /* Add some padding to ensure the button's content is not cut off */
    margin-right: 1px !important; /* Push the button to the right */
    width: 50px; height: 50px
  }
  
  #dropdownMenuButton {
    display: none !important;
  }
  
  #plusIcon {
    font-size: 1.5rem !important; 
    margin-right: 0.1px !important;
  }
}

@media (max-width: 1024px) {
  #verifyButton,
  #verifyEmailButton,
  #managePremiumButton,
  #changePasswordButton,
  #changeEmailButton,
  #deleteAccountButton {
    display: block;
    margin-right: auto;
    margin-left: -25px;
  }
}

@media screen and (max-width: 768px) {
  .accordion-item {
    width: 100% !important; /* Ensure it takes up the full width */
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margins */
  }

  .accordion-header,
  .accordion-body {
    width: 100% !important; /* Ensure they take up the full width */
    padding: 0 15px !important; /* Add some padding on the sides */
  }
}

@media screen and (max-width: 768px) {
  #businessCard {
    margin-right: 0 !important; /* Remove the right margin */
    margin-left: 0 !important; /* Remove the left margin */
  }
}

#profileDropdown {
  left: 0 !important;
  right: auto !important;
}

#profileDropdown a {
  display: block;
  text-align: left;
  padding: 5px 10px;
}

#profileDropdown .btn-info {
  display: block;
  text-align: left;
}

.highlight:hover a {
  transition: background-color 0.3s ease; /* Add smooth transition effect */
  color: blue;
}

/* CSS code for the hover effect in dark mode */
.dark-mode .highlight:hover a {
  background-color: #333; /* Change background color when hovering in dark mode */
  color: white; /* Change text color when hovering in dark mode */
}
.form-check.form-switch.d-flex.align-items-center {
  justify-content: left; /* Aligns items to the left along the horizontal axis */
  margin-left: 0; /* Removes left margin */
  padding-left: 15px; /* Adds some left padding */
}

#createPostButton {
  border-radius: 1.5rem; /* Make the button round */
}