html, body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: 'Mukta Mahee', sans-serif;
  color: #222;
  line-height: 1.5;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column; /* Default stacking */
  padding-top: 50px;
}

.hero .row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap; /* Allow wrapping */
}

.hero .col-sm-6 {
  flex: 1 1 100%; /* Default to 100% width */
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero h1 span {
  font-size: 2.5rem;
  font-weight: 700;
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hero h1 small {
  font-weight: 300;
  font-size: 2rem;
}

a {
  color: #0033A0;
  transition: all .35s;
}

a:hover, a:focus {
  color: #B22234;
  text-decoration: none;
}

a.btn:hover, a.btn:focus {
  color: #fff;
}

section, .form-control, .btn {
  padding: 10px;
}

.card-outline-primary {
  border-color: #0033A0;
}

.height-100 {
  min-height: 400px;
}

.col-fixed {
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.vMiddle, #main-offer-form {
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .hero {
    flex-direction: row; /* Horizontal layout on larger screens */
  }

  .col-sm-6 {
    flex: 0 0 50%; /* Each column takes up 50% on medium and larger screens */
  }

  .hero h1 span {
    font-size: 3rem; /* Increase size on larger screens */
  }
}

@media (max-width: 768px) {
  .hero .col-sm-6 {
    flex: 1 1 100%; /* Stack to full width on smaller screens */
  }
}

@media (max-width: 480px) {
  .hero h1 span {
    font-size: 2rem; /* Adjust font size further on very small screens */
  }

  .hero h1 small {
    font-size: 1.5rem;
  }

  .form-control {
    height: 2.5rem; /* Adjust form control height on small screens */
  }

  .btn {
    font-size: 1rem; /* Adjust button size for better mobile readability */
  }
}

/* Additional form control tweaks */
.form-control {
  height: 3rem;
}

textarea.form-control {
  height: 6rem;
}

.form-control:hover, .form-control:focus {
  border-color: #0033A0;
}

.bg-alt, .bg-white {
  background-color: #fff;
}

.bg-faded {
  background-color: #F2F2F2;
}

.bg-blue, .bg-primary {
  background-color: #0033A0 !important;
}

.bg-red {
  background-color: #B22234 !important;
}

.text-faded { color: #D9EDF7; }
.text-dark { color: #37474F; }
.text-muted { color: #999 !important; }
.text-light { color: #fff; }
.text-light:hover, .text-light:focus { color: #eee; }
.text-primary { color: #0033A0 !important; }
.text-red { color: #B22234 !important; }
.text-blue { color: #0033A0 !important; }
.text-white { color: #fff !important; }

.icon-lg { font-size: 60px; }
.icon-md { font-size: 2.5rem; }
.icon-sm { font-size: 30px; }

.action-icons .lead {
  font-size: 1rem;
}

.form-control-feedback {
  font-size: .875rem;
}

.btn {
  font-weight: 700;
  cursor: pointer;
}

.btn-outline-white {
  color: #fff !important;
  background-color: transparent;
  border-color: #fff;
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.btn-white {
  color: #0033A0;
  background-color: #fff;
  border-color: #fff;
}

.btn-white:hover {
  background: transparent !important;
  color: #0033A0 !important;
}

.btn-radius {
  border-radius: 50px;
}

.border-none {
  border: none !important;
}

/* Prevent any text wrapping and handle overflow */
.hero h1 span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Handle mobile text and layout changes */
@media (max-width: 576px) {
  /* Stack layout */
  .hero {
    flex-direction: column; /* Stack the domain title and form vertically */
  }

  .hero h1 span {
    font-size: 2rem; /* Adjust domain title size */
  }

  .hero h1 small {
    font-size: 1.5rem;
  }

  /* Form controls take full width */
  .form-control {
    width: 100%;
    font-size: 1rem; /* Adjust font size */
  }

  .btn {
    font-size: 1rem; /* Adjust button size */
  }
}

/* Ensure email and phone inputs are stacked vertically */
.form-group .row {
  flex-direction: column; /* Stack form inputs vertically */
  width: 100%;
}

/* Optional: Provide some spacing between the email and phone inputs */
.form-group .row .col {
  margin-bottom: 1rem;
}