*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.logo img{
    height: 4rem;
}
.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 12vh;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* keep it above everything */
    padding: 15px 0;

}
.navlist{
    display: flex;
    gap: 2.5rem;
}
.navlist li{
    list-style: none;
    
}
.navlist a{
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
    letter-spacing: 0.08rem;
}
.hero{
    display: flex;
}
.hero .left{
    background: #2c1e1e;
    padding-left: 3rem;
}
.hero .right{
    background: #7c573c;
}
.hero .hero_split{
    width: 50%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.navlist .slider{
    background : rgba(255, 255, 255, 0.345);
    width: 6rem;
    height: 5rem;
    position: absolute;
    top: 0;
    right: 430px;
    border-top: .3rem solid #2c1e1e;
    border-radius: 0 0 2rem 2rem;
    backdrop-filter: blur(.5rem);
    z-index: -1;
    transition: .5s ease-in-out;
}
.navlist li:nth-child(1):hover ~ .slider {
    right: 430px;
}
.navlist li:nth-child(2):hover ~ .slider {
    right: 299px;
}
.navlist li:nth-child(3):hover ~ .slider {
    right: 176px;
}
.navlist li:nth-child(4):hover ~ .slider {
    right: 74px;
}
.navlist li:nth-child(5):hover ~ .slider {
    right: -28px;
}
.left .content{
    color: white;
}
.content h1{
    font-size: 5rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .07rem wheat;
    letter-spacing: .1rem;
    font-family: cursive;
}
.content p{
    color: #8d7c7c;
    font-size: 1.3rem;
    max-width: 75%;
    margin: 1.5rem 0;
    line-height: 2remrem;
}
.content button{
    background: radial-gradient(at top left, #5a4740, #2c1e1e);
    padding: 1rem 3rem;
    border: .2rem solid rgba(255, 255, 255, 0.286);
    font-size: 1.3rem;
    color: white;
    border-radius: 4rem;
    letter-spacing: .1rem;
}
.content button:hover{
    background: radial-gradient(at bottom right, #5a4740, #2c1e1e);
}
.right img{
    height: 78%;
    padding-left: 3.5rem;
}
.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.middle .circle{
    width: 9rem;
    height: 9rem;
    background-color: white;
    border-radius: 5rem;
    background-position: center;
    background-size: cover;
    position: relative;

}
.middle .circle:nth-child(1){
    background-image: url(Image/Powder.jpg);
}
.middle .circle:nth-child(2){
    margin: 2rem 0;
    background-image: url(Image/Beans.jpg);
}
.middle .circle:nth-child(3){
    background-image: url(Image/Leaf.jpg);
    background-size: 90%; 
    background-repeat:no-repeat
}
.middle .circle::before{
    counter : "" ;
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8rem;
    border: .25rem dashed white;
    padding: .5rem;
}