/* ========== Common Breakpoints ========== */

/* --- Below 900px --- */
@media (max-width: 900px) {
  .quick-links {
    gap: 20px;
    font-size: 14px;
  }

  .header-buttons .button {
    padding: 8px 20px;
    font-size: 14px;
  }
}

/* --- Below 768px (Tablet & Mobile) --- */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 10px 20px;
  }

.logo {
  margin-left: auto;
  margin-bottom: 10px;
}


  .menu-toggle {
    display: flex;
/*    margin-left: auto;*/
  }

  .quick-links,
  .header-buttons {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }

  .header.active .quick-links,
  .header.active .header-buttons {
    display: flex;
  }

  .quick-links a,
  .header-buttons .hbuttons {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    text-align: left;
  }

  .button-wrapper {
    width: 100%;
	padding-top: 16px;
  }

  .input-container {
    flex-direction: column;
    align-items: stretch;
  }

  #countryCode,
  #number {
    width: 100%;
    margin-bottom: 10px;
  }

  .page-container {
    padding-top: 100px;
  }

  #map {
    height: 300px;
    border-radius: 8px;
  }

  .thank-you-message {
    padding: 30px;
  }

  .thank-you-title {
    font-size: 2em;
  }

  .thank-you-tagline {
    font-size: 1.1em;
  }
  
}

/* --- Below 600px (Mobile) --- */
@media (max-width: 600px) {
  .header {
    justify-content: center;
    padding: 15px 20px;
  }

  .logo {
    margin-bottom: 10px;
  }

  .quick-links {
    gap: 15px;
    margin-bottom: 10px;
  }

  .header-buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }

  .button-wrapper {
    width: 100%;
	padding-top: 16px;
  }
  
  .header-buttons .hbuttons {
    width: 100%;
    max-width: 300px;
    font-size: 15px;
  }
}

/* --- Below 480px (Small Mobile) --- */
@media (max-width: 480px) {
  .hero-section h1 {
    font-size: 1.8em;
  }
  
}

/* Layout: wrap option boxes if inside a container */
.option-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* --- Below 768px --- */
@media (max-width: 768px) {
  .option-box {
    width: 100%;
    height: 120px;
  }

  .option-box span {
    font-size: 14px;
  }

  .option-box img {
    max-width: 50px;
    max-height: 50px;
  }
}

/* --- Below 500px --- */
@media (max-width: 500px) {
  .option-box {
    width: 100%;
    height: auto;
  }

  .option-box span {
    font-size: 13px;
  }

  .option-box img {
    max-width: 40px;
    max-height: 40px;
  }
}

/* --- Below 380px --- */
@media (max-width: 380px) {
  .option-box {
    width: 100%;
    height: auto;
  }
}