header{

    position: sticky;
    top: 0%;
    z-index: 200;
    width: 100%;
    background-color: white;
    border-bottom:1px solid rgb(235,235,235) ;
}

header>nav{
    border: 0px solid red;
    height: 250px;
    width: 100%;
    
}

*{
    margin: 0px;
    padding: 0px;
}

#nav1{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2px solid rgb(46,51,55);


}

#nav1 img{
    width: 70%;
}

#nav1 a{
    text-decoration: none;
    color: rgb(196,136,50);
    font-size: 20px;
}

#srch{
    height: 40px;
    width: 480px;
    border: none;
    border-top-left-radius:5px ;
    border-bottom-left-radius: 5px;
    padding: 5px;
    font-size: 17px;
}

#srch::placeholder{
    padding-left: 5px;
    font-size: 16px;
}

#nav1+ul{
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

#srchbox{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 5px;
}

#sricon{
    background-color: rgb(182, 146, 94);
    border-top-right-radius: 5px;
    border: none;
    padding: 5px;
}

#nav1+ul>li:hover{
    
    /* height: 30px; */
    /* width: 60px; */
    border: 1px solid blue;
    background-color:rgba(90, 44, 44, 0.629) ;
    transition: 1s;
    
}

#nav1+ul>li>a:hover{
    color: white;
}
ul a{
    text-decoration: none;
    color: rgb(50,50,51);
    
}

ul>li{
    list-style: none;
}



.dropdown_menu{
    display: none;
}

 nav ul li:hover .dropdown_menu{
    
display: block;
position: absolute;
border: 0.5px solid wheat;
border-radius: 10px;
/* box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
width: 250px;
  
  
  /* top: 100%; */
    background-color: white;
    /* height: auto; */
}

nav ul li:hover .dropdown_menu ul{
    /* display: flex; */
    justify-content: space-between;
    margin: 10px;
}

nav ul li:hover .dropdown_menu ul li{
    
    /* width: 200px; */
    padding: 10px;
    font-size: 20px;
     
    
}

.dropdown_menu ul li:hover{
    background-color: rgb(198, 153, 85);
    transition: 1s;
}

.dropdown_menu ul li a:hover{
    color: white;
}
/* #fg{
    display: flex;
    flex-direction: column;
}
#fg>li{
    
    font-family: cursive;
}
 */

 #cart{
    border: 0px solid red;
    display: flex;

    
 }

 .account_menu1{
    display: none;
 }

 #acnt:hover .account_menu1{
display: block;
position: absolute;
border: 0.5px solid wheat;
border-radius: 10px;

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
width: 250px;
  
  
  
    background-color: white;
 }
#acnt:hover .account_menu1>ul>.btn2>li button{
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    height: 40px;
width: 100%;
border: 1px solid rgba(4, 4, 4, 0.495);

background-color: transparent;



}

#acnt:hover .account_menu1>ul>.btn2 #lgn{
    width: 100%;
    height: 40px;
    background-color: rgba(0, 128, 128, 0.482);
    cursor: pointer;
    transition: 1s;

}


.account_menu1>ul>.btn2>li:hover{
    background-color: rgba(0, 128, 128, 0.482);
    border-radius: 10px;
    transition: 1s;
}

#acnt:hover .account_menu1>ul>.btn2{
    background-color: rgb(243,243,242);
    border-bottom: 1px solid rgba(0, 0, 0, 0.614) ;
}
#acnt:hover .account_menu1 ul li{
    list-style: none;
}
 #acnt>.account_menu1>ul>li>a{
    color: black;
 }
.account_menu1 li{
    padding: 10px;
}

.account_menu1 li:hover{
    background-color: gray;

    transition: 1s;
}
 .cartnumber{
    position: relative;

 }

 #cart{
    position: absolute;
    top: -13px;
    right: 51px;
    padding: 1px 4px;
    border: none;
    /* border: 1px solid red; */
    border-radius: 50%;
    display: flex;
    background-color: black;
    color: white;
 }

 #srchbox{
    border: 1px solid black;
    display: flex;
    /* align-items: center; */
    /* margin: auto; */

 }

 #srchbox>i{
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 /* footer starts */

 * {
    margin: 0;
 }
 
 #line {
    margin-top: 2%;
 }
 
 .t {
    margin-top: 2%;
    margin-left: 30px;
    width: 55%;
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.5px;
    font-size: 17px;
    opacity: 0.9;
 }
 
 .img {
    margin-top: 1%;
    margin-left: 40px;
    height: 50px;
    width: 58%;
    display: flex;
    justify-content: space-between;
 }
 
 .img button {
    width: 100px;
    background-color: black;
    color: white;
    border-radius: 8px;
 }
 
 .img button:hover {
    transition: 0.3s ease-in-out;
    width: 110px;
    cursor: pointer;
 }
 
 .img button p {
    font-size: 17px;
    opacity: 0.7;
 }
 
 .img div {
    width: 20%;
    display: flex;
    justify-content: space-between;
 }
 
 .container {
    margin: auto;
    width: 95%;
    margin-top: 3%;
    display: flex;
    gap: 230px;
 }
 
 #l {
    width: 170%;
    margin-bottom: 6%;
    opacity: 0.7;
 }
 
 .container div h4 {
    font-size: 19px;
    opacity: 0.8;
    letter-spacing: 0.5px;
    margin-bottom: 8%;
 }
 
 .container div p {
    font-size: 17px;
    line-height: 40px;
    opacity: 0.6;
    word-spacing: 1px;
 }
 
 .last {
    margin-top: 2%;
    width: 90%;
    display: flex;
    justify-content: space-between;
 }
 
 .last div:nth-child(1) {
    margin-left: 3%;
    line-height: 40px;
    width: 15%;
 }
 
 .last div:nth-child(1) h1 {
    letter-spacing: 5px;
    opacity: 0.8;
 }
 
 .last div:nth-child(1) p {
    opacity: 0.6;
 }
 
 .last div:nth-child(2) img {
    height: 100px;
    width: 350px;
 }

 @media only screen and (max-width: 1100px){
    #nav1{
        display: grid;
        grid-template-columns: repeat(4 , 1fr);
    }
#nav1 img{
    width: 50%;
}
#srch{
    width:280px ;
}
#cart{
    position: relative;
    width: 5%;
    margin-left: 25%;
margin-bottom: -8%;
}
 }


 @media only screen and (max-width: 600px){
    #nav1{
        /* display: block; */
        display: grid;
        grid-template-columns: repeat(4 , 1fr);
        justify-content: space-between;
        /* width: 80%; */
    }
#srchbox{
    width: 100%;
    margin: 0px;
    

}
#sricon{
    padding-left: 5px;
}
#srch{
    width: 120px;
    
}
#acnt{ 
    margin-left: 10%;
    
}
#nav1+ul{
    
    display: grid;
    grid-template-columns: repeat(4 ,1fr);
    gap: 5px;
}

#cart{
    position: relative;
    width: 5%;
    margin-left: 45%;
margin-bottom: -16%;
}

#carousel{
    width: 100%;
}

#cats+div{
    /* display: grid; */
    /* display: flex; */
    /* display: block; */
    /* width: 100%; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    width: 60%;
    margin: auto;
    margin-top: 10px;
    border: 0px solid red;
}
.shopcatcard{
    
    border: 0px solid rebeccapurple;
}

.shopcatcard{
    width: 50%;
}

 }

 @media only screen and (max-width: 380px){
    #cats+div{
        
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(3,1fr);
        width: 100%;
        margin: auto;
        margin-top: 10px;
        border: 0px solid red;
    }
    .shopcatcard{
        
        border: 0px solid rebeccapurple;
    }
    
    .shopcatcard{
        width: 60%;
    }
#box1+div{
    border: 0px solid red;
    height: 300px;
    margin-top: -30px;
    /* height: 100px; */
    
}
#box1+div img{
        width: 100%;
        height: 250px;
    }

    #header+div{
        display: grid;
        grid-template-columns: repeat(4 , 1fr);
        gap: 5px;
        height: 80px;
        font-size: 12px;
    }

    #nav1{
        height: 100px;
    }

    #footer{
        font-size: 10px;
        border: 0px solid red;
        
    }

    #footer .t{
        width: 75%;
        border: 0px solid red;
        font-size: 15px;
        margin: auto;
    }
    
    #sslogo{
        /* border: 1px solid red; */
        display: none;

    }
    #fspbtn{
        border: 0px solid blue;
        /* margin-left:150px ; */
        width: 40%;
        
        margin: auto;
        text-align: center;
    }
    #fspbtn button{
        padding: 5px;
    }

    .container{
        border: 0px solid rebeccapurple;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        /* justify-content: center; */
        text-align: center;
        margin: 0px;
        gap: 5px;
        /* height: 400px; */

 }
 .container div{
    height: 300px;
    border: 0px solid pink;
    
    
 }
 .container>div>p{
    line-height: 30px;
 }
 #acnt{ 
    margin-left: 10%;
    
    border: 0px solid red;
    
}


#cart{
    position: relative;
    width: 15%;
    margin-left: 100%;
margin-bottom: -30%;
}

#nav1 img{
    width: 120%;
}
#srchbox{
    width: 100%;
    margin: 0px;
    /* height: 20px; */
    /* display: none; */
    

}

#srch{
    width: 70px;
    /* height: 30px; */
    /* display: none; */
    
}
#nav1{
    gap: 10px;
}

h2+#details{
    display: grid;
    grid-template-columns: repeat(1,1fr);
}
#details+div{
    
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin: 0px;
    /* justify-content: space-between; */
    display: none;
    
}
#box3 img{
    display: block;
    margin: auto;
    /* text-align: center; */
    height: auto;
    width: 150%;
}
}

#prdts{
    height: 35px;
    border-radius: 5px;
    

}

#prdts:hover{
    cursor: pointer;
    background-color: teal;
}