body {
  margin: 0px;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

*{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.2px;
}

.parent {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1700' height='1000' preserveAspectRatio='none' viewBox='0 0 1700 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1148%26quot%3b)' fill='none'%3e%3crect width='1700' height='1000' x='0' y='0' fill='rgba(237%2c 237%2c 237%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c628.005C118.07%2c609.994%2c222.772%2c563.365%2c333.86%2c519.496C474.053%2c464.134%2c658.411%2c465.125%2c737.453%2c336.784C816.023%2c209.21%2c750.755%2c42.915%2c717.321%2c-103.135C686.223%2c-238.983%2c643.832%2c-373.501%2c551.051%2c-477.489C459.048%2c-580.604%2c330.175%2c-635.005%2c200.398%2c-682.494C62.69%2c-732.885%2c-79.496%2c-788.985%2c-223.416%2c-760.884C-373.472%2c-731.585%2c-531.962%2c-658.85%2c-605.942%2c-525.051C-678.272%2c-394.236%2c-606.531%2c-234.947%2c-596.688%2c-85.791C-589.034%2c30.199%2c-584.345%2c140.902%2c-554.579%2c253.268C-519.115%2c387.145%2c-521.187%2c554.883%2c-406.434%2c632.424C-291.853%2c709.848%2c-136.706%2c648.859%2c0%2c628.005' fill='%23dcdcdc'%3e%3c/path%3e%3cpath d='M1700 1536.406C1799.633 1536.859 1839.945 1401.9479999999999 1921.948 1345.358 2000.041 1291.467 2117.312 1293.981 2167.752 1213.615 2218.994 1131.971 2201.67 1025.076 2182.2200000000003 930.667 2163.581 840.192 2112.483 764.152 2059.559 688.441 2000.825 604.418 1954.922 495.654 1856.976 465.38699999999994 1758.924 435.087 1660.515 501.656 1563.508 535.1510000000001 1471.252 567.006 1369.133 584.191 1303.5520000000001 656.476 1237.395 729.396 1207.81 830.554 1206.187 929 1204.6680000000001 1021.169 1244.103 1108.068 1294.841 1185.03 1340.368 1254.088 1416.858 1289.152 1479.346 1343.345 1554.705 1408.7 1600.25 1535.952 1700 1536.406' fill='%23fefefe'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1148'%3e%3crect width='1700' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.card {
  display: flex;
  width: 70%;
  max-width: 1200px;
  min-height: 600px;
  border-radius: 16px;
  flex-direction: row;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: white;
  overflow: hidden;
  margin: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-height: 90vh; /* Prevent card from being too tall on small screens */
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.info {
  width: 45%;
  background-color: #871F05;
  padding: 48px 32px;
  font-family: 'Oswald';
  color: #FFF0F0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.info::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.login {
  width: 55%;
  background-color: white;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title-section
{
  font-family: 'Oswald';
  font-weight: 500;
}

.title-section h2 {
  font-family:inherit !important;
}
.t1 {
  font-size: 28px !important;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
}

.t2 {
  font-size: 30px !important;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
}

.t3 {
  font-size: 32px !important;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
}

.t4 {
  font-size: 34px !important;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
}

.t5 {
  font-size: 36px !important;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
}

.t6 {
  font-size: 38px !important;
  line-height: 1.2;
  margin: 0.5rem 0;
  font-weight: 500;
}


.logo-container {
  text-align: center;
  margin-bottom: 2.5rem;
}

.logo-container .logo-2 h3 {
  color: #c22b1a;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(40px, 5vw, 70px); /* Responsive font size */
  margin: 0;
  transition: transform 0.3s ease;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.logo-container:hover .logo-2 h3 {
  transform: scale(1.02);
}

.logo-container .logo-2 p {
  font-size: 20px;
  color: #34495e;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0px;
  margin-bottom: 38px;
}

.login-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

form {
  width: 100%;
}

.form-group {
  position: relative;
  margin-bottom: 1.8rem;
}

.form-group.fg-password {
  margin-bottom: 2.5rem;
}

label {
  position: absolute;
  top: -10px;
  left: 8px;
  padding: 3px 12px;
  font-size: 0.75em;
  color: #fff;
  background: #871F05;
  border-radius: 20px;
  z-index: 100;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

input {
  width: 100%;
  border: 2px solid #e1e8ef;
  border-radius: 8px;
  font-size: 1rem;
  padding: 14px 16px;
  transition: all 0.3s ease;
  background-color: #f8fafc;
  color: #2c3e50;
}

input:focus {
  border-color: #871F05;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
  outline: none;
}

input::placeholder {
  color: #94a3b8;
}

.input-wrapper fa-icon {
  position: absolute;
  right: 12px;
  color: #94a3b8;
  transition: color 0.3s ease;
}

.input-wrapper:focus-within fa-icon {
  color: #871F05;
}

button {
  padding: 16px;
  font-size: 1rem;
  color: white;
  background-color: #871F05;
  font-weight: 600;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  margin-top: 1rem;
  letter-spacing: 0.5px;
  border:2px solid #871F05;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.2);
  background-color: var(--primary-color-dark);
  color: #871F05;
}

button:active {
  transform: translateY(0);
  box-shadow: none;
}

.signup-link {
  text-align: center;
  width: 100%;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  background-color: white;
  color: #871F05;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid #871F05;
  padding: 15px;
  letter-spacing: 0.5px;
}

.signup-link:hover {
  background-color: #871F05;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.1);
}

.signup-link:active {
  transform: translateY(0);
  box-shadow: none;
}

.division {
  padding: 32px 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.first-line, .second-line {
  width: 45%;
  height: 1px;
  background: linear-gradient(to right, #e1e8ef 0%, #871F05 100%);
}

.second-line {
  background: linear-gradient(to left, #e1e8ef 0%, #871F05 100%);
}

.text {
  color: #871F05;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0 12px;
}

.forgot-password-link {
  float: right;
  padding-top: 8px;
  font-size: 0.85rem;
  text-decoration: none;
  color: #871F05;
  transition: all 0.3s ease;
  font-weight: 500;
}

.forgot-password-link:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

@media (max-width: 992px) {
  .card {
    width: 85%;
    min-height: 500px;
  }
  
  .t1 { font-size: 24px !important; }
  .t2 { font-size: 26px !important; }
  .t3 { font-size: 28px !important; }
  .t4 { font-size: 30px !important; }
  .t5 { font-size: 32px !important; }
}

@media (max-width: 768px) {
  .card {
    width: 90%;
    flex-direction: column;
    min-height: auto;
    max-height: none; /* Allow card to expand on mobile */
  }

  .info {
    width: 100%;
    padding: 24px 20px;
    max-height: 200px; /* Limit height of info section on mobile */
  }

  .login {
    width: 100%;
    padding: 28px 24px;
  }

  .logo-container .logo-2 h3 {
    font-size: 48px;
  }

  .logo-container .logo-2 p {
    font-size: 16px;
    margin-bottom: 24px; /* Reduce bottom margin */
  }
  
  .title-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .title-section h2 {
    margin: 0.25rem 0.5rem;
    font-size: 24px !important;
  }
  
  .form-group {
    margin-bottom: 1.5rem; /* Reduce spacing between form groups */
  }
}

@media (max-width: 480px) {
  .parent {
    padding: 12px;
    align-items: flex-start; /* Align to top on very small screens */
    padding-top: 20px;
  }

  .card {
    width: 100%;
    border-radius: 12px; /* Smaller border radius */
  }

  .info {
    padding: 20px 16px;
    max-height: 160px; /* Even smaller info section */
  }

  .login {
    padding: 20px 16px;
  }

  .logo-container {
    margin-bottom: 1.5rem; /* Reduce margin */
  }

  .logo-container .logo-2 h3 {
    font-size: 36px;
  }

  .logo-container .logo-2 p {
    font-size: 14px;
    margin-bottom: 16px;
  }

  button, .signup-link {
    padding: 12px;
    font-size: 0.9rem;
  }

  .division {
    padding: 16px 0;
  }
  
  input {
    padding: 12px 14px; /* Smaller input fields */
    font-size: 0.9rem;
  }
  
  .title-section h2 {
    font-size: 20px !important;
    margin: 0.2rem;
  }
}

/* Add additional media query for very small screens */
@media (max-width: 360px) {
  .card {
    border-radius: 8px;
  }
  
  .info {
    padding: 16px 12px;
    max-height: 140px;
  }
  
  .login {
    padding: 16px 12px;
  }
  
  .logo-container .logo-2 h3 {
    font-size: 32px;
  }
  
  .logo-container .logo-2 p {
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .form-group {
    margin-bottom: 1.2rem;
  }
  
  label {
    font-size: 0.7em;
    padding: 2px 10px;
  }
  
  input {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
  
  button {
    padding: 10px;
    font-size: 0.85rem;
  }
}