/*
*  theme overwrite 
=================================
=================================
=================================*/
/**! ----- font family ---- **/
body {
	font-family: "Aileron", sans-serif, "Aileron", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Aileron", sans-serif;
}

.blockquote {
	font-family: "Noto Serif", serif;
}

/**! ----- colors ---- **/
.bg-color-primary, .btn--bg-primary, .navbar-sticky--on .btn,
	.btn--bg-grey:hover, .btn--outline:hover, .btn--outline-thick:hover,
	.btn-border-hover.btn--color-white:before, .card--focused,
	.card--outline:hover, .card--outline:focus, .social-lists li a:hover,
	.media-player-icon--fill-primary, .oval, .slick-active .slick-dots--long,
	.pagination .page-item.active .page-link {
	background: #2f5bea;
}

.color-primary, .hero-content .btn:hover .media-player-icon--fill-grey,
	.btn--bg-white:hover, .btn--color-primary, .btn--color-primary:hover,
	.btn--color-dark.btn-text-hover:hover, .btn--outline.btn--color-primary,
	.btn--outline-thick.btn--color-primary, .btn-text-hover:hover,
	.card--focused .btn__text, .lang-selector .lang-dropdown__item:focus,
	.lang-selector .lang-dropdown__item:hover, .icon-rounded .icon,
	.media-player-icon--fill-grey:hover, .btn:hover .media-player-icon--fill-grey i,
	.pagination .page-item .page-link:hover, .dropdown-item:focus,
	.dropdown-item:hover, .dropdown-item.active, .dropdown-item:active,
	.features--slider-2 .slick-arrow:hover i, .footer-widget ul li a:hover,
	.footer .nav li a:hover {
	color: #2f5bea;
}

.features .swipe-tab.active-tab .swipe-tab__inner {
	-webkit-box-shadow: 0px 2px 0px #2f5bea;
	box-shadow: 0px 2px 0px #2f5bea;
}

.border-primary, .hr--blod, .btn--color-primary, .btn--color-dark.btn-text-hover:hover,
	.btn--outline:hover, .btn--outline-thick:hover, .btn-text-hover:hover {
	border-color: #2f5bea;
}

.bg-fill-primary {
	fill: #2f5bea;
}

/*! Place your custom styles here (below). 
      This will make it much easier to update the template later - you'll only need to preserve "this file
  ===================================================================================================*/
  
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 300px;
  margin: 0 auto;
  font-family: Roboto, helvetica, arial, sans-serif;
  text-size-adjust: 100%; /* replaces -ms-text-size-adjust and -webkit-text-size-adjust */
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.form-group input {
  padding: 0.5rem;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  font-size: 14px;
}

button[type="submit"] {
  padding: 0.5rem;
  background-color: #0078d4;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #005a9e;
}
/* Error state */
input.is-invalid, textarea.is-invalid {
  border: 2px solid #dc3545; /* Bootstrap danger red */
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

/* Success state */
input.is-valid, textarea.is-valid {
  border: 2px solid #28a745; /* Bootstrap success green */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* Error messages: force them above reCAPTCHA popup */
.text-danger {
  position: relative;   /* create stacking context */
  z-index: 200000;      /* higher than reCAPTCHA overlay */
}

/* Success messages: also keep them above */
.text-success {
  position: relative;
  z-index: 200000;
}

/* Input borders for validation states */
input.is-invalid, textarea.is-invalid {
  border: 2px solid #dc3545; /* Bootstrap danger red */
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

input.is-valid, textarea.is-valid {
  border: 2px solid #28a745; /* Bootstrap success green */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

.grecaptcha-badge {
  right: 20px !important; /* bring it into view */
  bottom: 20px !important;
}
.grecaptcha-error {
  color: red;
  font-size: 0.9rem;
  margin-top: 5px;
}