/* For WebKit browsers */
::-webkit-scrollbar {
	width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
	background: #f1f1f1; /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
	background: #888; /* Color of the scrollbar thumb */
	border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
	background: #555; /* Color of the scrollbar thumb when hovered */
}

/* For Firefox */
html {
	scrollbar-width: thin; /* 'auto' or 'thin' */
	scrollbar-color: #888 #f1f1f1; /* thumb color, track color */
}

/* CSS Reset */
/*
	1. Use a more-intuitive box-sizing model.
  */
*,
*::before,
*::after {
	box-sizing: border-box;
}
/*
	  2. Remove default margin
	*/
* {
	margin: 0;
}
/*
	  Typographic tweaks!
	  3. Add accessible line-height
	  4. Improve text rendering
	*/
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
/*
	  5. Improve media defaults
	*/
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
/*
	  6. Remove built-in form typography styles
	*/
input,
button,
textarea,
select {
	font: inherit;
}
/*
	  7. Avoid text overflows
	*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}
p {
	margin: 0;
}
/*
	  8. Create a root stacking context
	*/

#root,
#__next {
	isolation: isolate;
}

ul {
	list-style-type: none;
}
li {
	cursor: pointer;
}

:root {
    --clr-primary: #434875;    
    --clr-neutral-200: #999;  
    --clr-neutral-300: #999;   
    --transition: 0.2s ease;   
    --br: 6px;                   
}

/* Font */
.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.roboto-black {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
}

body {
	font-family: "Roboto", sans-serif;
}


.bg-primary {
	background: linear-gradient(to right, #434875, #b18647) !important;
}

.text-title {
	color: #3a352d;
}

.text-primary{
	color:#434875 !important;
}

.text-paragraph {
	color: #585249;
}

.bg-light {
	background-color: #f9f8f6;
}

.form {
	--spacing-default: 16px;
	--spacing-top: var(--spacing-default);
	--spacing-left: var(--spacing-default);
	--spacing-right: var(--spacing-default);
	--spacing-bottom: var(--spacing-default);
	--spacing-top-offset: -0.7;
	--spacing-left-offset: 0.5;
	display: grid;
	gap: 1rem;
}
  
.form-group {
 position: relative;
}
  
.input {
	border-radius: var(--br);
	padding-block: var(--spacing-top) var(--spacing-bottom);
	padding-inline: var(--spacing-right) var(--spacing-left);
	font: inherit;
}
  
.input {
	display: block;
	width: 100%;
	border: 1px solid var(--clr-neutral-200);
	transition: var(--transition);
}
  
.input:focus {
	outline: none;
	border-color: var(--clr-primary);
}
  
.label {
	position: absolute;
	top: var(--spacing-top);
	left: var(--spacing-left);
	color: var(--clr-neutral-300);
	font-size: 16px;
	pointer-events: none;
	transition: var(--transition);
}

.input:focus ~ label,
.input:valid ~ label {
  top: calc(var(--spacing-top) * var(--spacing-top-offset));
  left: calc(var(--spacing-left) * var(--spacing-left-offset));
  font-size: 15px;
  background-color: #fff;
  color: var(--clr-primary);
  padding-inline: 4px;
}
body{
	background: linear-gradient(to right, rgba(67, 72, 117, .9), rgba(177, 134, 71, 0.9));
}

#login{
	width:100%;
	height:100vh;
	display:grid;
	place-items:center;

}

.login__card{
	padding:3rem;
	width:28rem;
	border: 1px solid #585249;
	border-radius:16px;
	background-color:#ffffff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.login__logo{
	width:6rem;
}
.login__title{
	margin-top:1rem;
	font-size:24px;
	text-align:center;
	font-weight:bold;
	background: linear-gradient(to right, #434875, #b18647);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
	
}


.login__btn{
	border:none;
	color:#ffffff;
	font-size:20px;
	font-weight:bold;
	padding:16px 0;
	border-radius:32px;
	background: linear-gradient(to right, #434875, #b18647) !important;
}

.login__forgot-password{
	font-size:14px;
	font-weight:500;
	cursor:pointer;
}

@media (max-width: 768px) {

	.login__card{
		padding:2rem;
		width:100%;
		border: none;
		border-radius:0px;
		box-shadow: none;

	}

	#login{
	width:100%;
	height:100vh;
	display:grid;
	place-items:center;
	background: white;


}

}

.modal-header {
	background: linear-gradient(to right, #434875, #b18647) !important;
	color: #fff;
}

.btn-primary {
	background: linear-gradient(to right, #434875, #b18647) !important;
	border: none !important;
}

.btn {
	border: none !important;
}