/* iPhone 7 and similar devices (375px width) - Fix responsiveness issues */
@media (min-width: 370px) and (max-width: 380px) {
    /* Ensure container has proper padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Fix header spacing to prevent overlap */
    .nav-container {
        padding: 0 20px;
        padding-top: env(safe-area-inset-top, 0);
    }

    .logo {
        font-size: 1.35rem;
        max-width: calc(100vw - 180px);
        overflow: hidden;
    }

    .logo-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cta-button {
        right: 76px;
        padding: 9px 18px;
        font-size: 0.87rem;
        white-space: nowrap;
    }

    .hamburger {
        right: 20px;
    }

    /* Fix about tags - ensure proper wrapping and no overflow */
    .about-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
        width: 100%;
        box-sizing: border-box;
    }

    .about-tags .tag {
        padding: 8px 16px;
        font-size: 0.875rem;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Ensure about section container has proper padding */
    .about .container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
        overflow-x: hidden;
    }

    .about-content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .about-text {
        padding: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Fix hero section spacing */
    .hero-container {
        padding: 0 20px;
    }

    /* Ensure all sections have consistent padding */
    .section-header {
        padding: 0;
    }
}

/* Small mobile screens (361px - 480px) - Fix layout issues */
@media (min-width: 300px) and (max-width: 361px) {
  /* Fix scroll indicator overlap */
  .scroll-indicator {
      position: relative;
      bottom: auto;
      left: auto;
      transform: none;
      margin-top: 40px;
      margin-bottom: 24px;
      margin-left: auto;
      margin-right: auto;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 100%;
    max-height: 50px;
}

  @keyframes fadeInSlideDown {
      from {
          opacity: 0;
          transform: translateY(-20px);
      }
      to {
          opacity: 0.6;
          transform: translateY(0);
      }
  }

  /* Fix hero min-height to prevent overlap */
  .hero {
      min-height: auto !important;
  }

  /* Mobile menu adjustments for small screens */
  .nav-menu {
      padding: 80px 20px 135px 20px !important;
      padding-top: max(80px, env(safe-area-inset-top, 0) + 80px) !important;
      padding-bottom: max(135px, env(safe-area-inset-bottom, 0) + 135px) !important;
      justify-content: center !important;
  }

  .nav-menu::before {
      top: calc(18px + env(safe-area-inset-top, 0)) !important;
      left: 20px !important;
      font-size: 1.35rem !important;
  }

  .nav-menu li {
      margin-bottom: 6px !important;
  }

  .nav-menu .nav-link {
      padding: 13px 20px !important;
      font-size: 18px !important;
      min-height: 44px !important;
  }

  .mobile-menu-footer {
      padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 15px)) 20px !important;
      gap: 14px !important;
  }

  .mobile-cta-button {
      font-size: 16px !important;
      padding: 13px 24px !important;
      min-height: 50px !important;
  }

  .mobile-contact-icon {
      min-width: 58px !important;
      padding: 9px !important;
  }

  .mobile-contact-icon svg {
      width: 22px !important;
      height: 22px !important;
  }

  .mobile-contact-icon span {
      font-size: 11px !important;
  }
}

/* Ultra-narrow screens - prevent header overlap */
@media (max-width: 360px) {
  .nav-container {
      padding: 0 12px;
      padding-top: env(safe-area-inset-top, 0);
      height: calc(70px + env(safe-area-inset-top, 0));
  }

  .logo {
      font-size: 1.1rem;
      max-width: calc(100vw - 70px);
      overflow: hidden;
  }

  .logo-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
  }

  .cta-button {
      display: none !important;
  }

  .hamburger {
      right: 12px;
      min-width: 40px;
      min-height: 40px;
      padding: 8px;
  }

  .hamburger span {
      width: 20px;
  }

  .hero-container {
      padding: 0 12px;
  }

  .hero {
      padding: 70px 0 40px;
  }

  .hero-avatar {
      width: 130px;
      height: 130px;
      margin-bottom: 18px;
  }

  .hero-headline {
      font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  /* Mobile menu adjustments for ultra-narrow screens */
  .nav-menu {
      padding: 75px 12px 120px 12px !important;
      padding-top: max(75px, env(safe-area-inset-top, 0) + 75px) !important;
      padding-bottom: max(120px, env(safe-area-inset-bottom, 0) + 120px) !important;
      justify-content: center !important;
  }

  .nav-menu::before {
      top: calc(16px + env(safe-area-inset-top, 0)) !important;
      left: 12px !important;
      font-size: 1.2rem !important;
  }

  .nav-menu li {
      margin-bottom: 2px !important;
  }

  .nav-menu .nav-link {
      padding: 10px 16px !important;
      font-size: 17px !important;
      min-height: 40px !important;
  }

  .mobile-menu-footer {
      padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 12px)) 12px !important;
      gap: 12px !important;
  }

  .mobile-cta-button {
      font-size: 15px !important;
      padding: 12px 20px !important;
      min-height: 46px !important;
  }

  .mobile-contact-icon {
      min-width: 52px !important;
      padding: 7px !important;
  }

  .mobile-contact-icon svg {
      width: 20px !important;
      height: 20px !important;
  }

  .mobile-contact-icon span {
      font-size: 9.5px !important;
  }
}

/* Extra-narrow screens - for widths around 330px */
@media (max-width: 340px) {

  .hero {
    padding: 110px 0 60px !important;
  }
    
  .nav-container {
      padding: 0 10px;
  }

  .logo {
      font-size: 1.05rem;
      max-width: calc(100vw - 60px);
  }

  .cta-button {
      display: none !important;
  }

  .hamburger {
      right: 10px;
      min-width: 38px;
      min-height: 38px;
  }

  .hero-container {
      padding: 0 10px;
  }

  .hero-avatar {
      width: 120px;
      height: 120px;
  }

  .hero-headline {
      font-size: clamp(1.5rem, 6.5vw, 2rem);
  }

  .hero-badge {
      padding: 6px 14px;
      font-size: 0.75rem;
  }

  .scroll-indicator {
      position: relative;
      bottom: auto;
      left: auto;
      transform: none !important;
      margin-top: 32px;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto;
  }

  /* Mobile menu adjustments for extra-narrow screens */
  .nav-menu {
      padding: 70px 10px 115px 10px !important;
      padding-top: max(70px, env(safe-area-inset-top, 0) + 70px) !important;
      padding-bottom: max(115px, env(safe-area-inset-bottom, 0) + 115px) !important;
      justify-content: center !important;
  }

  .nav-menu::before {
      top: calc(14px + env(safe-area-inset-top, 0)) !important;
      left: 10px !important;
      font-size: 1.15rem !important;
  }

  .nav-menu li {
      margin-bottom: 2px !important;
  }

  .nav-menu .nav-link {
      padding: 9px 14px !important;
      font-size: 16px !important;
      min-height: 38px !important;
  }

  .mobile-menu-footer {
      padding: 11px 10px calc(11px + env(safe-area-inset-bottom, 11px)) 10px !important;
      gap: 11px !important;
  }

  .mobile-cta-button {
      font-size: 14px !important;
      padding: 11px 18px !important;
      min-height: 44px !important;
  }

  .mobile-contact-icon {
      min-width: 48px !important;
      padding: 6px !important;
  }

  .mobile-contact-icon svg {
      width: 18px !important;
      height: 18px !important;
  }

  .mobile-contact-icon span {
      font-size: 9px !important;
  }
}

/* ========================================
   HEIGHT-BASED MEDIA QUERIES
   Fix layout issues for short viewports
   ======================================== */

/* Medium-short height viewports for wider screens (e.g., laptop/tablet landscape) */
@media (min-width: 768px) and (max-height: 800px) {
  .hero {
      min-height: auto !important;
  }

  .scroll-indicator {
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      margin-top: 40px !important;
      margin-bottom: 30px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
}

/* Very short height viewports (e.g., landscape mobile, short browser windows) */
@media (max-height: 600px) {
  .hero {
      min-height: auto !important;
      padding: 80px 0 40px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }

  .hero-container {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
  }

  .hero-avatar {
      width: 130px !important;
      height: 130px !important;
      margin-bottom: 16px !important;
  }

  .hero-badge {
      margin-bottom: 16px !important;
      padding: 7px 16px !important;
      font-size: 0.8rem !important;
  }

  .hero-headline {
      font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important;
      margin-bottom: 14px !important;
      line-height: 1.25 !important;
  }

  .hero-description {
      font-size: 1rem !important;
      margin-bottom: 18px !important;
      line-height: 1.5 !important;
  }

  .hero-buttons {
      gap: 12px !important;
      margin-top: 18px !important;
  }

  .hero-buttons .btn {
      padding: 13px 24px !important;
      font-size: 0.95rem !important;
  }

  .scroll-indicator {
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      margin-top: 28px !important;
      margin-bottom: 20px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      opacity: 0.7 !important;
  }

  .scroll-label {
      font-size: 0.7rem !important;
      letter-spacing: 0.1em !important;
  }

  .scroll-mouse {
      width: 20px !important;
      height: 34px !important;
  }

  /* Mobile Menu Adjustments */
  .nav-menu {
      padding: 70px 20px 140px 20px !important;
      padding-top: max(70px, env(safe-area-inset-top, 0) + 70px) !important;
      padding-bottom: max(140px, env(safe-area-inset-bottom, 0) + 140px) !important;
      justify-content: center !important;
  }

  .nav-menu::before {
      top: calc(16px + env(safe-area-inset-top, 0)) !important;
      font-size: 1.25rem !important;
  }

  .nav-menu li {
      margin-bottom: 4px !important;
  }

  .nav-menu .nav-link {
      padding: 12px 20px !important;
      font-size: 17px !important;
      min-height: 44px !important;
  }

  .mobile-menu-footer {
      padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 14px)) 20px !important;
      gap: 12px !important;
  }

  .mobile-cta-button {
      font-size: 15px !important;
      padding: 12px 22px !important;
      min-height: 48px !important;
  }

  .mobile-contact-icon {
      min-width: 56px !important;
      padding: 8px !important;
  }

  .mobile-contact-icon svg {
      width: 20px !important;
      height: 20px !important;
  }

  .mobile-contact-icon span {
      font-size: 10px !important;
  }
}

/* Extra short height viewports */
@media (max-height: 550px) {
  .hero {
      padding: 70px 0 35px !important;
  }

  .hero-container {
      padding-top: 15px !important;
      padding-bottom: 15px !important;
  }

  .hero-avatar {
      width: 120px !important;
      height: 120px !important;
      margin-bottom: 14px !important;
  }

  .hero-badge {
      margin-bottom: 14px !important;
      padding: 6px 14px !important;
      font-size: 0.75rem !important;
  }

  .hero-headline {
      font-size: clamp(1.5rem, 6vw, 1.95rem) !important;
      margin-bottom: 12px !important;
      line-height: 1.2 !important;
  }

  .hero-description {
      font-size: 0.95rem !important;
      margin-bottom: 16px !important;
      line-height: 1.45 !important;
  }

  .hero-buttons {
      gap: 10px !important;
      margin-top: 16px !important;
  }

  .hero-buttons .btn {
      padding: 12px 22px !important;
      font-size: 0.9rem !important;
  }

  .scroll-indicator {
      margin-top: 24px !important;
      margin-bottom: 18px !important;
      opacity: 0.65 !important;
  }

  .scroll-label {
      font-size: 0.65rem !important;
      letter-spacing: 0.08em !important;
  }

  .scroll-mouse {
      width: 19px !important;
      height: 32px !important;
  }

  /* Mobile Menu Adjustments */
  .nav-menu {
      padding: 60px 18px 125px 18px !important;
      padding-top: max(60px, env(safe-area-inset-top, 0) + 60px) !important;
      padding-bottom: max(125px, env(safe-area-inset-bottom, 0) + 125px) !important;
      justify-content: center !important;
  }

  .nav-menu::before {
      top: calc(14px + env(safe-area-inset-top, 0)) !important;
      font-size: 1.15rem !important;
  }

  .nav-menu li {
      margin-bottom: 3px !important;
  }

  .nav-menu .nav-link {
      padding: 10px 18px !important;
      font-size: 16px !important;
      min-height: 40px !important;
  }

  .mobile-menu-footer {
      padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 12px)) 18px !important;
      gap: 10px !important;
  }

  .mobile-cta-button {
      font-size: 14px !important;
      padding: 11px 20px !important;
      min-height: 44px !important;
  }

  .mobile-contact-icon {
      min-width: 52px !important;
      padding: 7px !important;
  }

  .mobile-contact-icon svg {
      width: 19px !important;
      height: 19px !important;
  }

  .mobile-contact-icon span {
      font-size: 9.5px !important;
  }
}

/* Extremely short height viewports */
@media (max-height: 500px) {
  .hero {
      padding: 60px 0 25px !important;
  }

  .hero-container {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
  }

  .hero-avatar {
      width: 105px !important;
      height: 105px !important;
      margin-bottom: 12px !important;
  }

  .hero-badge {
      margin-bottom: 12px !important;
      padding: 5px 12px !important;
      font-size: 0.7rem !important;
  }

  .hero-headline {
      font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
      margin-bottom: 10px !important;
      line-height: 1.18 !important;
  }

  .hero-description {
      font-size: 0.9rem !important;
      margin-bottom: 14px !important;
      line-height: 1.4 !important;
  }

  .hero-buttons {
      gap: 8px !important;
      margin-top: 14px !important;
  }

  .hero-buttons .btn {
      padding: 11px 20px !important;
      font-size: 0.85rem !important;
  }

  .scroll-indicator {
      margin-top: 20px !important;
      margin-bottom: 14px !important;
      opacity: 0.6 !important;
  }

  .scroll-label {
      font-size: 0.6rem !important;
      letter-spacing: 0.06em !important;
  }

  .scroll-mouse {
      width: 18px !important;
      height: 30px !important;
  }

  /* Mobile Menu Adjustments */
  .nav-menu {
      padding: 50px 16px 110px 16px !important;
      padding-top: max(50px, env(safe-area-inset-top, 0) + 50px) !important;
      padding-bottom: max(110px, env(safe-area-inset-bottom, 0) + 110px) !important;
      justify-content: center !important;
  }

  .nav-menu::before {
      top: calc(12px + env(safe-area-inset-top, 0)) !important;
      font-size: 1.1rem !important;
  }

  .nav-menu li {
      margin-bottom: 2px !important;
  }

  .nav-menu .nav-link {
      padding: 9px 16px !important;
      font-size: 15px !important;
      min-height: 38px !important;
  }

  .mobile-menu-footer {
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 10px)) 16px !important;
      gap: 9px !important;
  }

  .mobile-cta-button {
      font-size: 13px !important;
      padding: 10px 18px !important;
      min-height: 42px !important;
  }

  .mobile-contact-icon {
      min-width: 48px !important;
      padding: 6px !important;
  }

  .mobile-contact-icon svg {
      width: 18px !important;
      height: 18px !important;
  }

  .mobile-contact-icon span {
      font-size: 9px !important;
  }
}