#nav-bar{
    position:fixed;
    width:100%;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    top:0;
    left:0;
   
    z-index: 1000; 
    
  }
  #nav-bar > div{
    width:50%;
  }
  #nav-right{
  
    display:flex;
    align-items:center;
  width:100px;
  height:100%;
  }
  #nav-right  ul{
    
    display:flex;
    justify-content:space-around;
    width:100%;
    list-style-type:none;
  }
  a{
    text-decoration:none;
    color:black;
  }
  
   /*---html ----*/
  :root{
    --color--: #b3b3cc
  }
  *{
    font-family:'Tato';
    background-color:#eee;
    box-sizing: border-box;
    margin:0;
    padding:0;
  }
  #main-page{
    width:100%;
    height:1350px;
    margin-bottom:0;
  }
   
  
  /*body*/
  section{
    margin-top:0;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;
    width:800px;
    height:100%;
    
    display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
  }
  /*--- form ---*/
  form{
    
    width:550px;
    height:150px;
    margin:0 auto;
    margin-top:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  
  }
  
  h3 {
      text-align: center;
      font-size: 30px;
      width: 100%;
      height: 50px;
      top:0;
  }
  input#email{
    width:200px;
    height:25px;
    background-color:#ffff;
    color:black;
    padding-left:5px;
  }
  input#submit{
    width:125px;
    background-color:yellow;
     height: 20pt;
    font: bold 10pt Arial, Helvetica, sans-serif;
    margin: 2pt;
    margin-right: 0px;
    text-align: center
  }
  
  /*--- Features ---*/
  #features {
      
      width: 95%;
      text-align: left;
      margin-top: 25px;
  }
  #features ul li{
    list-style-type:none;
    padding:10px;
  }
  #features ul li h3{
    text-align:left;
    margin-top:5px;
  }
  #features ul li p{
    margin-top:-15px;
  }
  /*--- How it Works ---*/
  
  #works{
    
    margin-top:60px;
  }
  #works iframe{
    width:450px;
    height:300px;
  }
  
  /*--- pricing ---*/
  #pricing{
    width:100%;
    height:300px;
   
    display:grid;
    grid-template-columns:auto auto auto;
    place-items:center;
    padding:10px;
    margin:50px auto;
  }
  
  #pricing > div{
    border: 1px solid;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  
  .price-tag1 {  
      width: 90%;
      height: 250px;
      background: linear-gradient(
        #b3b3cc 0%,
        #b3b3cc 14%,
        #eee 14%
      );
  }
  
  .price-tag1 h4{
    font-size:19px;
    margin-top:7px;
    margin-bottom:7px;
    background-color: #b3b3cc;
  }
  .price-tag1 #price{
    font-weight:bold;
    font-size:26px;
    margin:8px auto;  
  }
  .price-tag1 > p{
    margin:5px auto;
  }
  .box{
    padding:10px;
    width:100px;
    text-align:center;
    background-color:yellow;
    margin-top:6px;
  }
   a.box:hover{
    background-color:orangered;
  }
  
  /*--- footer ---*/
  #footer{
  
    width:100%;
    height:150px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    background-color:var(--color--);
  }
  #footer  #footer-head {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-evenly;
    width:300px;
    height:30px;
    font-weight:bold;
    
  }
  #footer  #footer-tail {
    width:300px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--color--);
  }
  #footer  #footer-head   p{
    background-color:var(--color--);
  }
  #footer  #footer-tail   p{
    background-color:var(--color--);
  }
  
  /*--- media query ---*/
  @media(max-width:800px){
    #nav-bar{
      position:fixed;
      top:0;
    left:0;
    }
    section{
      width:600px;
      height:1300px;
      margin:0 auto;
    }
    #form{
      margin-top:0;
    }
    .price-tag1 h4 {
     font-size: 16px; 
      margin-top: 7px;
      margin-bottom: 7px;
      background-color: #b3b3cc;
  }
  #footer{
    height:80px;
    margin-bottom:0;
  }
  }