body {
  margin: 0;
  padding: 0;
}

.form-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 40px;
}

.form-boarder {
  border: 2px solid #e0e0e0;
}

.signup-card {
  width: 100%;
  background: #ffffff;
  padding: 50px 35px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.signup-card img {
  max-width: 140px;
}

.signup-card h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  margin-bottom: 6px;
}

.singup-text h5 {
  text-transform: uppercase;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  margin-bottom: 30px;
  color: #6F4E37;
}

.signup-card p {
  font-size: 16px;
  color: #6c757d;
  margin-bottom: 6px;
}

.signup-card .form-control {
  height: 46px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  padding-left: 14px;
}

.signup-card .form-control:focus {
  box-shadow: none;
  border-color: #3b82f6;
}

.btn-signup {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #193D7B 0%, #EFD8A8 100%);
  color: #ffffff;
  font-weight: 500;
  transition: all 0.35s ease;
}

.btn-signup:hover {
  background: linear-gradient(90deg, #1f4fa0 0%, #f2ddb5 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(239, 216, 168, 0.55);
}

.btn-signup:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(25, 61, 123, 0.3);
}

.social-btns .social-btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg, #0f1c2e 0%, #0b1624 100%);
  border-radius: 1px;
  border: 2px solid #EFD8A8;
  transition: all 0.3s ease;
}

.social-btns .social-btn img {
  width: 22px;
  height: auto;
  filter: brightness(0) invert(1);
}

.social-btns .social-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(239, 216, 168, 0.6);
}

.signup-card a {
  text-decoration: none;
  font-weight: 600;
  color: #3b82f6;
}

.signup-card a:hover {
  text-decoration: underline;
}

.signup-right {
  background: linear-gradient(180deg, #0b1d33 0%, #091a2c 100%);
}

.signup-right img {
  max-width: 300px;
}

.signup-right small {
  color: #ffffff;
  opacity: 0.85;
  font-size: 14px;
}

.brand-box {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand-line {
  width: 100%;
  height: 1px;
  background: rgba(230, 195, 122, 0.4);
  margin: 18px 0;
}

.brand-logo {
  max-width: 240px;
}

.brand-globe {
  width: 30px;
  margin-bottom: 8px;
}

.brand-url {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.form-divider {
  position: relative;
  width: 52%;
  margin: 1.75rem auto;
  text-align: center;
  font-size: 0.9rem;
}

.form-divider::before,
.form-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(203, 213, 225, 0) 0%,
      #cbd5e1 50%,
      rgba(203, 213, 225, 0) 100%);
}

.form-divider::before {
  left: 0;
}

.form-divider::after {
  right: 0;
}

.form-divider span {
  padding: 0 0.85rem;
  background-color: #fff;
  color: #6b7280;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}


.form-bottom-links p {
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 4px;
}

.form-bottom-links a {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-decoration: underline;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #9ca3af;
  font-size: 18px;
}

.password-toggle:hover {
  color: #3b82f6;
}

@media (max-width: 576px) {
  .form-divider {
    width: 85%;
  }
}

@media (max-width: 991px) {


  .signup-right {
    display: none !important;
  }

  .signup-card {
    box-shadow: none;
    padding: 30px 20px;
  }
}

.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip {
    display: block !important;
}

.form-control.is-invalid,.was-validated .form-control:invalid {
    border-color: #f05b22 !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23F05B22'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F05B22' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}

.form-control.is-invalid.cross,.was-validated .form-control.cross:invalid {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F15B22;%7D%0A%3C/style%3E%3Cpath class='st0' d='M8,16c-2.1,0-4.2-0.8-5.7-2.3C0.8,12.2,0,10.1,0,8c0-2.1,0.8-4.2,2.3-5.7C3.8,0.8,5.9,0,8,0 c2.1,0,4.2,0.8,5.7,2.3C15.2,3.8,16,5.9,16,8c0,2.1-0.8,4.2-2.3,5.7C12.2,15.2,10.1,16,8,16z M11.1,5.9L11.1,5.9 c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.5,0.2L8,7L5.9,4.9 C5.8,4.7,5.5,4.7,5.2,4.7C5,4.8,4.8,5,4.7,5.2c-0.1,0.2,0,0.5,0.2,0.7L7,8l-2.1,2.1c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5 c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2L8,9l2.1,2.1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2 c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5L9,8L11.1,5.9z'/%3E%3C/svg%3E")
}

.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus {
    border-color: #f05b22 !important;
    box-shadow: inherit
}

.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
}

.form-select.is-invalid,.was-validated .form-select:invalid {
    border-color: #f05b22
}

.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23F05B22'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F05B22' stroke='none'/%3e%3c/svg%3e");
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)
}

.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus {
    border-color: #f05b22;
    box-shadow: inherit
}

.form-check-input.is-invalid,.was-validated .form-check-input:invalid {
    border-color: #f05b22
}

.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked {
    background-color: #f05b22
}

.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus {
    box-shadow: inherit
}