/* ------------common part navigation menu ---------------*/
body{
    background-color: #FFFFFF;
    margin: 0px ;
    }
    #before-nav{
        height: 40px;
        background-color:  #3E5962;
        display: flex;
        color: white;
        align-items: center;
        padding-right: 0px;
    }
    #text{
        width: 400px;
        /* border: 1px solid salmon; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #arrow{
        display: flex;
       justify-content: space-around;
       /* margin-left: 300px; */
       width: 50%;
       /* border: 1px solid red; */
       
       margin-left: 370px;
    }
    #before-nav button{
         width: 26px;
         background-color: #3E5962;
         /* border: 1px solid blue; */
         text-align: center; 
         border: 0px;
         color: white;
         font-size: 26px;
         font-weight: 500;
         font-family: 'Courier New', Courier, monospace;
    }
    #offers{
        text-decoration: none;
        
        /* border: 1px solid blue; */
       margin-left: 150px;
       text-decoration: underline;
    }
    #cards{
        display: none;
        
        position: absolute;
        margin-top:10px ;
        margin-left: -1280px;
        overflow: scroll;
        z-index: 13;
        width: 100%;
        background-color: #FFFFFF;
    }
    #cards div{
        display: flex;
       
        
    }
    #cards div img{
        margin:10px 15px 10px 0px;
    
    }
    #second{
        display: none;
        font-family: 'Courier New', Courier, monospace;
        text-decoration: none;
        margin-left: 40px;
    }
    #nav-mid img{
         width: 250px;
    }
    
    #nav-top{
        display: flex;
        justify-content: space-between;
        height: 70px;
        align-items: center;
        padding-left: 20px;
        padding-right: 70px;
    }
    #nav-top>div{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 20px;
    }
    #nav-top>div:first-child{
       
     width: max-content;   
        
    
    }
    #nav-top>div>div{
        border-right: 1px solid #AF9D69;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-left: 15px;
        padding-right: 15px;
        
        height: 20px;
        font-size: 12px;
        font-weight: 500;
        font-family: sans-serif;
    }
    #nav-top>div>div:hover{
        color: #21282D;
        
    }
    #nav-top img{
      width: 20px;
    }
    #nav-top>div>div:last-child{
        border: 0px;
    }
    #nav-top>div>div:first-child{
        width: 130px;
    }
    
    #nav-mid{
        display: flex;
        height: 76px;
        width: 1403px;
        /* border: 1px solid red; */
        justify-content: space-evenly;
        align-items: center;
        margin: auto;
    }
    #cart img{
        width: 50px;
        /* border: 1px solid; */
    }
    #cart-got{
        display: none;
        width: 26%;
        height: 749px;
        background-color: #FFFFFF;
        position: absolute;
        z-index: 10;
        margin-left:1124px ;
        margin-top: -189px;
        overflow: scroll;
    }
    #cart-got button{
        border: 0px;
        font-size: 20px;
        background-color: #FFFFFF;
        
        
    }
    #cart-got>div:first-child{
        display: flex;
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 10px;
        /* border: 1px solid; */
        font-family: sans-serif;
    }
    #cart-got>div:nth-child(2){
        background-color:  #F0F0F0;
        height: 70px;
        color:  rgb(81, 91, 91);
        font-weight: 300;
        font-size: 14px;
        padding-left: 10px;
        padding-right: 4px;
        border-top: 1px solid  #CCCCCC;
    border-right: 0px solid  #CCCCCC;
    border-bottom: 1px solid  #CCCCCC;
    border-left: 0px solid  #CCCCCC;
    margin-bottom: 20px;
    }
    #book-display>div{
        /* border: 1px solid blue; */
        display: flex;
        justify-content: space-between;
        height: 210px;
        margin-bottom: 20px;
    }
    #book-display>div>div{
        /* border: 1px solid salmon; */
        width: 50%;
        padding-left: 10px;
    }
    #book-display>div h3{
        font-weight: 100;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        
    }
    #book-display>div h2{
        font-size: 20px;
        font-weight: 300;
    }
    #book-display>div>div:first-child{
        display: flex;
        justify-content: center;
    }
    #book-display>div>div>div{
        display: flex;
        width: 100px;
        height: 50px;
        justify-content: space-between;
        margin-left: 25px;
        margin-bottom: 10px;
    }
    #book-display>div>div>button{
        border: 1px solid;
        margin-bottom: 10px;
        color: red;
        margin-left: 30px;
    }
    #book-display>div>div>div h2{
      border: 1px solid;
      width: 30px;
      height: 30px;
      text-align: center;
    }
    #book-display img{
        width: 150px;
    }
    
    #subtotal{
        background-color:  #F0F0F0;
        margin-top: 20px;
    }
    #subtotal>div{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 30px;
        padding-right: 30px;
        
    }
    #nav-mid>div{
        /* border: 1px solid green; */
       display: flex;
       width: 50px;
       position: relative;
    }
    #circle{
        /* background-color: aqua; */
       position: absolute;
       margin-left: 30px;  
       
    }
    #circle>img{
        width: 35px;
        margin: 0px 0px 0px 0px;
    }
    #circle div{
        /* background-color: bisque; */
        position: absolute;
        margin-top: -31px;
         margin-left: 14px;
        color: white;
    }
    #nav-mid form{
        width: 900px;
        /* border: 1px solid blue; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #nav-mid #search{
        width: 750px;
        height: 40px;
    }
    #nav-mid form img{
        width: 45px;
        height: 45px;
        margin: 0px 0px 0px 0px;
    }
    #bottom-nav{
        display: flex;
        /* border: 1px solid red; */
        height: 40px;
       width: max-content;
       margin: auto; 
    }
    #bottom-nav>div:not(:last-child){
        border-right: 1px solid #AF9D69;
        padding-left: 35px;
        padding-right: 35px;
        font-family: serif;
        text-transform: capitalize;
        height: 20px;
        font-size: 17px;
        font-weight: 500;
       
    }
    #bottom-nav div:last-child{
        border:0px
    }
      .contnav{
        display: none;
       width: 1300px;
       height: 500px;
        position: absolute;
        background-color: #FFFFFF; 
        z-index: 100;
        margin-left: 100px;
        padding: 20px 40px 20px 40px;
        margin-top: 40px;
    }
    .container{
        display: flex;
        justify-content: space-evenly;
        font-family: serif;
        font-size: 12px;
        /* background-color: red; */
    }
    .container p{
        color:  #346250
    }
     #bottom-nav:hover .contnav{
        display: block;
        background-color: #FFFFFF; 
        z-index: 100;
        
    }
    #bottom-nav span:hover{
        display: block;
        color:#3E5962;
        border-bottom: 2px solid #AF9D69;
    }
    #myacc>div:first-child{
         /* border: 1px solid red;  */
        display: flex;
        width: 110px;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    #myacc{
        display: flex;
        flex-direction: column;
    }
    
    .content{
        display: none;
        position: absolute;
        margin-top: 220px;
        border: 1px solid black;
        background-color: #FFFFFF;
    }
    #myacc:hover .content {
        display: block;
        
    }
    #myacc:hover >div:first-child>div{
        border-bottom: 2px solid #AF9D69;
    }
    .content a{
        display: block;
        text-decoration: none;
        font-size: 12px;
        color: black;
        line-height: 15px;
        padding: 18px 20px 15px 20px;
    }
    
    /* ------------common part navigation menu ---------------*/
    /*------------------------ ends-------------------------- */

    /*---------------- middle section of web------------------- */

    #banner:hover{
        border-top: 1px solid #3E5962 ;
        
    }
    #banner img{
        width: 100%;
        height: 150;
    }
    #banner+div{
      
            height: 40px;
            background-color:  #3E5962;
            display: flex;
            color: white;
            align-items: center;
            padding-right: 0px;
        text-transform: capitalize;
        
    }
    #banner+div>div{
       margin: auto;
        width: max-content;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      font-size: 18px;
      font-weight: 500;
      
    }
    #banner+div+div img{
        width: 250px;
    }
    #banner+div+div{
        width: max-content;
        margin: auto;
    }
    #poster img{
        width: 1366px;

    }
    #poster{
        
        position: relative;
        /* width: max-content; */
        text-align: center;
    }
    #poster button{
       
        background-color:#346250 ;
        height: 47px;
        width: 218px;
        text-align: center;
        color: white;
        border: 0px;
    }
    #poster div:last-child{
        position: absolute;
        margin-left:781px;
        margin-top: -156px;
    }
    #specials{
        display: grid;
        grid-template-columns: repeat(2,450px);
        grid-template-rows: repeat(3,200px);
        /* border: 1px solid; */
        width: max-content;
        
    }
    #specials img:not(.small){
        width: 80%;
    }
    #specials .small>img{
        width: 55%;
        /* border: 1px solid; */
    }
 #specials div{
    /* border: 1px solid; */
    text-align: center;
 }

#mid{
    display: flex;
    justify-content: space-around;
    /* border: 1px solid; */
    margin-top: 10px;
    width: 90%;
    margin: 80px ;
    margin-bottom: 0px;
}

 #mid>div:first-child>div{
    padding-right: 40px;
    border-right: 1px solid #D8DCDD;
    height:350px;
    display: flex;
   flex-direction: column;
   font-size: 12px;
   font-family: sans-serif;
   justify-content: space-between;
   color: #26644E;
 }
 #mid>div:first-child h2{
    font-size: 12px;
    color:#21282D ;
    font-weight:550;
 }
 #bott{
    display: grid;
    grid-template-columns: repeat(1,800px);
    gap: 20px;
    margin-left: 480px;
 }
 #bott>div:first-child{
    background-color: #E6EDF0;
    text-align: center;
    padding: 20px 50px 20px 50px;
    line-height: 0.6;
    font-family: serif;
    font-weight: 200;
    
 }
 #bott>div:first-child img{
    width: 40px;
 }
 #bott>div:first-child p{
    /* border: 1px solid; */
    width: 400px;
    margin: auto;
    line-height: 1;
    margin-bottom: 10px;
 }
 #seccard{
    background-color: #EEEEEE;
    text-align: center;
    padding: 20px 50px 20px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: serif;
    font-weight: 200;
 }
 #seccard button{
    background-color:#346250 ;
        height: 47px;
        width: 218px;
        margin-top:10px ;
        color: white;
        border: 0px;
 }
 #seccard+div{
    font-size: 12px;
    font-family: sans-serif;
    line-height: 18px;
 }


 /*------------------ content of membership page------------------ */
 /* ----------------------------end------------------------------- */

#before-foot{
    display: flex;
    border-bottom: 1px solid  #21282D;
    width: 90%;
    justify-content: space-between;
    margin: auto;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 11px;
    font-family: sans-serif;
    font-weight: 600;
    padding-bottom: 40px;
}
#before-foot div{
    display: flex;
    flex-direction: column;
    /* border: 1px solid salmon; */
    text-align: center;
    height: 130px;
    align-items: center;
}
#before-foot img{
    width: 80px;
}
#before-foot span{
    height: 80%;
}
footer{
/* border: 1px solid salmon; */
display: flex;
width: 90%;
margin: auto;
justify-content: space-between;
}
#box{
    display: flex;
    /* border: 1px solid red; */
    width: 65%;
    justify-content: space-between;
    /* margin-left: 50px; */
    font-size: 12px;
    font-family: sans-serif;
    line-height: 16.2px;
}
#box h2{
    font-size: 12.5px;
    font-weight: 500;
}
#box p{
    text-transform: capitalize;
    color: #3E5962;
}
#wok{
    /* border: 1px solid blue; */
    width:23% ;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 350px;
}
#wok .simi{
    line-height: 0px;
}
#wok #store,#mail{
width: 250px;
height: 40px;
}
.simi>div{
   display: flex;
}
.simi img{
    height: 46px;
}
#wok p{
    color:  #6E7880;
    font-size: 14px;
}
#wok>div:last-child{
    display: flex;
    /* border: 1px solid; */
    align-items: center;
    justify-content: space-around;
}
#wok>div:last-child img{
    width: 170px;
    height: 40px;
}
#wok h3{
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 200;
}
footer+div img{
   width:100%;

}