/* Responsive Navigation and Button Enhancements */

/* ==========================================
   Desktop Styles (Default)
   ========================================== */

/* Make nav container flexible */
.navbar-logo-left-container.shadow-three {
  padding: 10px 15px;
}

/* Navigation links container - ensure flex wrap */
.list-item-14 {
  flex-wrap: wrap;
  justify-content: center;
}

/* CTA Button always visible and responsive */
.c2a-button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================
   Tablet Styles (max-width: 991px)
   ========================================== */
@media screen and (max-width: 991px) {
  /* Navigation container adjustments */
  .navbar-logo-left-container.shadow-three {
    padding: 8px 12px;
  }
  
  /* Navigation links - smaller padding */
  .nav-link-4 {
    padding: 6px 8px;
    font-size: 14px;
  }
  
  /* Navigation wrapper flex */
  .nav-menu-two-2 {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .list-item-14 {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
  }
  
  /* CTA Button - smaller on tablet */
  .c2a-button {
    height: 40px;
    padding: 6px 6px 6px 14px;
    font-size: 14px;
    display: flex !important;
  }
  
  .btn-icon {
    width: 28px;
    height: 28px;
  }
  
  /* Div block adjustments */
  .div-block-50 {
    gap: 10px;
  }
}

/* ==========================================
   Mobile Landscape Styles (max-width: 767px)
   ========================================== */
@media screen and (max-width: 767px) {
  /* Navigation container - full width */
  .navbar-logo-left-container.shadow-three {
    padding: 8px 10px;
  }
  
  /* Navigation links - wrap and center */
  .nav-link-4 {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 18px;
  }
  
  .list-item-14 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: #1b1d1e0d;
    border-radius: 16px;
  }
  
  /* CTA Button visible on mobile */
  .c2a-button {
    height: 38px;
    padding: 5px 5px 5px 12px;
    font-size: 13px;
    display: flex !important;
  }
  
  .text-block-5 {
    font-size: 13px;
  }
  
  .btn-icon {
    width: 26px;
    height: 26px;
  }
  
  /* Container adjustments */
  .div-block-50 {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  /* Navigation menu block */
  .nav-menu-two-2 {
    width: 100%;
  }
}

/* ==========================================
   Mobile Portrait Styles (max-width: 479px)
   ========================================== */
@media screen and (max-width: 479px) {
  /* Navigation container - compact */
  .navbar-logo-left-container.shadow-three {
    padding: 6px 8px;
  }
  
  /* Header logo smaller */
  .image-27 {
    width: 100px;
    height: auto;
  }
  
  /* Navigation links - vertical on very small screens */
  .list-item-14 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    max-width: 100%;
  }
  
  .nav-link-4 {
    padding: 6px 8px;
    font-size: 11px;
    line-height: 16px;
    display: inline-flex;
  }
  
  /* CTA Button - compact but visible */
  .c2a-button {
    height: 34px;
    padding: 4px 4px 4px 10px;
    font-size: 11px;
    display: flex !important;
    margin-top: 4px;
  }
  
  .text-block-5 {
    font-size: 11px;
  }
  
  .btn-icon {
    width: 22px;
    height: 22px;
  }
  
  .btn-icon img {
    width: 6px;
    height: 6px;
  }
  
  /* Navigation wrapper - allow wrapping */
  .div-block-50 {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
  }
  
  /* Navbar wrapper adjustments */
  .container-nav {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  
  /* All buttons responsive sizing */
  .button,
  .let-s-collaborate,
  .back-to-home-btn {
    height: auto;
    min-height: 40px;
    padding: 10px 16px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }
  
  /* Contact form button */
  .submit-button {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ==========================================
   Extra Small Screens (max-width: 360px)
   ========================================== */
@media screen and (max-width: 360px) {
  .nav-link-4 {
    padding: 5px 6px;
    font-size: 10px;
  }
  
  .list-item-14 {
    gap: 1px;
    padding: 3px;
  }
  
  .c2a-button {
    font-size: 10px;
    padding: 3px 3px 3px 8px;
    height: 30px;
  }
  
  .btn-icon {
    width: 20px;
    height: 20px;
  }
  
  .image-27 {
    width: 80px;
  }
}