@font-face {
  font-family: 'DMSans';
  src: url('fonts/dmsans-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/dmsans-bold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/dmsans-medium-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Optional: Font Awesome (for icons) */
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'DMSans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #000;
}

body, html, input, button {
  height: 100%;
  
  background-color: #fff;
}

.container {
  display: flex;
  height: 100vh;
  flex-direction: row;
}

.left-pane {
  flex: 1;
  background: url('images/hw_1.jpg') no-repeat center center;
  background-size: cover;
}

.right-pane {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #fff;
}

.form-wrapper {
  width: 100%;
  max-width: 400px;
}

.form-wrapper h2 {
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: lighter;
}

.form-wrapper p {
  margin-bottom: 20px;
  font-size: 14px;
}

.form-row {
    display: flex;
    gap: 10px;
}

.input-group {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  width: 100%;
}


.input-group select,
.input-group input,
.input-group textarea
{
  width: 100%;
  padding: 12px;
  border: none;
  font-size: 14px;
}

.input-group select {
  width: 80px;
  border-right: 1px solid #ccc;
  background-color: #f9f9f9;
}

.input-group input {
  flex: 1;
  outline: none;
}

.email-link {
  display: block;
  text-align: right;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  margin-bottom: 20px;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  margin-bottom: 20px;
}

.checkbox-group input {
  margin-right: 10px;
  margin-top: 4px;
}

.checkbox-group label a {
  text-decoration: underline;
  color: #000;
}

.file-input-wrapper {
	width: 100%;
	height: 41px;
}
.file-input-wrapper .btn {
	width: 160px;
	margin: 6px 10px;
	padding: 6px;
}
.file-input-wrapper1 #fileName {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn {
  width: 100%;
  padding: 12px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
}
.btn-disable {
	background: #d2d2d2;
	cursor: no-drop;
}

.register-text {
  text-align: center;
  font-size: 13px;
}

.register-text a {
  color: #000;
  font-weight: 500;
  text-decoration: underline;
}

.red_msg
{
	padding: 10px;
	background: #fee;
	margin: 10px 0px;
	color: #f91d1d;
	font-size: 14px;
	border-left: 3px solid #f91d1d;
}

.main::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	z-index: 1; /* behind the input */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='94' height='64'><text y='20' font-size='16'>hindware 🛁</text><text y='50' font-size='16'>hindware 🛁</text></svg>");
	background-repeat: repeat;
	background-size: 94px 64px;
	opacity: 0.05; /* faded emojis */
	pointer-events: none; /* allows clicking input normally */
}

/* --- Mobile Responsive --- */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left-pane {
    height: 40vh;
    width: 100%;
  }

  .right-pane {
    height: 60vh;
    width: 100%;
    padding: 20px;
    justify-content: flex-start;
  }

  .form-wrapper {
    max-width: 100%;
  }
}