@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.div_topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contac-info ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}
.contac-info ul li a {
  color: #ffd85a;
  padding: 5px 10px;
  display: block;
}
.contac-info ul li:last-child a {
  background: #ffd85a;
  color: #000;
  margin-left: 16px;
  padding: 5px 20px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  position: relative;
}
nav ul li a {
  display: block;
  padding: 0 30px;
  line-height: 50px;
  background: #ffffff;
  color: #333;
  text-decoration: none;
	font-size: 14px;
    font-weight: 600;
	font-family: 'Raleway', sans-serif;
  /*
  The full path of this code is nav ul li a:not(:only-child):after. This means that the code will apply to any a tag in our nav list that is NOT an only child, aka any dropdown. The :after means it comes after the output of the tag. I’ve decided that to specify any nav item as a dropdown, it will be followed by a unicode arrow – ▾ (#9662).
  */
}
nav ul li a:hover {
  background: #444e60;
  color: #FFF;
  text-decoration: none;
}
nav ul li a:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  z-index: 1;
  /* Guarantees that the dropdown will display on top of any content. */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  display: none;
  width: 300px;
  background: #FFF;
}

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  height: 70px;
  width: 70px;
}

.footer_contianer ul {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Raleway';
}

.footer_contianer ul >li {
  flex: 0 0 31.8%;
  padding: 12px 30px 30px;
  background: url(https://www.lifteducationalacademy.com/wp-content/uploads/2020/10/footer-faq.jpg) no-repeat center;
  margin: 0 10px;
  max-width: 31.8%;
  border: 5px solid #4a8fcd;
  background-size: cover;
}

.footer_contianer ul >li:first-child {
  background: url(https://www.lifteducationalacademy.com/wp-content/uploads/2020/10/footer-abt.jpg) no-repeat center;
  background-size: cover;
}
.footer_contianer ul >li:last-child {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}
.footer_contianer ul >li h4 {
  color: #9ed1ff;
  margin: 10px 0;
  font-weight: normal;
  font-size: 20px;
  font-family: 'Raleway';
}
.footer_contianer ul >li p {
  color: #FFF;
  font-size: 15px;
  line-height: 24px;
  font-family: 'Raleway',sans-serif;
}
.footer_contianer ul >li a {
  background: #FFF;
  display: inline-block;
  padding: 10px 15px;
  color: #333;
  font-weight: 600;
}
.footer_contianer ul ul li i, .footer_contianer ul ul li svg {
  color: #ffd85a;
  fill: #ffd85a;
}
.footer_contianer ul >li ul li a {
  background: none;
  padding: 0;
  font-weight: normal;
  text-decoration: none;
  font-size: 14px;
}
.footerbox{
  padding: 30px 0 0;
}
section.footerbox .container {
  padding-bottom: 30px;
  max-width: 85%;
}
.footer_contianer ul ul li, .footer_contianer ul ul li a {
  color: #FFF;
}
.footer_contianer ul ul li {
  flex: 0 0 100%;
  flex-flow: row;
  padding: 0 0 13px;
  background: none !important;
  max-width: 100%;
  border: none;
  margin: 0;
}
.footer_contianer ul >li h5 {
  color: #9ed1ff;
  margin: 0 0 10px;
  font-family: 'Raleway';
  font-weight: normal;
}
@media only screen and (max-width: 800px) {
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #FFF;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}
section.navigation {
  padding: 0;
  border-bottom: 1px solid #DDD;
  height: auto;
}
nav ul li:hover a{
  background: none;
  color: #4a8fcd;
}
nav ul li:hover a ~ ul {
  display: block;
}
nav ul li:hover a ~ ul li a{
  background: none;
  color: #444e60;
}
nav ul li:hover a ~ ul li a:hover{
  background: #444e60;
  color: #FFF;
}
.contac-info ul li a {
  text-decoration: none !important;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
}
.contac-info ul li a svg {
  margin-right: 7px;
}
section.navigation.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
}




.py-8 {
  z-index: 0;
}



@media screen and (min-width: 800px) {
  .nav-list {
    display: block !important;
    display: flex !important;
    justify-content: center;
  }

}
/* 
.navigation – the outer wrapper for the navbar. Specifies the height and color, and will stretch the full width of the viewport.
*/
.navigation {
  height: 70px;
  background: #ffffff;
}

/*
.nav-container – the inner wrapper for the navbar. Defines how far the actual content should stretch.
*/

.top_bar{
  background: #444e60;
	padding: 8px;
}

@media screen and (max-width: 800px) {
  .contac-info {
    display: none;
}
section.navigation {
  border: none;
  position: relative;
  z-index: 1;
}
.nav-dropdown{
  width: 100%;
  display: none !important;
}
nav ul li:hover a ~ ul {
  display: block !important;
  position: relative;
}
.navigation .container {
  padding: 0;
}
nav{
  padding: 0;
}
.nav-mobile {
  display: block;
  top: -60px;
  background: none;
  color: #FFF;
}
#nav-toggle{
  color: #FFF;
}
section.navigation{
  border: none;
}
.top_bar {
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
}

section.navigation.fixed, section.navigation {
  position: fixed;
  width: 100%;
  top: 57px;
  z-index: 999;
}


.footer_contianer ul >li{
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 15px;
}
}