:root{
	--bg: #2e3232;
	--primary: #dd6d1b;
	--secondary: #2b2b2a;
	--navbar: #121212;
	--transparent-nav-item: #cccccc90;
	--main-text-color: rgb(204, 204, 204);
	--grey-text: #cccccc;
}
.bg-dark-grey{
    background-color: #2e3232;
}
.primary-color {
    background-color: #dd6d1b;
}
.bg-dark-grey{
    background-color: #2e3232;
}
.orange-bg{
  background-color: #dd6d1b;
}
.orange-outline{
    border: 1px solid #dd6d1b;
    background-color: #fff;
    color: #000000;
    border-radius: 6px;
    padding-right: 10px;
    padding-left: 10px;
    
}
.orange-outline:hover{
    background-color:#dd6d1b;
}
.grey-bg{
   background-color: #cccccc90;
}
.grey{
  background-color: #121212; 
}
.orange-text{
	color: var(--primary);
}
.main-bg-color{
	background-color: var(--primary);
}
.grey-text{
	color: #cccccc;
}
.float-left{
    float: left;
  
}
.float-rigth{
    float: right;
  
}
h2{
	color: var(--grey-text);
}
body{
	background-color: var(--bg);
	margin: 0px;
	padding: 0px;
}
/***loader****/
.loader{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    transition: opacity 0.75s, visibility 0.75s;
    z-index: 1000;
}
.loader-hidden{ 
    opacity: 0;
    visibility: hidden;
}
.loader::after{
    content: "";
    width: 50px;
    height: 50px;
    border: 10px solid #dddddd;
    border-top-color: #7449f5;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}
@keyframes loading{
    from{
        transform: rotate(0turn);
    }
    to{
        transform: rotate(1turn);
    }
}

*{
  box-sizing: border-box;
   margin: 0;
   padding: 0;
}






footer{
	background-color: var(--navbar);
	width: 100%;
	height: content ;
	color: var(--grey-text);
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
}
footer .container .row .about-item{
	position: relative;
}