body {
  /* background: #282931; */
  -webkit-font-smoothing: antialiased;
  font-family: 'Varela Round', sans-serif;
  height: 100%;
  background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
}

/* Header */
header {
	background-color: white;
	color: rgb(0, 0, 0);
	padding: 10px 0;
	position: fixed;
	width: 100%;
	z-index: 100;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px auto;
	padding: 0 20px;
}

.logo {
	font-size: 1.5rem;
	font-weight: bold;
	color: #40b736;
}

.nav-links {
	list-style: none;
	display: flex;
}

.nav-links li {
	margin-right: 20px;
}

.nav-links a {
	color: rgb(0, 0, 0);
	padding: 10px;
	font-weight: bold;
	text-decoration: none;
}

.nav-links a:hover {
	background-color: #40b736;
	border-radius: 4px;
	color: white;
}

/*end of header*/


/* THE FOOTER SECTION  */
footer {
	background-color: #555;
	color: white;
	margin-top: 5%;
	text-decoration: none;
	background-image: url("../images/footer-gif.gif");
	background-size: cover;
}

footer form {
	display: flex;
	flex-direction: column;
}

footer h1, h2 {
	text-align: right;
}

footer form input {
	width: 500px;
	height: 30px;
	border-radius: 10%;
	background: white;
	color: blue;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-bottom: 5%;
	padding-left: 5%;
}

.up-footer {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	margin-top: 0;
	padding-top: 0;
}

@media (max-width: 950px){
	.up-footer{
	  display:flex;
	  flex-direction: column-reverse;
	}
  
	.footer-right {
		display:flex;
		flex-direction: column-reverse;
	}

	.footer-left {
		display:flex;
		flex-direction: column-reverse;
	}
  
}


.footer-right {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 20px;
	flex-direction: column;
}

.footer-right ul{
  display: flex;
  flex-direction: column;
  padding: 10px;
  text-decoration: none;
}

.footer-right ul li{
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
}



.footer-right h1 {
	border-bottom: 7px solid blue;
}

.footer-right a {
	border: 1px solid aqua;
	border-radius: 50%;
	background-color: #40b736;
	color: white;
	width: 400px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 12.6%;
	padding-right: 0;
	text-decoration: none;
}

.footer-left {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	margin-top: 0;
	padding-top: 0;
	padding-left: 5px;
}

.footer-left h1 {
	border-bottom: 7px solid blue;
}

.footer-left img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin-bottom: 5%;
	background-size: cover;
}

.footer-left h1{
	padding-top: 5%;
}

.footer-left ul{
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
}

.footer-left ul li{
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
}

.footer-left ul li a{
	color: white;
}

.footer-left ul li a:hover{
	text-decoration: none;
	color: rgb(16, 246, 16);
}

.ft-below {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.ft-below ul {
	/* margin-bottom: 20px; */
	padding-bottom: 20px;
	text-decoration: none;
	display: flex;
    flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: white;
	gap: 10px;
}

.ft-below ul li {
	text-decoration: none;
	display: flex;
    flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: white;
	gap: 10px;
}

.ft-below ul li a{
	text-decoration: none;
	color: rgb(13, 255, 70);
}

.ft-below ul li a:hover{
	text-decoration: none;
	color: rgb(244, 17, 244);
}

.ft-below img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding: 2%;
}

.ft-below img:hover {
	transition: ease-in-out 5s;
}

.ft-menu-down ul li a{
	color: white;
}

.copyright {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* the end of footer */


.my-contact h3,h4,h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: black;
}

.my-contact p,a {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: #414141 !important;
  font-size: 16px;
}

.my-contact a:hover {
  text-decoration: none !important;
  color: black !important;
}

.my-contact ul {
  list-style: none;
}

.my-contact li {
  display: inline-block;
  margin: 0 auto;
  padding: 0 0 0 10px;
}



.clearfix {
  margin: 40px 0;
}


.my-contact .title span {
  height: 2px;
  width: 10%;
  margin: 0 20px;
  margin-top: 15%;
  background-color: black;
  display: inline-block;
  vertical-align: middle;
}

.my-contact .title {
  padding: 40px 0px;
  margin: 0 auto;
}

.my-contact #my-contact-left .sub-title,
.my-contact #my-contact-right .sub-title {
  margin: 0 auto;
  padding: 40px 0;
}

.my-contact #my-contact-left .icon {
  text-align: center;
  margin: 0 auto;
}

.my-contact #my-contact-left .glyphicon {
  font-size: 20px;
  color: white;
  padding: 10px;
  background-color: #414141;
  border-radius: 50%;
}

.my-contact #my-contact-left .glyphicon:hover {
  background-color: blue;
}

.my-contact #my-contact-left .fa-youtube {
  font-size: 20px;
  color: white;
  padding: 10px;
  background-color: #414141;
  border-radius: 50%;
}

.my-contact #my-contact-left .fa-youtube:hover {
  background-color: blue;
}

.my-contact #my-contact-left i {
  font-size: 20px;
  color: white;
  padding: 10px;
  background-color: #414141;
  border-radius: 50%;
}

.my-contact #my-contact-left i:hover {
  background-color: blue;
}

.my-contact #my-contact-left p {
  margin: 0 auto;
  padding: 15px;
  text-align: center;
}

.my-contact #my-contact-right form {
  margin: 0 auto;
  padding: 0 100px;
}

.my-contact #my-contact-right input,
.my-contact #my-contact-right textarea,
.my-contact #my-contact-right .input-group-addon,
.my-contact #my-contact-right .btn {
  border: solid thin #414141;
}

.my-contact #my-contact-right .input-group-addon {
  background-color: #414141;
  color: white;
}

.my-contact #my-contact-right .btn {
  background-color: white;
  color: #414141;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.my-contact #my-contact-right .btn:hover {
  background-color: #414141;
  color: white;
}

.my-contact #my-contact-right .input-group-addon {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.my-contact #my-contact-right .btn {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.my-contact #my-contact-right .form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 3px rgba(50, 100, 250, 0.8);
}

@media (max-width: 480px) {
	.my-contact .title,
	.my-contact .sub-title {
    padding: 20px 0;
  }
  h3 {
    font-size: 20px;
  }
  h4 {
    font-size: 16px;
  }
  .clearfix {
    margin: 0 auto;
  }
  .my-contact #my-contact-right form {
    padding: 0;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  #my-contact-left .col-xs-12 {
    width: 50%;
  }
}