body {
  margin: 0;
  font-family: 'Arial', sans-serif; /* Or a closer font if you know it */
  line-height: 1.6;
  margin-top: 100px;
}

.ms-hero-section {
  position: relative;
  height: 80vh; /* Adjust height as needed, or use min-height */
  min-height: 600px; /* Ensure it's tall enough */
  background-image: url('https://kits.krakenbox.net/breno/wp-content/uploads/sites/12/2025/03/man-in-protective-vest-with-his-arms-crossed-in-fr-Z2HLCPE.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* This creates the parallax effect */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 100px;
  /* background-color: #ddd; */
  margin-top: 0;

}

.ms-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.55); Dark overlay to make text readable */
  z-index: 1;
}

.ms-hero-content {
  position: relative;
  z-index: 2; /* Ensure content is above the overlay */
  max-width: 800px; /* Limit content width */
}

.ms-hero-content .ms-sub-heading {
  color: #f07c29; /* Orange color */
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 10px;
}

.ms-hero-content h1 {
  font-size: 3em; /* Adjust as needed */
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.2;
}

.ms-hero-content .ms-description {
  font-size: 1em;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #fdfbfb;
}

.ms-cta-form-container {
  display: flex;
  background-color: white;
  border-radius: 50px; /* For very rounded corners */
  padding: 8px; /* Inner padding for the container */
  max-width: 650px; /* Adjust as needed */
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  align-items: center; /* Vertically align items within the form */
}

.ms-country-code-selector {
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: #333;
  font-size: 0.9em;
  border-right: 1px solid #e0e0e0; 
  white-space: nowrap; /* Prevent wrapping */
}

.ms-flag-icon {
  width: 24px; /* Adjust size */
  height: auto;
  margin-right: 8px;
  border: 1px solid #ddd; /* Optional: slight border around flag */
}

.ms-country-code-selector span {
  margin-right: 5px;
}

.ms-dropdown-arrow {
  font-size: 0.8em;
  color: #777;
}

.ms-phone-input {
  flex-grow: 1; /* Take available space */
  border: none;
  outline: none;
  padding: 12px 15px; /* Adjust padding */
  font-size: 0.95em;
  color: #555;
  background-color: transparent; /* Make it transparent to show parent's white */
  min-width: 150px; /* Ensure it has some minimum width */
}

.ms-phone-input::placeholder {
  color: #999;
}

.ms-cta-button {
  background-color: #f07c29; /* Orange color */
  color: white;
  border: none;
  border-radius: 50px; /* Match container's roundness */
  padding: 12px 30px; /* Adjust padding */
  font-size: 0.95em;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap; /* Prevent text wrapping */
  transition: background-color 0.3s ease;
}

.ms-cta-button:hover {
  background-color: #d96c1f; /* Darker orange on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ms-hero-section {
      height: auto; /* Allow height to adjust to content */
      min-height: 70vh;
      padding-top: 60px;
      padding-bottom: 60px;
  }

  .ms-hero-content h1 {
      font-size: 2.2em;
  }

  .ms-hero-content .ms-description {
      font-size: 0.9em;
  }

  .ms-cta-form-container {
      flex-direction: column; /* Stack form elements vertically */
      border-radius: 20px; /* Less dramatic rounding on mobile */
      padding: 15px;
      max-width: 90%;
  }

  .ms-country-code-selector {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid #e0e0e0;
      padding: 10px 0;
      margin-bottom: 10px;
      justify-content: center;
  }

  .ms-phone-input {
      width: calc(100% - 30px); /* Full width minus padding */
      margin-bottom: 10px;
      text-align: center;
  }

  .ms-cta-button {
      width: 100%;
      padding: 15px;
  }
}

@media (max-width: 480px) {
  .ms-hero-content h1 {
      font-size: 1.8em;
  }
  .ms-hero-content .ms-sub-heading {
      font-size: 1em;
  }
}