@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');

:root {
    /* ========== text color ============== */
	--primary: #2e384d;
    --secondary: #8798ad;
    --border: #2e5bff;
    --spacer: #8c54ff;
    --red: #e84b51;
    --green: #2db744;
	--line: #e4e8f0;

    /* ========== Background color ======== */
    --bg-primary: #f4f6fc;
    --bg-secondary: #ffffff;
    
    /* ========== Font weight ============= */
	--light-300: 300;
	--regular-400: 400;
	--medium-500: 500;
    --semi-bold-600: 600;

}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}

h1, h2, h3,
h4, h5, h5,
p {
	margin: 0;
}

/*====Now default font size is 10 px. 1rem = 10px====*/

html{
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body{
	font-family: 'Rubik', sans-serif;
	text-rendering: optimizeLegibility;
	background-color: var(--bg-primary);
}

.menu-items a.active{
	border-left: .5rem solid #2e5bff;
}


/* ====== STARTING MAIN LAYOUT DESIGN ======== */

/* ======= STARTING HEADER SECTION===========*/

header{
	width: 100%;
	height: 7rem;
	background-color: var(--bg-secondary);
	position: relative;
}
header>.row{
	display: flex;
	justify-content: space-between;
}
/* ==== STICKY ==== */
/* .sticky{
	background: var(--bg-secondary)
	padding: 10px 100px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
} */

.row>.icon{
	display: inline-block;
	margin-left: 19rem;
	margin-top: 2rem;
}
.icon>h1{
	display: inline-block;
}

.row>.overview{
	justify-content: center;
	margin-top: 2.4rem;
	font-size: .1rem;
	color: var(--primary);
	font-weight: var(--semi-bold-600);
	visibility: hidden;
}
.overview>i{
	color: var(--secondary);
	margin-left: 1rem;
}


.row>.avatar{
	margin: 2rem 8rem 0 0;
}
.avatar>a>img{
	width: 3rem;
	margin-right: 4rem;
	object-fit: contain;
}

/* ====== MENU SECTION ======= */
.menu{
	position: absolute;
	top: 0;
	left: 0;
	width: 8rem;
	height: 180vh;
	background-color: var(--bg-secondary);
	border-right: 1px solid #e4e8f0;
}
.menu>img{
	margin: 3rem 0 0 3rem;
}
.menu>.menu-items{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 18rem;
}
.menu-items>a{
	width: 8rem;
	height: 8rem;
	text-align: center;
}
.menu-items>a>img{
	margin: 2.5rem;
}
.menu-items>a:hover{
	background-color: var(--bg-primary);
	border-left: .3rem solid #2e5bff;
}

 /* ====NOTIFICATIONS SECTION===== */
.notifi{
	position: absolute;
	top: 7rem;
	right: 0;
	width: 28rem;
	height: 172vh;
	background-color: var(--bg-secondary);
	z-index: 1000000;
	border-top: .1px solid #e4e8f0;
	border-left: .1px solid #e4e8f0;
	opacity: 1;
	transition: 0.5s linear;
	
}
.notifi>.notifi-item1{
	display: flex;
	justify-content: space-around;
}
.notifi-item1>.left>.inner{
	display: flex;
	justify-content: space-between;
	margin-top: 4rem;
}
.inner>p{
	font-size: 3rem;
	font-weight: var(--light-300);
}
.inner>img{
	object-fit: contain;
	margin: 1rem 0 0 1rem;
	width: 3rem;
}
.left>span{
	display: block;
	font-size: 2rem;
	margin-top: 1rem;
	color: var(--secondary);
	text-transform: capitalize;
}
.notifi-item1>.right{
	margin-top: 6.5rem;
}
.right>a{
	font-size: 1.5rem;
	width: 3rem;
	height: 2rem;
	background-color: var(--bg-primary);
	padding: 2rem 3rem;
	text-transform: capitalize;
}
.right>a:hover{
	background-color: var(--bg-secondary);
	border: 1px solid #e4e8f0;
}

.notifi-item2>.inner-items{
	border-top: 1px solid #e4e8f0;
	margin-top: 3rem;
}
.notifi-item2>.inner-items:nth-child(7){
	border-bottom: 1px solid #e4e8f0;
	
}
.inner-items>.last{
	margin-bottom: 3rem;
}
.inner-items>h5{
	font-size: 2rem;
	color: var(--secondary);
	margin: 2rem 0 0 7rem;
	text-transform: capitalize;
}
.inner-items>.mid-item{
	display: flex;
	margin: 1rem 0 0 2rem;
}
.mid-item>img{
	object-fit: contain;
}
.mid-item>p{
	margin: 1rem 0 0 1.5rem;
	font-size: 2rem;
	color: var(--primary);
}
.inner-items>span{
	display: block;
	font-size: 1.5rem;
	color: var(--secondary);
	margin: 1rem 0 0 7rem;
}

/* =======CONTENT SECTION START============== */
.container{
	width: 80%;
	height: 140vh;
	margin: 6.7rem 0 0 19.5rem;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 40rem 52.3rem 46.3rem;
	grid-gap:3.7rem;
}

/* ======CONTENT SECTION GRID LAYOUT====== */
.progress{
	grid-row: 1/2;
	grid-column: 1/-1;
}
.map{
	background-color: var(--bg-secondary);
	grid-row: 2/3;
	grid-column: 1/-1;
	position: relative;
}
.card{
	grid-row: 3/4;
	grid-column: 1/-1;
}
.progress>.welcome{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 24rem auto ;
	grid-gap: 2rem;
}
.welcome>.score{
	background-color: var(--bg-secondary);
	grid-column: 1/3;
	display: flex;
}
.chart{
	background-color: var(--bg-secondary);
	grid-column: 3/-1;
	grid-row: 1/3;
	height: 40rem;
}
.cars{
	background-color: var(--bg-secondary);
	height: 14rem;
}
.mi{
	background-color: var(--bg-secondary);
	height: 14rem;
}

/* ==== PROGRESS SECTION ====== */
.score>.spacer1{
	margin: 4% 0 0 2%;
	flex-basis: 50%;
	height: 100%;
	text-align: center;
	position: relative;
}
.spacer1>img{
	width: 90%;
	height: 80%;
	object-fit: contain;
}
.spacer1>.mid{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.mid>h1{
	font-size: 4rem;
	font-weight: var(--light-300);
}
.mid>p{
	font-size: 2rem;
	color: var(--secondary);
}
.score>.spacer2{
	margin-top: 5%;
	margin-left: 3%;
	flex-basis: 50%;
	height: 100%;
	text-align: left;
}
.spacer2>h1{
	font-size: 4rem;
	font-weight: var(--light-300);
}
.spacer2>p{
	font-size: 2rem;
	color: var(--secondary);
}

/* ========= FLOW CHART ======= */
.chart>.flow-chart{
	width: 100%;
	height: 100%;
	padding: 2rem;
	
}
.chart>.flow-chart>p{
	font-size: 2rem;
	color: var(--secondary);
	margin-left: 3rem;
}
.flow-chart>img{
	width: 100%;
	height: 90%;
	object-fit: contain;
}
/* ======= cars ======== */
.welcome>.cars{
	padding: 2rem;
}
.cars>h4{
	font-size: 2rem;
	color: var(--secondary);
	text-transform: uppercase;
	font-weight: var(--medium-500);
}
.cars>h1{
	font-size: 3rem;
	font-weight: var(--light-300);
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.cars>i{
	color: var(--red);
	transform: rotate(45deg);
	font-size: 2rem;
	
}
.cars>span{
	color: var(--red);
	font-size: 2rem;
}

/* ======= mi ========= */
.welcome>.mi{
	padding: 2rem;
}
.mi>h4{
	font-size: 2rem;
	color: var(--secondary);
	text-transform: uppercase;
	font-weight: var(--medium-500);
}
.mi>h1{
	font-size: 3rem;
	font-weight: var(--light-300);
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.mi>i{
	color: var(--green);
	transform: rotate(-45deg);
	font-size: 2rem;
}
.mi>span{
	color: var(--green);
	font-size: 2rem;
}

/* ======== MAP SECTION START =========*/
.container>.map>p{
	padding: 2.2rem;
	font-size: 2rem;
	color: var(--secondary);
}
.map>img{
	width: 100%;
	height: 87%;
	object-fit: cover;
}
.map>.split{
	position: absolute;
	bottom: 2rem;
	right: 0;
}
.split>.split1{
	width: 32rem;
	height: 7rem;
	background-color: var(--bg-secondary);
	margin-bottom: 2rem;
	padding: 2.5rem;
}
.split1>h5{
	font-size: 1rem;
}
.split1>span{
	font-size: 1rem;
	color: var(--secondary);
}

/* ======= CARD SECTION START ======== */
/* ======GRID LAYOUT===== */
.card>.main-card{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 2rem;
	grid-template-rows: 46rem;
}
.main-card>.card-item{
	grid-column: 1/3;
	background-color: var(--bg-secondary);
	padding: 2rem;
}
.main-card>.trips{
	grid-column: 3/5;
	background-color: var(--bg-secondary);
}
.main-card>.service{
	grid-column: 5/-1;
	background-color: var(--bg-secondary);
}
.card-item>.top-item{
	display: flex;
	justify-content: space-between;
}
.top-item>p{
	font-size: 2rem;
	color: var(--secondary);
	text-transform: uppercase;
}
.top-item>img{
	object-fit: contain;
}

/* ======SINGLE ITEMS ======= */
.card-item>.down-item{
	margin-top: 2rem;
}
.down-item>.items{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}
.items>.left{
	display: flex;
}
.left>img{
	object-fit: contain;
}
.same{
	margin: 1rem 0 0 .5rem;
	font-size: 1.5rem;
	text-transform: capitalize;
}
.same2{
	color: var(--secondary);
}

/* ======= TRIPS ======= */
.main-card>.trips{
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.trips>.trips-top{
	display: flex;
	justify-content: space-between;
}
.trips-top>p{
	font-size: 2rem;
	color: var(--secondary);
	text-transform: uppercase;
}
.trips-top>img{
	object-fit: contain;
}
.trips>.trips-chart{
	width: 100%;
	height: 100%;
}
.trips-chart>img{
	width: 100%;
	height: 70%;
	object-fit: contain;
	margin-top: 2rem;
}
.trips>.trips-down{
	display: flex;
	margin-left: 2rem;
}
.trips-down>.trips1{
	flex-basis: 50%;
}
.same-heading{
	display: block;
	font-size: 3rem;
	font-weight: var(--light-300);
	margin-left: 1rem;
}
.same-span{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background-color: var(--border);
	margin-bottom: 1rem;
}
.same-span>span{
	font-size: 1.5rem;
	margin-left: 2rem;
	color: var(--secondary);
}
.trips2>.same-span{
	background-color: var(--spacer);
}

/* ======== SERVICE ======= */
.service{
	padding: 2rem;
	z-index: -1000;
}
.service>p{
	font-size: 2rem;
	color: var(--secondary);
	text-transform: uppercase;
}
.service>.service-info{
	margin-top: 3rem;
}
.service-info>.service-item>.item{
	width: 2rem;
	height: 2rem;
	border: .1rem solid #8798ad;
	border-radius: 50%;
}
.service-item{
	display: flex;
	margin-bottom: 2.7rem;
}
.service-item>p{
	font-size: 1.5rem;
	text-transform: capitalize;
	margin: .3rem 0 0 1rem;
}
.service-item>p>span{
	font-weight: var(--semi-bold-600);
}

/* ========ANALYTIC SECTION======= */
.analytic{
	width: 85%;
	margin: 7.5rem 0 0 19.5rem;
}
.analytic-top{
	width: 102.5%;
	height: 60rem;
}
.analytic-top h1{
	font-size: 4rem;
	font-weight: 200;
	margin-bottom: 2rem;
}
.analytic-top .analytic-img{
	width: 100%;
	height: 100%;
	background: url("../../img/analytic/chart-large.png");
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;
	margin-left: -2rem;
}
.analytic .analytic-card{
	display: flex;
	justify-content: space-between;
	margin-top: 10rem;
}
.analytic-card .cards{
	width: 350px;
	height: 200px;
	background-color: var(--bg-secondary);
	padding: 2rem 0 2rem 2rem;
	border-radius: 5px;
}
.analytic-card .cards img{
	width: 50px;
	margin-bottom: 1rem;
}
.analytic-card .cards h1{
	font-size: 6rem;
	font-weight: 200;
}
.analytic-card .cards small{
	font-size: 2rem;
	font-weight: 100;
	color: var(--secondary);
}