body {
margin: 0;
font-family: Roboto;
line-height: 1.6;
color: black;
background-color: #E6E8E6;
}

#header {
background-color: #262626;
color: white;
padding: 10px 0;
position: fixed;
width: 100%;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}

#header-img {
max-width: 50px;
height: auto;
display: block;
margin: 0;
}

.logo{
flex: 1;

}

.navbar {
flex: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: center, 55px;
right: 55px;

}

#nav-bar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 50px;
flex-direction: row;
justify-content: space-around;
}

.nav-link {
text-decoration: none;
color: white;
font-weight: bold;
}

.nav-link:hover {
display: block;
color: orange;
text-decoration: none;
cursor: pointer;
font-size: 15px;
transition: font-wheight 0.3s ease-in-out;
transition: text-indent 0.3s ease-in-out;
}

.newsletter {
background-color: #5448C8;
padding: 20px;
text-align: center;
margin-top: 80px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.newsletter > #h1{
color: white;

}

.highlight{
color: #DBFF3B; text-shadow:
1px 1px 0 black,
-1px 1px 0 black,
1px -1px 0 black,
-1px -1px 0 black;
}

.discount{
color: red;
text-shadow:
1px 1px 0 black,
-1px 1px 0 black,
1px -1px 0 black,
-1px -1px 0 black;
}

#form {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

#email {
padding: 10px;
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
}

#submit{
padding: 10px 20px;
background-color: #FFA500;
color: black;
font-size: 16px;
border: none;
border-radius: 50px;
cursor: pointer;
}

#Pricing {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
margin: 40px auto;
overflow-x: auto;
padding: 10px;
}

.product {
flex: 0 0 auto;
width: 300px;
text-align: center;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 10px 0;
}

.product img {
width: auto;
max-width: 80%;
height: auto;

}

@media (max-width: 800px) {
.Pricing {
flex-direction: column;
}
.product {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
}

.product > .version {
background-color: orange;
text-transform: uppercase;
color: black;
width: 100%;
margin: 0;

}

.product > button {
border: 100;
margin: 15px 10;
background-color: orange;
font-weight: 400;
}

.product > button:hover {
background-color: rgb(255, 102, 0);
transition: background-color 0.5s;
}

#Features > h3 {
display: flex;
justify-content: center;
color: black;
}

#Features{
color:black;

}

.Overview{
display: flex;
justify-content: center;
margin: 0 auto;
}

footer {
background-color: #B27C66;
color: white;
text-align: center;
padding: 10px 0;
}