html,body {  margin: 0;  padding: 0;  /*  background-image: url("../img/bg.jpg");  background-repeat: no-repeat;  background-attachment: fixed;  background-size: auto;  background-color: #fff;  */  background-color: #00284f;  font-family: Arial, Helvetica, sans-serif;}
.side_nav {  display: none;  position: fixed;  left: 0;  top: 0;  width: 0px;  height: 100%;  background-color: white;  z-index: 3;}
#side_nav {  -webkit-transition: 0.5s ease-in;  position: fixed;  left: 0;  top: 0;  width: 200px;  height: 100%;  background-color: white;  z-index: 3;}
#side_nav img {  width: 30px;  height: 30px;  position: absolute;  right: 0px;}
#side_nav ul {  padding-top: 50px;  margin: 0;}
#side_nav ul li {  text-align: center;  height: 50px;  padding: 16px;  cursor: pointer;  border-bottom: 1px solid lightgray;}
#side_nav ul li:hover {  background: lightgray;  color: white !important;cursor:pointer}
.side_nav_open {  position: fixed;  left: 0;  top: 0;  width: 250px;  height: 100%;  background-color: white;  z-index: 3;}
#burger {  width: 25px;  height: 25px;  visibility: visible;}
#nav {  width: 100%;  padding: 0;}
#nav ul {  list-style-type: none;  overflow: hidden;  background-color: white;  margin: 0;  max-height: 45px;}
#nav ul li {  float: left;  visibility: hidden;}
#nav ul li a {  display: inline-block;  color: #263f5b;  text-align: center;  padding: 12px 10px;  text-decoration: none;}
#nav ul li a:hover {  color: white;  background-color: #263f5b;}
.logo_container {  height: 170px;  background-color: #00284f;}
#logo {  text-align: center;  padding: 25px;}
#logo img {  width: 103px;  height: 60px;  object-fit: contain;}
#logo span {  color: white;}
.footer_container {  height: 160px;  background-color: rgb(33, 33, 33);  padding: 20px auto;  position: relative;  bottom: 0px;  width: 100%;}
#footer {  position: relative;  bottom: 0px;  width: 200px;  height: 110px;  margin: 0 auto;}
#footer span {  color: white;}
#social_bar {  list-style-type: none;  margin: 0 15%;}
#social_bar li {  float: left;  margin: 10px;}
/*  ele1  */
#ele1 {  height: 630px;  background-color: #004f99;}
#banner1 {  height: auto;  overflow: auto;  width: 96%; background-color: white;  position: relative;  top: 25px;  left: 2%;  right: 2%;}
#banner1a {  height: 200px;  width: 100%;}
#banner1b {  height: 380px;  width: 100%;  background-color: white;  z-index: 2;  text-align: center;  color: rgb(38, 63, 91);  overflow: scroll;}
#banner1b img {  width: 100%;  height: 100%;}
.text-container {  padding: 1px;}
.text-container h1 {  font-size: 25px;}
.text-container h5 {  font-size: 15px;}
.text-container p {  line-height: 15px;  font-size: 12px;}
.text-container .btn {  margin-top: 10px;  margin-bottom: 15px;}
#parallax {  z-index: 1;  height: 150px !important;}
/*ele2*/
#ele2 {  height: auto;  overflow: auto;  width: 100%;}
#ele2a {  height: 100%;  width: 100%;  background-color: #00284f;  overflow: scroll;}
#ele2b {  display: none;  height: 350px;  width: 100%;  overflow: hidden;}
#ele2b img {  width: 100%;  height: 100%;}
.ele2a-text-container {  padding: 35px;  color: white;  text-align: center;}
.ele2a-text-container h3 {  font-size: 20px;}
.ele2a-text-container h5 {  font-size: 15px;}
.ele2a-text-container p {  font-size: 12px;  line-height: 15px;}
/* applies to ele2a, ele3b and ele4 all*/
.ele2a-text-container svg {  float: left;  height: 40px;  width: 40px;  color: rgb(241, 219, 196);  margin-right: 20px;}
/*ele3*/
#ele3 {  height: auto;  overflow: auto;  width: 100%;}
#ele3a {  height: 200px;  width: 100%;}
#ele3a img {  width: 100%;  height: 100%;}
#ele3b {  height: 500px;  width: 100%;  overflow: scroll;  background-color: #00284f;}
/*ele4*/
#ele4 {  height: auto;  width: 100%;  background-color: #004f99;  overflow: auto;}
#ele4 h3 {  padding-top: 0px;}
#ele4 h5 {  padding-top: 10px;}
#ele4 p {  padding-top: 10px;}
#ele4a {  height: auto;  overflow: auto;  width: 90%;  background-color: white;  position: relative;  bottom: 5%;  left: 5%;  right: 5%;}
#ele4a1 {  height: auto;  width: 100%;  overflow: auto;}
#ele4a1 .ele2a-text-container {  font-size: 10px;}
#ele4a1 h5 {  padding-top: 10px;}
#ele4a2 {  height: 220px;  width: 100%;  text-align: center;  color: rgb(38, 63, 91);  overflow: hidden;}
#ele4a2 img {  width: 100%;  height: 100%;}
/*ele5*/
#ele5 {  height: 1175px;  position: relative;  width: 90%;  left: 5%;  right: 5%;  background-color: #00284f;}
#ele5a {  height: auto;  overflow: auto;  width: 100%;  background: white;  position: relative;  top: 70px;}
#ele5a1 {  height: 320px;  width: 100%;  overflow: auto;}
#ele5a1 h3 {  text-decoration: underline;  padding-top: 30px;}
#ele5a1 h5 {  padding-top: 10px;}
#ele5a1 p {  padding-top: 20px;}
#ele5a2 {  height: auto;  width: 100%;  overflow: auto;}
#ele5a2 .container {  padding-top: 10px;}
#ele5a2 .container .btn {  position: relative;  margin: 10px 40%;}
#ele5b {  height: 130px;  width: 100%;  background-color: lightgray;}
/*ABOUT*/
#about {  height: 1000px;  width: 100%;  background-color: #004f99;}
#about h1 {  font-size: 25px;}
#about .ele2a-text-container {  width: 95%;  left: 2.5%;  right: 2.5%;  top: 10px;  position: relative;}
#about_banner {  width: 100%;  height: auto;  background: white;  margin-top: 30px;  overflow: scroll;}
#about_banner img {  position: relative;  left: 37.5%;  right: 37.5%;  width: 25%;  height: 50%;}
/*service1*/
/*service1,2,3 apply the same css*/
#service1 {  height: auto;  overflow: auto;  background-color: #004f99;}
#service1ele1 {  height: auto;  overflow: auto;  width: 100%;  background-color: white;  position: relative;  top: 15px;}
#service1ele1a {  height: 200px;  width: 100%;}
#service1ele1a img {  width: 100%;  height: 100%;}
#service1ele1b {  height: auto;  width: 100%;  background-color: #004f99;  overflow: auto;}
#service1ele1b .btn {  margin-top: 20px;}
/*news*/
#news {  width: 100%;  background-color: #004f99;}
#news h4 {  text-align: center;  padding-top: 30px;  padding-bottom: 20px;}