body{
  margin: 0;
  padding: 0;
}
.logo{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.logo #leftimg{
  
  height: 80px;
  width: 400px;
}
.logo #Midpic{
  
  box-shadow: 3px 3px 5px 1px #888888;
  border-radius: 15px;
  width: 100px;
  height: 100px;
}
.logo #Rightimg{
  height: 100px;
}
.toggle-btn{
  width: 35px;
  /* position: absolute;
  right: 80px;
  top: 40px; */
  position: relative;
    right: 34px;
    bottom: 6px;
}

.toggle-btn span{
  display: inline-block;
  width: 36px;
  height: 3px;
  background-color: #000;
  float:left;
  margin-bottom: 6px;
  /* margin-top: 1px; */
  position: relative;
  top: 125px;
  left: 50px;
}
.Menu-Bar ul{
  background-color: #5e7ceb;
  justify-content: space-between;
  display: flex;
  align-items: center;
  line-height: 0.5cm;
  font-size: larger;
  list-style: none;
  padding-bottom: 10px;
  margin-top: 10px;
  padding: 7px;  
}
#menu{
    list-style: none;
    padding: 0 70px
}
a{
    color: #fff;
    list-style: none;
    text-decoration: none;
}
a:hover{
    color: #f16203;
    
}
.active,.Menu-Bar ul li:hover{
  transform: scale(1.2);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color:#5e7ceb;
  min-width: 200px;
 }

.dropdown-content a {
  font-size: 17px;
    color: white;
    padding: 0px 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
background-color: rgb(155, 183, 185);
color:rgb(238, 168, 6);
}

.dropdown:hover .dropdown-content {
  display: block;
}
div.center{
    overflow:visible !important;
    background-image: url("Center.jpg");
    max-width: 5000PX;
    background-position : center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    height: auto;
    padding: 4rem;
    margin-top: -19px;
}
.btn-primary {
    background-color: #333;
    color: #fff;
    padding: .5rem 1.5rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    margin-left: 5%;
  }
  
  .btn-primary:hover {
    /* background-color: #fff; */
    color: #f16203;
    border: 2px solid #333;
  }
  #Name{
    color: #fff;
    font-size: 50px;
  }
  #Para{
    margin-top: -20px;
    color:#fff;
    font-size: larger;
    line-height: 40px;
  }
.features{
  margin-left: 50px;
  padding: 3rem;
  width: 24%;
}
#demo{
  width: 300px;
  height: auto;
}
#demo th{
  font-size: 20px;
  background-color: #5e7ceb;
  color: #fff;
}
#demo,tr{
background-color: #eee;
}
.features #demo,th,td{
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}
.features #demo a{
  color: blue;
  font-size: 15px;
}
#demo tr:hover{
  background-color: #ffffffb4;
}

.main{
  display: flex;
}
.Section_right{
  margin-top: 40px;
  width: 80%;
  text-align: left;
  position: relative;
  padding: 0 100px;
}
#footer{
  position: relative;
  margin-bottom: 1px;
  justify-content: center;
  text-align: center;
  padding: 10px 0;
  display: flex;
  color: black;
  background-color: #5e7ceb;
  /* line-height: 40px;
  margin-bottom: -8px; */
}
  /* Media Query */

  @media(max-width:380px){
    .logo{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #Midpic{
      display: none;
    }
    .Menu-Bar ul{
      flex-wrap: wrap;
    }
    #Name{
      font-size: 35px;
      display: flex;
      position: relative;
      left: 0;
    }
    #para{
      position: relative;
    }
    .main{
      display: flex;
      flex-direction: column;
      position: relative;
      left: -17%;
    }
    .logo>#leftimg {
      height: 73px;
    width: 326px;
    position: relative;
    right: 6%;
  }
  .Section_right {
    top: -76px;
  }
  }
  @media(max-width:480px){
    .Logo{
      width: 100%;
      height: auto;
    }

  }
  @media(max-width:450px){
    .logo{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .logo #leftimg{
      position: relative;
      right: 18px;
    }
    #Midpic{
      display: none;
    }
    .Menu-Bar ul{
      display: flex;
      flex-direction: column;
      align-items: start;  
    }
    .main{
      display: flex;
      flex-direction: column;
      position: relative;
      left: -17%;
    }
    .Section_right {
      top: -76px;
    }
  }
  @media(max-width:820px){
    #menu{
      padding: 0 43px;
    }
    .main {
      display: flex;
      flex-direction: column;
    }
#demo {
  width: 522px;
  position: relative;
  left: 68px;
}
  }
  @media(max-width:768px){
    #Midpic{
      display: none;
    }
    #menu{
      padding: 0 37px

    }
    .toggle-btn{
      display: none;
    }
  }
  @media(max-width:540px){
    #demo{width: 364px;
    position: relative;
    left: -18px}
    .Section_right{
      margin-top: 43px;
      position: relative;
      right: 27px;
    }
  }
 
    /* till here */