@media only screen and (max-width: 768px) {
  .hero-section,
  .section,
  #projects,
  #certificates,
  #interests,
  #contact {
    padding: 40px 20px !important;
  }

  #floatingMenuIcon {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 40px;
  }

  #menuTextBtn {
    position: fixed !important;
    top: 20px;
    right: 20px;
    z-index: 9999;
  }

  .hero-section {
    flex-direction: column;
    text-align: center;
  }

  .hero-section img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
  }

  .hero-section-text h2 {
    font-size: 32px;
  }

  .hero-section-text p {
    font-size: 14px;
  }

  .topbar {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  .menu-button {
    position: static !important;
  }

  .menu-dropdown {
    right: 10px;
    left: 10px;
    top: 100%;
    width: auto;
  }

  .interest-card {
    max-width: 100% !important;
  }

  .terminal-launcher {
    width: 100%;
    padding: 20px;
  }

  iframe {
    height: 300px !important;
  }

  .carousel-container {
    padding: 0 20px;
  }

  .carousel {
    gap: 16px;
  }

  #projects > div {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
  }

  body {
    font-size: 14px;
  }

  h1, h2, h3, h4 {
    font-size: 90%;
  }

  .btn-download {
    font-size: 14px;
    padding: 10px 16px;
  }

  .video-container {
    height: 100vh;
    overflow: hidden;
  }

  .hero-caption {
    font-size: 32px !important;
    max-width: 90%;
    bottom: 10%;
  }

  #contact input,
  #contact textarea {
    font-size: 14px;
    padding: 6px 10px;
  }

  #contact .btn-download {
    font-size: 14px;
    padding: 8px 16px;
  }
  .dashboard-modal-content {
    display: grid;
    grid-template-rows: 1fr;
    width: 90%;
    height: 90vh;
    max-width: 1200px;
    border-radius: 12px;
    overflow: hidden;
  }

  .tableauPlaceholder {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .tableauPlaceholder object,
  .dashboard-modal-content object.tableauViz {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: block !important;
  }

}