/* Mobile View Adjustments */
@media (max-width: 768px) {
  /* Adjust col-md-3 and col-md-9 for mobile */
  .curr.col-md-3 {
      order: 1; /* Mobile view mein col-md-3 pehle aaye */
  }
  .col-md-9 {
      order: 2; /* Mobile view mein col-md-9 baad mein aaye */
  }

  /* Table adjustments */
  .table {
      width: 100%;
      display: block;
      overflow-x: auto;
  }

  /* Ensure table headers and cells take full width */
  .table thead, .table tbody, .table tr, .table th, .table td {
      display: block;
      width: 100%;
  }

  /* Adjust header row */
  .table thead tr {
      display: flex;
      flex-direction: column;
      background: #f4f4f4;
      padding: 10px 0;
  }

  /* Adjust body rows */
  .table tbody tr {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px; /* Spacing between rows */
      border-bottom: 2px solid #ddd;
      padding: 10px 0;
  }

  /* Style for thead th */
  .table thead th {
      font-weight: bold;
      padding: 8px;
      text-align: left;
  }

  /* Style for tbody td */
  .table tbody td {
      padding: 8px;
      text-align: left;
  }

  /* Ensure Inputs in thead and tbody take full width */
  .table thead th input,
  .table tbody td input {
      width: 100% !important;
      font-size: 16px !important;
      padding: 10px !important;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 5px;
  }

  /* Ensure Rate field (input-group) takes full width */
  .input-group {
      display: flex;
      width: 100% !important;
  }

  /* Currency symbol inside input group alignment */
  .input-group-text {
      width: 20%;
      text-align: center;
  }

  /* Adjust button size */
  .btn-danger {
      font-size: 14px;
      padding: 8px 12px;
  }

  /* Mobile: Ensure "Add Tax (optional): Fixed %" appears on one line */
  .d-flex.align-items-center.mt-2 {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      flex-wrap: nowrap;
  }
  
  .d-flex.align-items-center.mt-2 > span.fw-bold {
      white-space: nowrap;
      margin-right: 10px;
  }
  
  .d-flex.align-items-center.mt-2 > .form-check {
      display: inline-flex;
      align-items: center;
      margin-left: 10px;
  }
  
  /* Add gap between checkbox and its label */
  .d-flex.align-items-center.mt-2 .form-check .form-check-label {
      margin-left: 5px;
  }
}


  /* .logo-upload {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
  }
 
  .logo-upload input {
    display: none;
  }
  
      .logo-upload img {
          max-width: 100%;
          max-height: 100%;
          display: none;
      } */
    
      .logo-upload {
        border: 2px dashed #ccc;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
        transition: all 0.3s ease-in-out;
        min-width: 200px;
        min-height: 100px;
        max-width: 400px;
        max-height: 400px;
        position: relative;
    }

    /* Image box */
    .logo-upload img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Close button */
    #closeBtn {
        position: absolute;
        top: 5px;
        left: 5px;
        background: black;
        color: white;
        border: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 14px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
        display: none;
    }

    /* File input hide */
    .logo-upload input {
        display: none;
    }
    
    
    
    
    
    
      /* .close-btn {
          position: absolute;
          top: 5px;
          right: 5px;
          background: red;
          color: white;
          border: none;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          font-size: 14px;
          font-weight: bold;
          display: none;
          cursor: pointer;
      } */

      /* .signature-upload {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
  }
  .signature-upload input {
    display: none;
  }
  
      .signature-upload img {
          max-width: 100%;
          max-height: 100%;
          display: none;
      } */

     
      .signature-upload {
        border: 2px dashed #ccc;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
        transition: all 0.3s ease-in-out;
        min-width: 200px;
        min-height: 100px;
        max-width: 400px;
        max-height: 400px;
        position: relative;
    }

    /* Image box */
    .signature-upload img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Close button */
    #closeSignatureBtn {
        position: absolute;
        top: 5px;
        left: 5px;
        background: black;
        color: white;
        border: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 14px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
        display: none;
    }

    /* File input hide */
    .signature-upload input {
        display: none;
    }
  
  
  
    
    
      /* .close-btn1 {
          position: absolute;
          top: 5px;
          right: 5px;
          background: red;
          color: white;
          border: none;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          font-size: 14px;
          font-weight: bold;
          display: none;
          cursor: pointer;
      } */
  .custom-textarea {
    resize: none;
    max-width: 100%;
  }
  .editable {
    border: none;
    background: transparent;
    width: 100%;
  }
  .ri {
    text-align: right;
  }
  thead.bg-dark input.form-control.editable {
    background-color: #343a40;
    color: white;
    border: none;
  }
  thead.bg-dark input.form-control.editable:focus {
    background-color: #343a40;
    color: white;
    border: none;
    box-shadow: none;
  }
  /* X बटन केवल राउ hover पर दिखे */
  .remove-item {
    visibility: hidden;
  }
  #invoiceBody tr:hover .remove-item {
    visibility: visible;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Firefox के लिए */
  input[type=number] {
    -moz-appearance: textfield; 
  }

/* Navbar Styling */
.custom-navbar {
  background: #343a40 !important;
  color: white !important;
  padding: 15px 0;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Logo Adjustments */
.navbar-brand {
  display: flex;
  align-items: center;
  margin-right: 10px !important; /* Reduce right spacing */
}

.navbar-brand img {
  width: 200px !important;  /* Adjusted logo size */
  height: 60px !important;
  border-radius: 5px;
  margin-right: 10px; /* Space between logo and menu */
  margin-left: 0 !important; /* Align to left */
}

/* Navigation Links - Near Logo */
.navbar-nav {
  margin-left: 0 !important; /* Remove extra left space */
  gap: 15px; /* Adjusted spacing between links */
}

.nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
  text-transform: uppercase;
}

.nav-link:hover {
  color: white !important;
}

/* Buttons */
.btn-custom {
  border-radius: 5px;
  font-size: 15px;
  padding: 8px 20px;
}

.btn-outline-light {
  border-color: white;
  color: white;
}

.btn-outline-light:hover {
  background: white;
  color: #343a40 !important;
}

.btn-primary {
  background: #007bff;
  border: none;
}

.btn-primary:hover {
  background: #0056b3;
}

.nav-link.active {
  color: #00c3ff !important;
  font-weight: bold;
}

.footer {
  background: #343a40;
  color: white;
  padding: 50px 0;
  font-size: 16px;
  width: 100%;
  position: relative;
}

.footer a {
  color: #00c3ff;
  text-decoration: none;
  font-weight: bold;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-logo {
  width: 250px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer-links {
  padding: 0;
  list-style: none;
  text-align: center;
}

.footer-links li {
  margin-bottom: 8px;
  font-size: 17px;
  display: block; /* Mobile ke liye ek ke neeche ek dikhane ke liye */
}

.footer h5 {
  color: #e8ffff;
  font-weight: bold;
  font-size: 20px;
}

.footer-bottom {
  text-align: center;
  padding: 15px 0;
  background: #2c3237;
  position: relative; /* Absolute ki jagah relative kiya */
  bottom: -44px;
  left: 0;
  width: 100%;
}

.footer-bottom p {
  font-size: 16px;
  margin: 0;
  padding-bottom: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .footer-links {
      text-align: center;
  }
  .footer-logo {
      width: 180px;
  }
  .footer-bottom {
      padding-bottom: 20px;
  }
  .footer .col-md-3 {
      text-align: center;
  }
}