*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
    height: 100%;
}
body{
    background-color: #f0f0f0;
    background-color: white;
}
header{
    border-bottom: 0,1px solid #ddd;;
}
    
 .navbar {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 1rem 10rem 0 10rem;
    }
    .logo{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .emb-logo{
        align-self:flex-end;
    }
.MainNav{
   margin-left: 10rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 1rem;
   max-width: 100%;
}
.navlist{
    list-style: none;
    display: flex;
    gap: 2rem;
}
.navitem{
    cursor: pointer;
}
.rightNav{
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.rightNav div{
    cursor: pointer;
}
main{
padding-top: 5rem;
}
.contain{
    display: flex;
    flex-direction: column;
    width: max-content;
    margin: 0 17rem;
    padding-top: 1rem;
    align-items: center;
    flex-wrap: wrap;

}
.content1{
    font-family: Arial Helvetica, sans-serif;
    font-size: 3rem;
    color: #222222;
}
.content1 a{
    text-decoration: none;
}
.content2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    margin: 2.9rem 0 0 0;
    flex-wrap: wrap;
}
.btn{
    border: none;
    border-radius: 5px;
    width: 20rem;
    height: 3rem;
    background-color: #00B6D1;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.1rem;
    color: white;
    cursor: pointer;
}
.details{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 4rem 17rem 0 17rem;
    font-family:Arial, Helvetica, sans-serif;
}
.details >div> span:first-of-type{
    font-size: 1.6rem;
    margin-right: 0.4rem;
}
.details >div> span:last-of-type{
    color: #666666;
}

.details img{
width: 4rem;
margin-right: 2rem;
}
.gridbox{
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    /* grid-template-rows: repeat(auto-fit, minmax(10.rem, 1fr)); */
    gap: 2rem;
    margin: 3rem 16rem;
}
.item{
    background-color: #beb5b51c;
    display: flex;

}
.item{
    
    align-items: center;
    flex-direction: column;
}
.item h3{
    margin: 10% 0 0 0 ;
    font-size: 1.5rem;
    font-family: sans-serif;
}
.item pre{
    margin: 7% 0;

}
.item button{
    border: none;
    border-radius: 4px;
    background-color: #5cb85c;;
    padding: 0.4rem 1.4rem;
    font-weight: 700;
    color: white;
    box-shadow: inset 0px -15px 3rem 2px #50a542;
    cursor: pointer;
}
.item span{
    overflow-wrap: break-all;
    font-size: 0.9rem;
}
.item span>p{
    justify-self: center;
    margin-top: 1rem;
}
.item small{
    font-size: 0.5rem;
    word-break: break-all;

}
.item a{
    text-decoration: none;
    color: #222222;
}