/* :root {
    --color-primary: #5C56E1;
    --color-primary-dark: #5b21b6;
    --color-accent: #8B5CF6;
    --color-card: #FFFFFF;
    --color-input: #F1F1FF;
    --color-text: #09090E;
    --color-placeholder: #5C5A87;
    --color-border: #D4D4ED;
    --color-gradient: linear-gradient(135deg, #5C56E1, #8B5CF6);
}

body.dark-theme {
    --color-card: #1E293B;
    --color-input: #141B2D;
    --color-text: #F3F4F6;
    --color-placeholder: #A3B6DC;
    --color-border: #334155;
    background: var(--color-card);
    background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);


	    --color-white: #fff;
    --color-gray-100: #f7f7f7;
    --color-gray-200: #f1f1f1;
    --color-gray-300: #bbb;
    --color-gray-400: #a5a5a5;
    --color-gray-500: #767676;
    --color-gray-600: #666;
    --color-gray-700: #555;
    --color-gray-800: #333;
    --color-gray-900: #242424;
    --bgcolor-black-rgb: 0,0,0;
    --bgcolor-white-rgb: 255,255,255;
    --bgcolor-white: #fff;
    --bgcolor-gray-100: #f7f7f7;
    --bgcolor-gray-200: #f7f7f7;
    --bgcolor-gray-300: #f1f1f1;
    --bgcolor-gray-400: rgba(187,187,187,0.4);
    --brdcolor-gray-200: rgba(0,0,0,0.075);
    --brdcolor-gray-300: rgba(0,0,0,0.105);
    --brdcolor-gray-400: rgba(0,0,0,0.12);
    --brdcolor-gray-500: rgba(0,0,0,0.2);
} */
*{
	margin:0;
	padding: 0;
	outline: none;
}
 
a{
	text-decoration: none;
	color: #6d4eec;
}
a:hover{
	text-decoration: none;
}
.button{
	padding: 9px 30px;
	background: #6d4eec;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	border: 2px solid #6d4eec;
	border-radius: 25px;
	transition: 0.5s all ease;
}
.button:hover{
	background: #f1f1f1;
	color: #6d4eec;
}
.title{
	font-size: 28px;
	font-weight: 500;
	color: #444;
}
ul{
	list-style-type: none;
	margin-bottom: 0px;
}
img{
	width: 100%;
}

input, select, textarea{
	outline: none;
}
.container{
	width:98%;
	padding: 0px 15px;
	margin-right:auto;
	margin-left:auto;
}
.container-fluid{
	width: 100%;
	padding: 0px 15px;
	margin-right: auto;
	margin-left: auto;
}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.content-center{
	display: grid;
	place-content:center;
}
.d-flex{
	display: flex;
}
.flex-between{
	display: flex;
	justify-content: space-between;
}
.flex-around{
	display: flex;
	justify-content: space-around;
}
.flex-between-center{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-around-center{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex-wrap{
	display: flex;
	flex-wrap: wrap;
}

@media (max-width480px){
	.flex-column{
		display: flex;
		flex-direction: column;
	}
	.full{
		width: 100%;
	}
}
.d-block{
	display: block;
}
.align-center{
	align-items: center;
}
.text-center{
	text-align: center;
}
.text-right{
	text-align: right;
}
.text-white{
	color: #fff;
}
.text-dark{
	color: #444;
}
.text-success{
	color: #4caf50;
}
.text-danger{
	color: #e91e63;
}
.text-primary{
	color: #6d4eec;
}
.text-secondery{
	color: #009688;
}
.text-warning{
	color: #ff9800;
}

/*****Margin******/

.mt-1{
	margin-top: 5px;
}
.mt-2{
	margin-top: 10px;
}
.mt-3{
	margin-top: 15px;
}
.mt-4{
	margin-top: 20px;
}
.mt-5{
	margin-top: 25px;
}
.mt-6{
	margin-top: 40px;
}
.mb-1{
	margin-bottom: 5px;
}
.mb-2{
	margin-bottom: 10px;
}
.mb-3{
	margin-bottom: 15px;
}
.mb-4{
	margin-bottom: 20px;
}
.mb-5{
	margin-bottom: 25px;
}
.mb-6{
	margin-bottom: 40px;
}
.ml-1{
	margin-left: 5px;
}
.ml-2{
	margin-left: 10px;
}
.ml-3{
	margin-left: 15px;
}
.ml-4{
	margin-left: 20px;
}
.ml-5{
	margin-left: 25px;
}
.ml-6{
	margin-left: 40px;
}
.mr-1{
	margin-right: 5px;
}
.mr-2{
	margin-right: 10px;
}
.mr-3{
	margin-right: 15px;
}
.mr-4{
	margin-right: 20px;
}
.mr-5{
	margin-right: 25px;
}
.mr-6{
	margin-right: 40px;
}



/***** Padding ******/

.pt-1{
	padding-top: 5px;
}
.pt-2{
	padding-top: 10px;
}
.pt-3{
	padding-top: 15px;
}
.pt-4{
	padding-top: 20px;
}
.pt-5{
	padding-top: 25px;
}
.pt-6{
	padding-top: 40px;
}
.pb-1{
	padding-bottom: 5px;
}
.pb-2{
	padding-bottom: 10px;
}
.pb-3{
	padding-bottom: 15px;
}
.pb-4{
	padding-bottom: 20px;
}
.pb-5{
	padding-bottom: 25px;
}
.pb-6{
	padding-bottom: 40px;
}
.pl-1{
	padding-left: 5px;
}
.pl-2{
	padding-left: 10px;
}
.pl-3{
	padding-left: 15px;
}
.pl-4{
	padding-left: 20px;
}
.pl-5{
	padding-left: 25px;
}
.pl-6{
	padding-left: 40px;
}
.pr-1{
	padding-right: 5px;
}
.pr-2{
	padding-right: 10px;
}
.pr-3{
	padding-right: 15px;
}
.pr-4{
	padding-right: 20px;
}
.pr-5{
	padding-right: 25px;
}
.pr-6{
	padding-right: 40px;
}


/**** mx/ my****/
.mx-1{
	margin: 0px 5px;
}
.mx-2{
	margin: 0px 10px;
}
.mx-3{
	margin: 0px 15px;
}
.mx-4{
	margin: 0px 20px;
}
.mx-5{
	margin: 0px 25px;
}
.mx-6{
	margin: 0px 40px;
}

.my-1{
	margin: 5px 0px;
}
.my-2{
	margin: 10px 0px;
}
.my-3{
	margin: 15px 0px;
}
.my-4{
	margin: 20px 0px;
}
.my-5{
	margin: 25px 0px;
}
.my-6{
	margin: 40px 0px;
}


/*****px /py ******/

.px-1{
	padding: 0px 5px;
}
.px-2{
	padding: 0px 10px;
}
.px-3{
	padding: 0px 15px;
}
.px-4{
	padding: 0px 20px;
}
.px-5{
	padding: 0px 25px;
}
.px-6{
	padding: 0px 40px;
}

.py-1{
	padding: 5px 0px;
}
.py-2{
	padding: 10px 0px;
}
.py-3{
	padding: 15px 0px;
}
.py-4{
	padding: 20px 0px;
}
.py-5{
	padding: 25px 0px;
}
.py-6{
	padding: 40px 0px;
}