* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
body {
     flex-direction: column;
    position: relative;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.grid{
     display: grid;
}
.container {
     width: 80%;
     flex-direction: column;
}
.header {
     margin-top: 2%;
     justify-content:space-between ;
     width: 100%;
}
.header img {
     width: 40%;
}
#nav-bar {
gap: 3%;
width: 60%;
font-size: 1.2rem;

}
#nav-bar a {
     text-decoration: none;
color: #6a4a53;
}
#nav-bar a:hover {
     border-bottom: 1px solid #6a4a53;
     color: #000;
}
.first {
     flex-direction: column;
     gap: 5%;
     width: 100%;
}
.title {
     margin: 2% 0%;
}
#form {
     flex-direction: column;
}
#email {
     margin: 2% 0% 5% 0%;
  padding: 1.5%;
}
#submit {
     background-color: #e6be1c;
     color: #0c1000;
     padding: 3% 5%;
     border: none;
     font-size: 1.1rem;
     text-transform: uppercase;
}
#submit:hover {
     background-color: #e5cd6cd3;
     cursor: pointer;
}
.bold {
     font-weight: 600;
}
.logo {
     background-color: #ffffffbf;
    width: 19%;
}
.logo img {
     width: 90%;
     background-color: white;
}
#features {
     justify-content: flex-start;

}
.desc_description {
     font-size: 1.1rem;
}

.video {
     margin: 10%;
}
video {
     box-shadow: 4px 11px 13px 0px #00000061
}
.cards{
     justify-content: space-around;

     width: 100%;
}
.card {
     border: 1px solid #000;
     width: 30%;
     flex-direction: column;
   
    
}
.card_heading {
     font-size: 1.3rem;
    height: 100%;
     width: 100%;
     padding: 3% 0%;
     background-color: #dddddd;
}
.price {
     margin: 5% 0% 3% 0%;
     font-size: 1.5rem;
}
.card_features {
     list-style-type: none;
     flex-direction: column;
     
}
.card_features li {
     margin: 3% 0%;
}
.card_btn {
     margin: 5% ;
     font-size: 1.4rem;
     padding: 2% 6%;
     background-color: #f1c40f;
     border: none;
     text-transform: uppercase;
}
.footer {
     flex-direction: column;
     background-color: #dddddd;
     width: 100%;
     position: absolute;
     bottom: -5%;
     padding: 0.5% 0%;
     height: 65px;
}
.footer_head {
text-align: center;
     width: 100%;
}
.footer_head p {
     display: inline;
     margin: 1% 2% 0% 2%;
}
@media (max-width:500px){
    .container {
     width: 100%;
    }
     #header {
          flex-direction: column;
          width: 100vh;
          margin-left: 3%;
     }
     .title{
          font-size: 1rem;
     }
     .logo {
          display: none;
     }
     .description {
          width: 70%;
     }
     .desc_description {
          margin-bottom: 3%;
     }
     .desc_heading{
          margin-top: 6%;
     }
     video {
width: 300px !important;
     }
     .cards {
          flex-direction: column;
     }
     .card {
          width: 80%;
          margin: 3% 0%;
     }
}