@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap'); 
:root
{
	--green: green;
	--black: #130f40;
	--light-color: #666;
	--box-shadow: 0.5rem 1.5rem rgba(0,0,0,.1);
	--border: 2rem solid rgba(0,0,0,.1);
	--outline: .1rem solid rgba(0,0,0,.1);

}

*
{
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	text-transform: capitalize;
	transition: all .2s linear;
}

html
{
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}
body
{
	overflow-x: hidden;
}

.footer{
    width: 100%;
    height: 12vh;
    background: #282828;
    display: flex;
    align-items: center;

}
.footer-body{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    padding: 5px 10px;
    padding-bottom: 40px;
}
.footer-logo{
    height: 8vh;
    background-color: #FEC53A;
    color: #FFF;
    padding: .5rem;
    border-radius: .5rem;
    line-height: 1.7rem; 
}
.footer-logo h1
{
	margin-top: 15px;
	background: transparent;
}
.footer-body ul{
	display: flex;
}
.footer-body ul li{
	font-weight: 900;
    list-style: none;
    line-height: 2.5rem;
    font-size: 1.9rem;
    margin: 15px 10px 0px 10px;
}
.footer-body ul li a{
    text-decoration: none;
    color: #fff;
}
.footer-body ul li a .fab{
    font-size: 1.2rem;
    color: #FEC53A;
    margin-right: 15px;
}
.footer-body ul li a:hover{
    color: #FEC53A;
}
.footer-bottom{
    width: 100%;
    height: 8vh;
    background: #1B1919;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
}
.footer-bottom span{
    color: #FEC53A;
    font-weight: bold;
}
.message
{
	width: 100%;
	display: flex;
	height: 34rem;
	padding-top: 2.3rem;
	margin-bottom: 3rem
}
.message .messageBox
{
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	box-shadow: 0.5rem 1rem 5px 3px #fff;
	border-radius: 1rem;
	width: 34rem;
	height: 35rem;
	background: #ddd;
	padding: 2rem;
	margin-bottom: 2rem;
	transform: translateY(-2rem);
}
.message .messageBox input
{
	background: #fff;
	text-align: center;
	width: 29rem;
	margin-top: 1rem;
	height: 3.4rem;
	font-size: 2rem;
	border-radius: .5rem;
}
.message .messageBox textarea
{
	width: 29rem;
	border-radius: .5rem;
	margin-top: 1rem;
	padding: 1rem;
	text-align: center;
	height: 9rem;
	font-size: 1.6rem;
}
.message .messageBox .btn
{
	width: 16rem;
	padding: 6px;
	height: auto;
	font-size: 2rem;
	font-weight: 800;
	margin: 2rem 5rem;
	background: #4facfe;
}
.message .messageBox .btn:hover
{
	background: #008cba;
}
#contactSubmitBtn.active
{
	width: 5rem;
	height: 5rem;
	background: #eee;
	color: #eee;
	margin-left: 12rem;
	border: 5px solid #ddd;
	border-radius: 50%;
	border-top-color: #333; 
	animation: rotate 1s infinite;
}
@keyframes rotate
{
	100%
		{
			rotate: 360deg;
		}			
}






@media (max-width:770px)
{
	.footer-logo
	{
		width: 15rem;
		font-weight: 300;
		font-size: 1rem;
	}
	.footer-body ul li
	{
		font-size: 1.4rem;
	}
}
@media (max-width:605px){
	.footer
	{
		height: 40vh;
	}
	.footer-logo
	{
		margin-top: 8rem;
		font-size: 1.3rem;
		width: auto;
		padding: 6px;
	}
	.footer-body ul
	{
		display: block;
	}
	.footer-body ul li
	{
		font-size: 2rem;
		margin-top: 2.3rem;
	}
	.footer-bottom 
	{
		font-size: 1.3rem;
	}
}
@media (max-width:495px)
{
	.footer-bottom 
	{
		font-size: 1.3rem;
	}
}
@media (max-width:460px)
{
	.footer-logo
	{
		font-size: 1rem;
	}
	.footer-bottom
	{
		font-size: 1rem;
	}
}
@media (max-width:360px)
{
	.message .messageBox
	{
		width: 28rem;
		height: 29rem;
	}
	.message .messageBox .btn
	{
		box-shadow: 3px 3px 8px #282828;
	}
	.message .messageBox input
	{
		font-size: 1.5rem;
		width: 24rem;
	}
	.message .messageBox textarea
	{
		font-size: 1.5rem;
		width: 24rem;
	}
	.footer-body ul
	{
		display: flex;
		position: absolute;
	}
	.footer-body ul li span
	{
		display: none;
	}
	.footer-body ul li a i
	{
		font-size: 2.8rem;
		font-weight: 800;
		cursor: pointer;
		margin-top: -3px;
	}
	.footer-logo
	{
		font-size: 1rem;
	}
	.footer-bottom
	{
		font-size: 1rem;
	}
}
@media (max-width:300px)
{
	.message .messageBox
	{
		width: 24rem;
		height: 28rem;
	}
	.message .messageBox input,textarea
	{
		width: 20rem;
	}
	.message .messageBox textarea
	{
		width: 20rem;
	}
	.message .messageBox .btn
	{
		width: 10rem;
		font-size: 1.5rem;
	}
	.footer-bottom
	{
		font-size: .9rem;
	}
}