*{margin: 0px;padding: 0px;box-sizing: border-box;}
body {
        font-family: 'Montserrat', sans-serif;
}

:root{
	--black-color: #000;
	--white-color: #fff;
	--gray-color: #f4f4f4;
}

h4{font-size: 20px;line-height: 1.2;font-weight: 500;}
span{font-size: 12px;line-height: 1.1;font-weight: 400;}

/* Login page code starts */
.login-box {
	width: 100%;
	height: 100dvh;
	margin: 0px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}
.login-box .box{
	max-width: 400px;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   	text-align: center;
}
input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; }
button { width: 100%; padding: 10px; background: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
/* Login page code ends */

/* Index code starts */
.container{width: 100%;height: 100%;position: relative;display: flex;gap: 20px;}
.pagewrap{width: 100%;position: relative;padding: 0px 20px;}
.container-left{max-width: 400px;width: 100%;height: 100dvh;position: fixed;top: 0px;left: 0px;display: flex;flex-direction: column;justify-content: space-between;background-color: #000;}
.container-left-top{position: relative;display: flex;gap: 20px;margin-top: 20px;}
.container-left-top .image{width: 70px;height: 70px;border-radius: 70px;overflow: hidden;}
.container-left-top .title{display: flex;flex-direction: column;gap: 5px;}
.container-left-top .title h4{color: var(--white-color);}
.container-left-top .title span{color: var(--gray-color);}
/* Index code ends */