@media (max-width: 575.98px) {
   .top_header_section {
    display: none !important;
  }
  .top_header_section .row {
    flex-direction: column;
    text-align: center;
  }

  .mobile_icon {
    clip-path: none;
    padding: 10px;
    margin-bottom: 10px;
  }

  .social_icon_header {
    margin-top: 10px;
  }

  .nav_logo img {
    width: 100px;
  }

  .desktop_header {
    display: none; /* Hide desktop nav for mobile */
  }

  .navbar-buttons .btn {
    font-size: 14px;
    padding: 5px 10px;
  }

  .footer {
    text-align: center;
  }

  .footer .row > div {
    margin-bottom: 1.5rem;
  }

  .social-links {
    justify-content: center;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
   .top_header_section {
    display: none !important;
  }
  .top_header_section .row {
    flex-direction: column;
    text-align: center;
  }

  .mobile_icon {
    clip-path: none;
    padding: 10px;
    margin-bottom: 10px;
  }

  .nav_logo img {
    width: 110px;
  }

  .desktop_header {
    display: none;
  }

  .navbar-buttons .btn {
    font-size: 14px;
    padding: 6px 12px;
  }

  .footer .row > div {
    margin-bottom: 1.5rem;
  }

  .social-links {
    justify-content: center;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .top_header_section {
    display: none !important;
  }
  .nav_logo img {
    width: 120px;
  }

  .desktop_header li {
    margin-right: 10px;
  }

  .navbar-buttons .btn {
    font-size: 15px;
    padding: 6px 12px;
  }

  .footer .row > div {
    margin-bottom: 1rem;
  }

  .social-links {
    justify-content: start;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .desktop_header {
    display: flex !important;
  }

  .navbar-buttons {
    display: flex;
    align-items: center;
  }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
  .nav_logo img {
    width: 160px;
  }
}
