/* Import Montserrat and Roboto fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;900&display=swap');


html {
  scroll-behavior: smooth;
}
body {
  background-color: #e7e7e7;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  scroll-behavior: smooth;
}

* {
    font-family: 'Montserrat', 'Roboto', sans-serif;
}
body{
  overflow-x: hidden;  
}


/* for scrollbar */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;}
::-webkit-scrollbar-thumb {background: linear-gradient(135deg, #007bff, #00c6ff);border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: linear-gradient(135deg,#00c6ff ,  #007bff);}


h2 {text-align: center;margin-bottom: 30px; font-size: 2rem;} 

/* ========== SECTION LAYOUT ========== */
.listing-section {padding: 50px 20px;max-width: 1200px;margin: 0 auto;}
.listing-title {text-align: center;font-size: 2.5rem;font-weight: 700;margin-bottom: 30px;color: #333;}
.mode-toggle-wrapper {position: sticky;top: 0;z-index: 1000; background-color: #f9f9f9; box-shadow: 3px 0px 7px 0px #aaa;padding: 10px 0; display: flex;justify-content: flex-end;align-items: center;gap: 10px;margin-bottom: 20px;padding: 15px 10px;}
.mode-label {font-weight: 600;color: #444;}
.switch {position: relative;display: inline-block;width: 48px;height: 24px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;inset: 0;background-color: #ccc;border-radius: 50px;transition: 0.4s;}
.slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 4px;bottom: 3px;background-color: white;transition: 0.4s;border-radius: 50%;}
input:checked + .slider {background-color: #007bff;}
input:checked + .slider:before {transform: translateX(24px);}
@media (max-width:765px){.listing-title{font-size: 25px;}}

/* ========== SEARCH SECTION ========== */   
.search-section {max-width: 1000px;margin: 0 auto 40px;}
.form-label {display: block;margin-bottom: 10px;font-weight: 600;font-size: 1rem;color: #444;}
.search-group {display: flex;flex-wrap: wrap;gap: 10px;align-items: center;}
.search-input {flex: 1;min-width: 200px;padding: 12px 16px;font-size: 1rem;border: 1px solid #ccc;border-radius: 8px;outline: none;transition: border-color 0.3s, box-shadow 0.3s;}
.search-input:focus {border-color: #007bff;box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);}
.select-dropdown {appearance: none;background-color: white;border: 1px solid #ccc;border-radius: 8px;padding: 12px 16px;font-size: 1rem;cursor: pointer;color: #333;}

/* Search Button */
.search-button {padding: 12px 24px;font-size: 1rem;background: linear-gradient(135deg, #007bff, #00c6ff);color: #fff;border: none;border-radius: 10px;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 14px rgba(0, 123, 255, 0.3);font-weight: 600;letter-spacing: 0.5px;display: flex;align-items: center;gap: 8px;}
.search-button:hover {background: linear-gradient(135deg, #0056b3, #009be0);box-shadow: 0 6px 18px rgba(0, 123, 255, 0.4);transform: translateY(-2px);}
.search-button:active {transform: scale(0.97);box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);}

/* ========== TAG FILTERS ========== */
.tag-filters {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 20px;justify-content: center;}
.tag-btn {padding: 8px 16px;font-size: 0.9rem;background: #e9f1ff;border: none;border-radius: 8px;cursor: pointer;color: #007bff;transition: all 0.3s ease;font-weight: 500;}
.tag-btn:hover {background: #007bff;color: white;}
.tag-btn.active {background: #007bff;color: white;font-weight: 600;box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2);}
.company-table {display: flex;flex-direction: column;gap: 20px;}
.company-row {display: flex;align-items: center;background: #fff;border-radius: 16px;padding: 20px;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.4s ease;flex-wrap: wrap;opacity: 1;transform: translateY(0);pointer-events: auto;}
.company-row:hover {transform: translateY(-4px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);}
.company-row.hide {opacity: 0;transform: translateY(20px);pointer-events: none;height: 0 !important;margin: 0 !important;padding: 0 !important;overflow: hidden;}
.company-col {padding: 10px;}
.company-col.icon {font-size: 2rem;flex: 0 0 50px;text-align: center;}
.company-col.details {flex: 1;min-width: 200px;}
.company-name {font-size: 1.1rem;font-weight: 600;color: #222;margin-bottom: 6px;}
.company-desc {font-size: 0.95rem;color: #555;line-height: 1.4;}
.company-col.actions {display: flex;gap: 10px;flex-shrink: 0;}

.map-btn,
.more-btn {padding: 10px 16px;font-size: 0.9rem;border: none;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;background: #f0f4f8;color: #333;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);}
.map-btn a,
.more-btn a {text-decoration: none; color: #333;}
.map-btn:hover,
.more-btn:hover {background: #007bff;color: white;box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);transform: translateY(-1px);}

/* ========== PAGINATION ========== */
.pagination-wrapper {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;margin-top: 40px;}
.pagination-btn {padding: 10px 16px;font-size: 1rem;border: none;background: #f0f4f8;color: #333;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;min-width: 44px;text-align: center;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);}
.pagination-btn:hover {background: #007bff;color: white;box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);transform: translateY(-1px);}
.pagination-btn.active {background: linear-gradient(135deg, #007bff, #00c6ff);color: white;font-weight: 600;box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);}
.pagination-btn:disabled {opacity: 0.6;cursor: not-allowed;}
@media (max-width: 768px) {
.search-group {flex-direction: column;}
.search-input,
.select-dropdown,
.search-button {width: 100%;}
.search-button {justify-content: center;}
.company-row {flex-direction: column;align-items: flex-start;}
.company-col.actions {margin-top: 12px;}
.tag-filters {justify-content: flex-start;}}

/* admin page css starts here */    

.admin-container {max-width: 800px;margin: 0 auto;background: #fff;padding: 30px;border-radius: 10px;box-shadow: 0 0 15px rgba(0,0,0,0.1);}
.admin-heading {text-align: center;margin-bottom: 25px;}
.admin-group {margin-bottom: 20px;}
.admin-label {display: block;margin-bottom: 4px;font-weight: 600;font-size: 14px;}
.admin-input {width: 100%;padding: 10px;border-radius: 5px;border: 1px solid #ccc;}
.admin-button-group {display: flex;justify-content: space-between;gap: 10px;}
.admin-button-group {display: flex;flex-wrap: wrap;gap: 15px;justify-content: center;margin-top: 20px;}
.admin-button {flex: 1 1 30%;padding: 14px 20px;border: none;border-radius: 8px;font-weight: 600;font-size: 16px;cursor: pointer;color: #fff;transition: background-color 0.3s ease, transform 0.2s ease;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);text-align: center;}
.admin-button:hover {transform: translateY(-2px); opacity: 0.95;}
.admin-submit {background: linear-gradient(135deg, #28a745, #218838);}
.admin-edit {background: linear-gradient(135deg, #007bff, #0069d9);}
.admin-clear {background: linear-gradient(135deg, #dc3545, #c82333);}
.input-with-icon {position: relative;margin-bottom: 10px;}
.input-with-icon .admin-input {padding-right: 90px;}
.add-icon, .remove-icon {position: absolute;height: 100%;width: 40px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: bold;cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;}
.add-icon {right: 0;background-color: #007bff;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.remove-icon {right: 0px;background-color: #dc3545;}
.add-icon:hover {background-color: #0056b3;transform: scale(1.05);}
.remove-icon:hover {background-color: #a71d2a;transform: scale(1.05);}





  


/* ========== LIGHT/DARK MODE ========== */
body.dark-mode {background-color: #121212;color: #e0e0e0;}
.dark-mode .listing-title,
.dark-mode .form-label,
.dark-mode .company-name,
.dark-mode .company-desc,
.dark-mode .mode-label {color: #e0e0e0;}
.dark-mode .admin-heading {color: #e0e0e0;}
.dark-mode .admin-container {background-color: #1e1e1e;}
.dark-mode .admin-input {background: transparent; color: #e0e0e0;}
.dark-mode .company-name h1 { color: #e0e0e0;}
.dark-mode .search-input,
.dark-mode .select-dropdown {background: #1e1e1e;border: 1px solid #444;color: #eee;}
.dark-mode .company-row {background: #1a1a1a;box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);}
.dark-mode .map-btn a,
.dark-mode .more-btn a { color: #eee;}
.dark-mode .map-btn,
.dark-mode .more-btn,
.dark-mode .pagination-btn,
.dark-mode .tag-btn {background-color: #2a2a2a;color: #eee;}
.dark-mode .mode-toggle-wrapper {background-color: #1c1c1c;color: #eee;box-shadow: 3px 0px 25px 0px rgb(19, 19, 19);}
.dark-mode .pagination-btn.active,
.dark-mode .tag-btn.active,
.dark-mode .map-btn:hover,
.dark-mode .more-btn:hover,
.dark-mode .pagination-btn:hover,
.dark-mode .tag-btn:hover {background: #007bff;color: white;}


 /* Back to Top Button */
 #backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  backdrop-filter: blur(8px);
  background: rgba(138, 127, 127, 0.685);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  color: rgb(17, 0, 0);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.3s ease;
}

#backToTop svg {
  transition: transform 0.3s ease;
}

#backToTop:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #00f2fe, #4facfe);
}

#backToTop:hover svg {
  transform: translateY(-2px);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 242, 254, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
  }
}

#backToTop.pulsing {
  animation: pulse 2s infinite;
}