/* Responsive Breakpoints */

/* Extra Small Devices: max-width 768px */
@media (max-width: 768px) {
  .social-icons-navbar {
    display: none !important;
  }

  .corner-circles-fixed,
  #corner-circles {
    display: none !important;
  }
}

/* Small to Medium Devices: 769px to 1325px */
@media (min-width: 769px) and (max-width: 1325px) {
  .social-icons-navbar {
    display: none !important;
  }

  .corner-circles-fixed,
  #corner-circles {
    display: flex !important;
  }

  .social-links-contact {
    display: flex !important;
  }
}

/* Large Devices: min-width 1326px */
@media (min-width: 1326px) {
  .social-icons-navbar {
    display: flex !important;
  }

  .social-links-contact {
    display: none !important;
  }

  .corner-circles-fixed,
  #corner-circles {
    display: flex !important;
  }
}

/* Desktop: min-width 1000px */
@media (min-width: 1000px) {
  #hamburger-toggle,
  #nav-overlay {
    display: none !important;
  }

  .navbar-blur-container,
  .flex.space-x-4 {
    display: flex !important;
  }
}

/* Tablet: max-width 1000px */
@media (max-width: 1000px) {
  .navbar-blur-container,
  .flex.space-x-4 {
    display: none !important;
  }

  #hamburger-toggle {
    display: flex !important;
  }
}

/* Tablet/iPad: max-width 780px */
@media (max-width: 780px) {
  .about-content {
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 20px;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .about-content > div {
    align-items: center !important;
    text-align: center !important;
  }

  .about-content h1,
  .about-content p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .decor-circle {
    inline-size: 32px;
    block-size: 32px;
  }

  .certificate-item img {
    aspect-ratio: 1.413;
  }

  main h1,
  main p {
    transform: none !important;
    transition: none !important;
    cursor: default !important;
  }

  #nav-overlay {
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #nav-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  #nav-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
  }
}

/* Small Devices: max-width 768px */
@media (max-width: 768px) {
  .corner-circles-fixed,
  #corner-circles {
    display: none !important;
  }
}

/* Medium Devices: min-width 769px */
@media (min-width: 769px) {
  .corner-circles-fixed,
  #corner-circles {
    display: flex !important;
  }
}

/* Mobile: max-width 430px */
@media (max-width: 430px) {
  main {
    padding-bottom: 48px;
  }

  main h1,
  main p {
    transform: none !important;
    transition: none !important;
    cursor: default !important;
  }
}