.logo{
    display: flex;
justify-content: center; 
}
.search{
display: flex;
align-items: center;
background: white; /* Optional: for visibility */
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
position: fixed;
top: 20px; /* Adjust as needed */
right: 250px; /* Adjust as needed */
/* z-index: 1000; */

}
#search-bar::placeholder {
color: #888; /* Placeholder text color */
font-style: italic;
}
.login{
position: fixed;
top: 30px; /* Adjust as needed */
right: 150px; 
height: 18px;
width: 3%;
/* z-index: 1000; */
}
.login>img{
height: 100%;
width: 100%;
}
.bag{
position: fixed;
top: 20px; /* Adjust as needed */
right: 40px; 
height: 32px;
width: 4%;
/* border: 1px solid black; */
z-index: 10;

}
.bag>img{
height: 100%;
width: 100%;


}
.whishlist{
position: fixed;
top: 28px; /* Adjust as needed */
right: 110px; 
height: 18px;
width: 2%;
/* border: 1px solid black; */
}
.whishlist>img{
height: 100%;
width: 100%;

}
#navbar{
display: flex;
flex-direction: row;
/* padding: 20px; */
align-items: flex-start;
background-color: white;
justify-content: space-between;
margin-left: 60px;
margin-right: 60px;
 width: 90%;
 /* border: 1px solid rgb(172, 58, 58); */
}

#navbar a {
text-decoration: none; /* Remove underline */
color:#000(115, 119, 123); /* Text color */
font-weight: lighter;
font-size: 15px; /* Font size */
display: block; /* Ensure the link covers the entire h3 element */
}

#navbar a:hover {
color: #007bff; /* Color on hover (optional) */
}
.cleardiv{
    /* margin-top: -0px; Adjust this value to move it closer */
    text-align: center; /* Center the text if needed */
    /* border: 1px solid palevioletred; */
    /* margin-top: -20px; */
}
.clear{
    display: flex;
    justify-content: center;
    color: rgb(205, 37, 37);
    /* padding-top: 5px; You can adjust this as needed */
    font-size: 15px;
    /* border: 1px solid black; */
    margin-bottom: -30px; 
    padding-top: -50px;


}
#scrolling-bar{
background-color: #000;
color: whitesmoke;
display: block;
height: 35px;
width: 100%;
text-align: center;
font-size: 20px;
font-weight: bold;
justify-content: center;
 display: flex; align-items: center;
 margin-top: 1%;
}
#scrolling-bar span{
justify-content: center;
display: flex;
}
.mutlipc{

width: 100%;
height: 500px;
/* margin-top: 15%; */
/* margin-left: 15%; */
margin-bottom: 5%;
/* position: absolute; */
/* transform: translate(-50%,-50%); */
background-image: url("https://images.pexels.com/photos/994234/pexels-photo-994234.jpeg?cs=srgb&dl=pexels-olly-994234.jpg&fm=jpg");
background-size: 100% 100%;
animation: slider 20s infinite linear;
cursor: pointer;


}
@keyframes slider  {
0%{  background-image: url("https://media.istockphoto.com/id/854321536/photo/look-at-this-gorgeous-dress.jpg?s=612x612&w=0&k=20&c=UyxEiEddYEFQPAoopwYs-_8xJ5vp0vKE0Sl3GnrQpK8=");}
35%{ background-image: url("https://media.istockphoto.com/id/1255226674/photo/happy-trendy-female-shopper-in-sunglasses-with-shopping-bags.jpg?s=612x612&w=0&k=20&c=gy6wN4rEX47mzZLLQ03qRv55Ge5hRSAdwGjVUBMqbWU=");}
75%{ background-image: url("https://www.shutterstock.com/image-photo/stylish-watch-on-woman-hand-260nw-1344280394.jpg");}

}

#main{
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(4,300px);
gap:45px;
margin-top: 1%;
padding-left:50px;
}
 .rec{
font-size: 35px;
font-weight: lighter;
/* border: 1px solid black; */
justify-content: center;
display: flex;
letter-spacing: .025em;


}
.horizontal-line {
width: 100%; /* Full width */
height: 1px; /* Thickness of the horizontal line */
background-color: rgb(199, 198, 198); /* Line color */
margin-top: 4%;
}

#items{
height: 380px;
width: 240px;
/* margin-left: 7%; */
overflow: hidden;
text-decoration: none;
/* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */

}
#itemsimg{
/* border: 1px solid black; */
height: 60%;
overflow: hidden;

}
#itemsimg img {
        width: 100% ;
        height: 100%; 
    }
    .itemsdetails {
        /* margin-left: 0.5; */
        font-size: 15px;
        font-family: Futura,sans-serif;
        color: #888; /* Placeholder text color */
        letter-spacing: .025em;
        line-height: 1.6;
        /* text-align: center; */

    }
    #main>items>para {
        margin: 5px 0;
        font-size: 14px;
    }
    .original-price {
        text-decoration: line-through;
        color: gray;
        margin-right: 10px;
    }
    .discounted-price {
        font-weight: bold;
        margin-right: 10px;
        color: black;
    }
    .savings {
        color: red;
        font-weight: bold;
    }
     #header{
        width: 100%;
    position: sticky;
top: 0;
width: 100%;
background: #fff; /* Background color to ensure it stands out */
z-index: 1000; /* Ensure it stays on top of other content */
}
#sbc{
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(4,200px);
grid-template-rows: repeat(2,200px);
gap:45px;
margin-top: 1%;
padding-left:70px;
margin-top: 4%;
}

.itemsprice {
text-align: center;
color: #000;
font-size: 20px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: lighter;
}
.sbcitem{
height: 480px;
width: 240px;
}
.sbcimg{
/* border: 1px solid black; */
height: 40%;
overflow: hidden;
}
.slide {
display: flex;
/* justify-content: space-between; */
/* flex-wrap: wrap; */
grid-template-columns: repeat(4,200px);
gap:20px;
margin-top: 1%;
padding-left:20px;
/* border: 1px solid  black; */

/* Adjust alignment as needed */
}

.image-container {
text-align: center; /* Center align image and text */
/* border: 1px solid black; */
height: 480px;
width: 280px;

}

.image-container img {
/* width: 100%; */
height: 60%; 
overflow: hidden;

}


.images {
display: flex;
transition: transform 0.5s ease-in-out;
}


.prevButton {
right:100px;
/* left: 20px; */
}

.nextButton {
right: 50px;
}
.desc{
text-transform:uppercase;
font-size: 20px;
letter-spacing: .2em;
color: #000;
text-align: center;
font-weight: lighter;
}
.prevButton,.nextButton{
position: absolute;
top: 400%;
transform: translateY(-50%);
padding: 10px;
font-size: 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
.price-line {
border: none; /* Remove default border */
height: 1px; /* Thickness of the line */
background-color: #333; /* Color of the line */
margin: 10px 0; /* Space around the line */
width: 100%; /* Full width of the container */
}
.threeimg {
display:grid;
grid-template-columns: repeat(3,1fr);
/* border: 1px solid black; */
margin-top: 10%;
gap: 20px;
margin-left: 2%;
/* height: 500px; */

}
.imgone{
position: relative;
/* width: 300px; */
/* height: 500px; */
}
.imgone>img{
height: 530px;
width: 470px;
}
.image-heading, .image-headingoff, .image-headingdes {
position: absolute;
top: 23%; /* Adjust as needed to center vertically */
left: 45%; 
   transform: translate(-50% );
/* background-color: rgba(0, 0, 0, 0.7); Semi-transparent background */
color: #fff; /* Text color */
padding: 10px;
/* font-size: 40px;  */
color: #fff;
width: 80%;
white-space: nowrap;
letter-spacing:.1em ;
text-align: center;
}
.image-heading {
font-size: 25px; /* Larger font size for main heading */
/* top: 30%; */
}

.image-headingoff {
font-size: 40px;
font-style: bold;
}

.image-headingdes {
font-size: 20px;
font-style: bold; 
}
#imgbutton{
position: absolute;
bottom: 50px; /* Position button 20px from bottom */
left: 45%; 
transform: translateX(-50%); /* Center align horizontally */
font-size: 1.2rem; /* Font size for button text */
padding: 10px; /* Padding around button text */
background-color: #333; /* Button background color */
color: #ffffff7d; /* Button text color */
border: none; /* Remove button border */
cursor: pointer; /* Pointer cursor on hover */
white-space: nowrap;
/* top: 10%; */}
.lastimg{
height: 600px;
/* border: 1px solid rebeccapurple; */
margin-top: 5%;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
margin-left: 2%;

}
.lasthead{
height: 420px;
width: 430px;
}
.lasthead>img{
height: 100%;
width: 100%;
}
.lasthead>h2{
/* margin-top:-0.1%; */
font-size: 27px;
/* letter-spacing:.1em ; */
/* line-height: 1.6; */
text-align: center;
text-transform:uppercase }
.lasthead>h5{
    font-size:18px;
    font-family: Futura,sans-serif;
    letter-spacing: .025em;
    /* line-height: 1.6; */
    font-weight: lighter;
    margin-top: -0.2%;
    /* white-space: nowrap; */
    }
    .button-container {
text-align: center;  /* Centers content inside the container */
}

.my-button {
background-color: white;
color: rgb(26, 25, 25);
border: 0.5px solid black;
padding: 10px 20px;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
font-weight: lighter;
margin-top: -2%;
letter-spacing: .025em;}
#aboutus{
background-color:rgb(240, 240, 240);
height: 700px; 
width: 1500px;
margin-top: 8%;
/* color: #000; */
padding-left: 3%; 

}
.about{
 padding-top: 4%;
 /* text-decoration: underline; */
 font-size: 20px;
 font-weight: 500;
 color:#000;
 font-family:Futura,sans-serif ;
}
.box1{
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    font-family: Futura,sans-serif;
    letter-spacing: 0.2em;
    /* margin-top: -1%; */
    color: #000;
}
.about-link {
text-decoration: none; /* No underline for the link */
}
.box-container {
display: flex;
gap: 40px; /* Space between boxes */
}
.signup{
font-size: 20px;
 font-weight: 500;
 color:#000;
 font-family:Futura,sans-serif ;
 margin-left: 55%;
 margin-top: -17%;
}
.sub{
background-color: black;
color: white;
font-size: 20px;
height: 40px;
width: 400px;
margin-top: 2%;}
#ins{
    height: 30px;
    margin-top: 5%;
}
 #fb{
    height: 30px;
    /* margin-top:-0.5%; */
    margin-left: 3%;

 }
 .lastlog>img{
    /* text-align:  center; */
    height: 150px;
    margin-top: 20%;
    margin-left: 35%;
 }   
 .lastlog>p{
    margin-left: 25%;
    /* font-size: 25px; */
 }
    .logo{
        display: flex;
  justify-content: center; 
  }
 .search{
    display: flex;
    align-items: center;
    background: white; /* Optional: for visibility */
    padding: 5px;
    /* border-radius: 1px; */
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    position: fixed;
    top: 20px; /* Adjust as needed */
    right: 250px; /* Adjust as needed */
    /* z-index: 1000; */

 }
 #search-bar{
    outline: none;
    border: none;
 }
 #search-bar::placeholder {
    color: #888; 
    font-style: italic;
    
}
.login{
    position: fixed;
    top: 30px; /* Adjust as needed */
    right: 150px; 
    height: 18px;
    width: 3%;
    /* border: 1px solid black; */
    /* z-index: 1000; */
}
.login>img{
    height: 100%;
    width: 100%;
}
.bag{
    position: fixed;
    top: 20px; /* Adjust as needed */
    right: 40px; 
    height: 32px;
    width: 4%;
    /* border: 1px solid black; */
    z-index: 1000;

}
.bag>img{
    height: 100%;
    width: 100%;


}
.whishlist{
    position: fixed;
    top: 28px; /* Adjust as needed */
    right: 110px; 
    height: 18px;
    width: 2%;
    /* border: 1px solid black; */
}
.whishlist>img{
    height: 100%;
    width: 100%;

}
#navbar{
    height: 50px;
    /* border: 1px solid black; */
    display: flex;
    flex-direction: row;
   padding: 20px;
   align-items: flex-start;
   background-color: white;
   justify-content: space-between;
   margin-left: 60px;
   margin-right: 60px;
     width: 90%;
     /* padding-bottom: 50px; */
}

#navbar a {
    text-decoration: none; /* Remove underline */
    color:#000(115, 119, 123); /* Text color */
    font-weight: lighter;
    font-size: 15px; /* Font size */
    display: block; /* Ensure the link covers the entire h3 element */
}

#navbar a:hover {
    color: #007bff; /* Color on hover (optional) */
}
.clear{
    /* border: 1px solid blue; */
    display: flex;
  justify-content: center;
  color :rgb(205, 37, 37);
  margin-top: 1%;
  font-size: 15px;
  padding-bottom: 10px;
  height: 40px;
}
#scrolling-bar{
    background-color: #000;
    color: whitesmoke;
    display: block;
    height: 35px;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    justify-content: center;
     display: flex; align-items: center;
     margin-top: 3%;
}
 #scrolling-bar span{
    justify-content: center;
    display: flex;
}
.mutlipc{

    width: 100%;
    height: 500px;
    /* margin-top: 15%; */
    /* margin-left: 15%; */
    margin-bottom: 5%;
   /* position: absolute; */
   /* transform: translate(-50%,-50%); */
   background-image: url("https://images.pexels.com/photos/994234/pexels-photo-994234.jpeg?cs=srgb&dl=pexels-olly-994234.jpg&fm=jpg");
   background-size: 100% 100%;
   animation: slider 20s infinite linear;
   cursor: pointer;
   
   
}
@keyframes slider  {
    0%{  background-image: url("https://media.istockphoto.com/id/854321536/photo/look-at-this-gorgeous-dress.jpg?s=612x612&w=0&k=20&c=UyxEiEddYEFQPAoopwYs-_8xJ5vp0vKE0Sl3GnrQpK8=");}
    35%{ background-image: url("https://media.istockphoto.com/id/1255226674/photo/happy-trendy-female-shopper-in-sunglasses-with-shopping-bags.jpg?s=612x612&w=0&k=20&c=gy6wN4rEX47mzZLLQ03qRv55Ge5hRSAdwGjVUBMqbWU=");}
    75%{ background-image: url("https://www.shutterstock.com/image-photo/stylish-watch-on-woman-hand-260nw-1344280394.jpg");}
    
}
 
#main{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(4,300px);
    gap:45px;
    margin-top: 1%;
    padding-left:50px;
}
     .rec{
  font-size: 35px;
  font-weight: lighter;
  /* border: 1px solid black; */
  justify-content: center;
  display: flex;
  letter-spacing: .025em;
  

}
.horizontal-line {
    width: 100%; /* Full width */
    height: 1px; /* Thickness of the horizontal line */
    background-color: rgb(199, 198, 198); /* Line color */
    /* margin-top: 4%; */
}
 
 #items{
    height: 425px;
    width: 240px;
    /* margin-left: 7%; */
    overflow: hidden;
    text-decoration: none;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
    /* border: 1px solid rgb(237, 99, 99); */

}
#itemsimg{
    /* border: 1px solid black; */
    height: 60%;
    overflow: hidden;
   
}
#itemsimg img {
            width: 100% ;
            height: 100%; 
        }
        .itemsdetails {
            /* margin-left: 0.5; */
            font-size: 18px;
            font-family: Futura,sans-serif;
            color: #888; /* Placeholder text color */
            letter-spacing: .025em;
            line-height: 1.6;
            /* text-align: center; */

        }
        .price-details {
            margin: 5px 0;
            /* font-size: 18px; */
        }
        .original-price {
            text-decoration: line-through;
            color: gray;
            margin-right: 3px;
            font-size: 18px;
        }
        .discounted-price {
            font-weight: bold;
            margin-right: 8px;
            color: black;
            font-size: 18px;
        }
        .savings {
            color: red;
            font-weight: bold;
            font-size: 18px;
        }
         #header{
            width: 100%;
        position: sticky;
        top: 0;
    width: 100%;
    background: #fff; /* Background color to ensure it stands out */
    z-index: 1000; /* Ensure it stays on top of other content */}
 #sbc{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(4,200px);
    grid-template-rows: repeat(2,200px);
    gap:45px;
    margin-top: 1%;
    padding-left:70px;
    margin-top: 4%;
 }

 .itemsprice {
    text-align: center;
    color: #000;
    font-size: 20px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: lighter;
 }
 .sbcitem{
    height: 480px;
    width: 240px;
 }
 .sbcimg{
    /* border: 1px solid black; */
    height: 40%;
    overflow: hidden;
}
.slide {
  display: flex;
  /* justify-content: space-between; */
  /* flex-wrap: wrap; */
  grid-template-columns: repeat(4,200px);
  gap:20px;
    margin-top: 1%;
    padding-left:20px;
   /* border: 1px solid  black; */

   /* Adjust alignment as needed */
}

.image-container {
  text-align: center; /* Center align image and text */
  /* border: 1px solid black; */
  height: 480px;
    width: 280px;

}

.image-container img {
  /* width: 100%; */
  height: 60%; 
  overflow: hidden;

}


.images {
  display: flex;
  transition: transform 0.5s ease-in-out;
}


.prevButton {
  right:100px;
  /* left: 20px; */
}

.nextButton {
  right: 50px;
}
 .desc{
    text-transform:uppercase;
    font-size: 20px;
    letter-spacing: .2em;
    color: #000;
    text-align: center;
    font-weight: lighter;
 }
 .prevButton,.nextButton{
    position: absolute;
    top: 400%;
    transform: translateY(-50%);
    padding: 10px;
    font-size: 20px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}
.price-line {
    border: none; /* Remove default border */
    height: 1px; /* Thickness of the line */
    background-color: #333; /* Color of the line */
    margin: 10px 0; /* Space around the line */
    width: 100%; /* Full width of the container */
}
.threeimg {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    /* border: 1px solid black; */
    /* margin-top: 10%; */
    gap: 20px;
    margin-left: 2%;
    margin-top: 3%;
    /* height: 500px; */

}
.imgone{
    position: relative;
    /* width: 300px; */
    /* height: 500px; */
}
.imgone>img{
    height: 530px;
    width: 470px;
}
.image-heading, .image-headingoff, .image-headingdes {
    position: absolute;
    top: 23%; /* Adjust as needed to center vertically */
    left: 45%; 
       transform: translate(-50% );
    /* background-color: rgba(0, 0, 0, 0.7); Semi-transparent background */
    color: #fff; /* Text color */
    padding: 10px;
    /* font-size: 40px;  */
    color: #fff;
    width: 80%;
    white-space: nowrap;
    letter-spacing:.1em ;
    text-align: center;
}
.image-heading {
    font-size: 25px; /* Larger font size for main heading */
    /* top: 30%; */
}

.image-headingoff {
    font-size: 40px;
    font-style: bold;
}

.image-headingdes {
    font-size: 20px;
    font-style: bold; 
}
#imgbutton{
    position: absolute;
    bottom: 50px; /* Position button 20px from bottom */
    left: 45%; 
    transform: translateX(-50%); /* Center align horizontally */
    font-size: 1.2rem; /* Font size for button text */
    padding: 10px; /* Padding around button text */
    background-color: #333; /* Button background color */
    color: #ffffff7d; /* Button text color */
    border: none; /* Remove button border */
    cursor: pointer; /* Pointer cursor on hover */
    white-space: nowrap;
    /* top: 10%; */}
 .lastimg{
    height: 600px;
    /* border: 1px solid rebeccapurple; */
    margin-top: 5%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-left: 2%;

 }
 .lasthead{
    height: 420px;
    width: 430px;
 }
 .lasthead>img{
    height: 100%;
    width: 100%;
 }
 .lasthead>h2{
    /* margin-top:-0.1%; */
    font-size: 27px;
    /* letter-spacing:.1em ; */
    /* line-height: 1.6; */
    text-align: center;
    text-transform:uppercase }
    .lasthead>h5{
        font-size:18px;
        font-family: Futura,sans-serif;
        letter-spacing: .025em;
        /* line-height: 1.6; */
        font-weight: lighter;
        margin-top: -0.2%;
        text-align: center;
        /* white-space: nowrap; */
        }
        .button-container {
    text-align: center;  /* Centers content inside the container */
}

.my-button {
    background-color: white;
    color: rgb(26, 25, 25);
    border: 0.5px solid black;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: lighter;
    margin-top: -2%;
    letter-spacing: .025em;}
    #aboutus{
  background-color:rgb(240, 240, 240);
  height: 700px; 
  width: 1450px;
  margin-top: 8%;
  /* color: #000; */
  padding-left: 3%; 
  
    }
    .about{
     padding-top: 4%;
     /* text-decoration: underline; */
     font-size: 20px;
     font-weight: 500;
     color:#000;
     font-family:Futura,sans-serif ;
    }
    .box1{
        white-space: nowrap;
        font-size: 15px;
        font-weight: 500;
        font-family: Futura,sans-serif;
        letter-spacing: 0.2em;
        /* margin-top: -1%; */
        color: #000;
    }
    .about-link {
    text-decoration: none; /* No underline for the link */
}
.box-container {
    display: flex;
    gap: 40px; /* Space between boxes */
}
/* .signup{
    font-size: 20px;
     font-weight: 500;
     color:#000;
     font-family:Futura,sans-serif ;
     margin-left: 55%;
     margin-top: -17%;
} */
.sub{
    background-color: black;
    color: white;
    font-size: 20px;
    height: 40px;
    width: 400px;
    margin-top: 2%;}
    #ins{
        height: 30px;
        margin-top: 5%;
    cursor: pointer;
    }
     #fb{
        height: 30px;
        /* margin-top:-0.5%; */
        margin-left: -1%;
        cursor: pointer;


     }
     #box4{
        /* background-color:rgb(177, 171, 171); */
        text-align: center;
        margin-top: 28%;
        /* border: 1px solid black; */
       
    }
    #box4>img{
        width: 20%;
        margin-top: -3%;
    }
     /* .lastlog>img{
        /* text-align:  center; */
        /* height: 150px;
        margin-top: 20%;
        margin-left: 35%;
        border: 1px solid blue;
     }    */
     /* .lastlog>p{ */
        /* margin-left: 25%; */
        /* font-size: 25px; */
     /* } */ */
    
  .category-separator{
        /* border: 0; */
        border-top: 2px solid rgb(228, 228, 12);
        /* margin:  0; */
        width: 10%;
}
    .listitem{
        width: 10px;
        /* margin-top:-165%; */
        /* border:1px solid black; */
        /* height: 1000px;; */
    } 
     .cont{
        /* width: 20%; */
        /* margin-top:80px; */
        /* border:1px solid black; */
        position: relative;
        /* margin-left: 6%; */
        /* Ensure absolute positioning works */
 } 
    .cont ul{
        margin: 0;
        padding: 0;
        /* height: 500PX; */
        background-color: white;
       display: none;
       font-size:13px;
       letter-spacing: 0.2em;
       position: absolute;
       width: 80%; /* Make sure it covers the container width */
            z-index: 1000; 
            margin-left: 4%;
            } 
    li{
        list-style:none;
        font-size: 13px;
        letter-spacing: 0.2em;

    } 
    li a{
        width: 100%;
        display: block;
        padding: 5px 10px;
        text-decoration: none;
    }
    .cont:hover ul{
    display: block;
    }
    .select-item {
    font-size: 13px; /* Increase font size */
    font-weight: lighter; /* Optional: make the text bold */
    cursor: pointer; /* Indicate that it's clickable */
    letter-spacing: 0.2em;
    margin-left: 4%;
    margin-top: 10%;
    height: 28px;

}
.showmore{
    background-color: black;
    color: white;
}
.vertical-line {
    width: 1px; 
    height: 550px; /* Length of the line */
    background-color: rgb(177, 177, 174); /* Color of the line */
    margin-left: 17%; 
    color: rgb(177, 177, 174);
    margin-top: -75%;
} 
.pictureimg{
    height: 180px;
    width: 79%;
    margin-left: 20%;
    margin-top: 3.5%;
    border: 1px solid black;
   }
   .pictureimg img{
     width: 100%;
     height: 100%;
   }
   .elembox{
     margin-left: 20%;
     /* padding: 10px; */
     /* border: 1px solid black; */
     width: 79%;
   }
   .header {
     position: relative; /* Establishes a positioning context for the child elements */
     width: 100%; /* Full width of the container */
     height: 60px; /* Adjust height as needed */
     /* border: 1px solid #ddd; Optional border for visual reference */
     display: flex; /* Use flexbox to align items */
     justify-content: space-between; /* Space items between the corners */
     align-items: center; /* Center items vertically */
     margin-top: 10px;
 }
 .sortbyname{
     width:21%;
     height: 50px;
 }
 .bottom-div{
    width: 30%;
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* Responsive columns */
      font-size: 13px;
     grid-template-rows: repeat(5,400px);
     column-gap: 20px; /* Horizontal gap between columns */
     row-gap: 40px; /* Vertical gap between rows */
     /* border: 1PX solid black; */
 }
 .productdiv{
     /* border: 1px solid rgb(201, 24, 24); */
     margin-top: 20px;
    
     }
     .productname{
         font-size: 17px;
             font-family: Futura,sans-serif;
             color:#636060;
             letter-spacing: .025em;
             line-height: 1.6;
             text-align: center;
             font-weight: 400;
             margin-bottom: -6%;
             margin-top: -0.5%;
             text-transform: uppercase;
     }
     .price-det{
         /* margin: 1px 0; */
         font-size: 17px;
     }
     .iteimg{
        /* border: 1px solid black; */
        height: 80%;
        overflow: hidden;
       
    }
    .iteimg img {
                width: 100% ;
                height: 100%; 
            }
            #form{
                display: grid;
                align-items: center;
                justify-content: center;
                margin-top: 1%;
            }
            .formlabel{
                font-size: 15px;
                font-weight: lighter;
                font-family: Futura,sans-serif;
                    color: #555454; /* Placeholder text color */
                    letter-spacing: 0.5px;
                    margin-top: 5%;
               
            }
            #forminput1,#forminput2,#forminput3, #forminput4{
                width: 500px;
                margin-top: 2%;
                height: 35px;
            }
            .formcheckbox{
                width:100px;
                margin-top:9% ;
                height: 15px;
            }
            .formspan{
                margin-top: -4%;
                font-size: 18PX;
                margin-left: 15%;
                letter-spacing: 0.5px;
        
            }
            #submit{
                background-color: black;
                color: white;
                height: 50px;
                margin-top: 5.5%;
                font-weight: bold;
                font-size: 15px;
                letter-spacing: 1px;
                width: 90%;
                margin-left: 5%;
            }
            .frmsp{
                position: relative;
                left: 190px;
                letter-spacing: 0.5px;
              font-size: 14px;
              color: rgb(7, 7, 7);
            }
            .labelan{
                text-decoration: none;
                font-size: 20px;
                display: grid;
                text-align: center;
                margin-top: 5%;
                color: black;
            }
            .imgicon{
                position: fixed; 
                    left: 28%;
            }
            .text-container {
                    display: flex;
                    flex-direction: row;
                    gap: 40px;
            }
            .text-box {
                display: flex;
                flex-direction: column;
            }
            .heading {
                    font-weight: bold;
                    font-size: 15px; 
                    margin-bottom: 10px; /* Space between heading and list */
                    letter-spacing: 0.2em;
        
                }
                .list {
                    list-style-type: none; 
                    padding: 0;
                    margin-top: 20px;
        
                }
                .list li {
                    margin-bottom: 18px;
                    font-family: Futura,sans-serif;
                    /* letter-spacing: 0.2em;  */
                    font-size: 13px;
                    font-weight: lighter;
                }
                .container {
                    display: flex;
                    align-items: flex-start;
                    gap: 130px;
                    position: fixed; 
                    left: 45%;
        
                }
                .list a {
                    text-decoration: none; /* Remove underline from links */
                    color: inherit; /* Inherit text color from parent */
                    display: block; /* Make the anchor tag behave like a block element for easier styling */
                }
                .list a:hover {
                    text-decoration: underline; /* Add underline on hover */
                }
                                 
                  /* Cart container styles */
                    #cart-container {
                        display: none;
                        position: fixed;
                        top: 0;
                        right: 0;
                        width: 29%;
                        height: 100%;
                        background-color: white;
                      /* border: 1px solid black; */
                        z-index: 1000;
                        /* padding-left:  5px; */
                      }
                      
                    
                  
                  
                  /* Show cart container */
                  #cart-container.show {
                    display: block; /* Make it visible */
                    /* transform: translateX(0); Slide it into view */
                  } 
                  
                  #curtain-overlay {
                    display: none; /* Hidden by default */
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 71%;
                    height: 100%;
    background-color: rgba(220, 213, 213, 0.5); /* Semi-transparent background */

        z-index: 1000; /* Ensure it covers the entire page but is below the cart container */
         transition: opacity 0.3s ease; /* Smooth fade-in effect */
          opacity: 0; 
                }
                
                /* Show curtain overlay */
                #curtain-overlay.show {
                    display: block; /* Make it visible */
                    opacity: 1; /* Fully visible */
                }
                .cart-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  /* margin-top: -1%; */
                  margin-left: 2%;
                }
        
                .cart-item-image img {
                    width: 100px; /* Adjust size as needed */
                    margin-right: 30px;
                    height: 120px;
                    /* border: 1px solid black; */
                }
                .item-info {
        color:  rgb(100, 100, 99);
        font-size: 13.6px ;
        line-height: 1.3;
        margin-left: -20px;
                }
                 .quantity-controls {

                display: flex;
                align-items: center;
                margin-top: 10px; /* Space between item name and quantity controls */
            }
            
                .quantity-button {
                    width: 35px; /* Width of the buttons */
                    height: 35px; /* Height of the buttons */
                    font-size: 20px; /* Font size of the button text */
                    /* text-align: center; Center text in button */
                    border: 1px solid #ccc; /* Border around buttons */
                    cursor: pointer; /* Pointer cursor on hover */
                    background-color: #f5f5f5; /* Background color */
                }
                
                .quantity-number {
                    width: 35px; /* Width of the number display */
                    height: 35px; /* Height of the number display */
                    font-size: 23px; /* Font size of the number */
                    text-align: center; /* Center text in number display */
                    border: 1px solid #ccc; /* Border around number display */
                }
                .price-details {
                    margin-left: 20px;
                    font-size: 10px;
                }
                #threediv{
                    display: flex;
                width: 100%;
                margin-top: 3.5%;
                /* height: 100vh; } */
                }
                .div10 {
                width: 10%;
                display: flex;
                flex-direction: column;
                align-items: center; /* Center images horizontally */
                justify-content: space-around; /* Space out images vertically */
                padding: 10px;
                box-sizing: border-box;
            }
            .div50 {
                width: 55%;
                display: flex;
                align-items: center; /* Center image vertically */
                justify-content: center; /* Center image horizontally */
                padding: 10px;
                box-sizing: border-box;
            }
            
            .div40 {
                width: 35%;
                display: flex;
                /* align-items: center; Center image vertically */
                /* justify-content: center; Center image horizontally */
                /* padding: 10px; */
                box-sizing: border-box;
                /* border: 1px solid black; */
                text-align: left;
                flex-direction: column;
            
            }
             img {
                max-width: 100%;
                cursor: pointer; /* Makes it clear that images are clickable */
                border: 2px solid transparent; /* Default border, invisible */
                transition: border 0.3s ease; /* Smooth transition for border */
            }
            
            /* Style for the targeted image */
            :target {
                border: 2px solid black; 
                }
            .div50 img {
                height: 700px;
                margin-top: -25%;
            }
            
            .div10 img {
                height: 180px;
                 /* Adjust as needed */
            }
            .labe{
                font-size: 13.6px;
                font-family: Futura,sans-serif;
                letter-spacing: .025em;
                line-height: 1.6;
                text-decoration: none;
                /* margin-top: -200%; */
                text-transform: uppercase;
                color: black;
                /* position: relative; */
            }
            .hompg{
                font-weight: lighter;
                font-size: 11px;
                font-family: Futura,sans-serif;
                letter-spacing: .025em;
                /* line-height: 1.6; */
                text-decoration: none;
                margin-top: -5%;
                text-transform: uppercase;
                color: rgb(96, 95, 95);
                margin-bottom: -3%;
            
            }
            .nme{
                font-size: 29px;
                text-transform: uppercase;
                /* font-family: Futura,sans-serif; */
                letter-spacing: .0em;
                font-weight: 400;
                margin-bottom: -0.5%;
                font-family: Tiemann,serif;
                line-height: 1.3; /* Optional: Adjust line height for better spacing */
            
                
            }
                
             .med{
                text-align: center;
                font-size: 18px;
                width: 100px;
                background-color: white;
                height: 40px;
                color: rgb(107, 104, 104);
                margin-top: 5%;
             }
            .cirimg{
                border: 2px solid black;
                border-radius: 100px;
                height: 40px;
                width: 40px;
                margin-top: 5%;
                overflow: hidden;
                padding: 1%;
            }
            .cirimg img{
                width: 100%;
                height: 100%;
            }
            .detcart{
                height: 50px;
                background-color: black;
                color: white;
                margin-top: 5%;
                font-size: 18px;
            }
            .sh{
                color: red;
                font-weight: 400;
                margin-top: 6%;
            }
            .pgwhis{
                /* border: 1px solid black; */
                height: 21px;
                text-align: left;
                width: 55%;
                margin-left: 25%;
                display: flex;
                align-items: center;
                font-weight: bold;
            }
            .pgwhis img{
                height: 100%;
                margin-right: 10px;
                
            }
            .pgpar{
                font-size: 17px;
                font-weight: 400;
                font-family: Futura,sans-serif;
                letter-spacing: .025em;
                line-height :1.6;
            }
            .shicon{
                /* border: 1px solid black; */
                height: 30px;
                width: 60%;
                display: flex;
                align-items: center;
                font-weight: bold;
                font-size: 20px;
                margin-top: 1%;
                font-family: 'Arial', sans-serif; /* Choose a font that has more extended characters */
               
            
            
            } 
            .shicon img{
                height: 90%;
                margin-left: 3%;
                
            }
            .cav{
                display: grid;
                 grid-template-columns: repeat(5, 1fr); /* Responsive columns */
                  font-size: 13px;
                 column-gap: 20px; /* Horizontal gap between columns */
                 margin-left: 1%;
                /* color: rgb(248, 72, 72); */
                 
               }
               .prevButton,.nextButton{
                position: absolute;
                top: 225%;
                transform: translateY(-50%);
                padding: 10px;
                font-size: 20px;
                background-color: #333;
                color: #fff;
                border: none;
                cursor: pointer;
            }
            .backtopg{
                display: flex;
                justify-content: center; /* Centers horizontally */
                align-items: center; /* Centers vertically */
                margin-top: 10%;
            
            }
            .backtopg img{
                height: 50%;
                width: 15%;
                margin-right: 4%;
                color: #fff;
                background-color: #fff;
                
            }
            .backtopg button{
             height: 55px;
              width: 350px; 
                font-size: 13.6Px;
                letter-spacing: .025em;
                background-color: #181717;
                color: white;
                display: flex;
                 justify-content: center;
                align-items: center;
                border: none; /* Optional: removes default border */
                border-radius: 5px; /* Optional: rounded corners */
                cursor: pointer; /* Optional: changes cursor to pointer */
            
            }
            .button-link{
                text-decoration: none;
                display: inline-flex; /* Ensure the link behaves like an inline element but can contain a flex item */
            
            }

            #cart-container {
                display: none; /* Hidden by default */
                flex-direction: column;
                height: 100vh; /* Adjust this if you have a specific height for the cart container */
                max-height: 100vh;
                overflow-y: auto; /* Allows scrolling if the content is too large */
                position: fixed;
                top: 0;
                right: 0;
                width: 29%;
                background-color: rgba(255, 255, 255, 0.9);
                box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
                z-index: 1000;
            }
            
            #cart-container.show {
                display: flex; /* Show the cart when .show class is added */
            }
                                    
            /* .discount{
                font-size: 30px;
                
            } */
            .cart-summary {
                margin-top: auto; /* Pushes the summary to the bottom */
                font-size: 10px;
                color: #838383;
                display: grid;
                grid-template-columns: 1fr auto; /* Ensures the price is aligned to the right */
                align-items: center;
            }
            
            .cart-summary >h2{
                margin-left: 5%;
                grid-column: 1;
                /* margin-top: -1%; */
            }
            .cart-summary >p{
            grid-column: 2; /* Place the <p> in the second column */
                text-align: right; 
                margin: 0; 
                font-size: 18px;
                color: #333;
                /* text-align: center; */
            }
            .checkout{
                width: 100%;
                color: white;
                background-color: #333;
                height: 50px;
                margin-left: 2%;
            }          
            .empty-cart-message {
                display: none; /* Hidden by default */
                text-align: center;
                font-size: 25px;
                color: #333;
                margin-top: 20px;
                width: 100%; /* Ensure it takes full width of its container */
                flex: 1; /* Take up available space if necessary */
                display: flex;
                justify-content: center; /* Horizontally center the message */
                align-items: center; /* Vertically center the message */
            
            }
            .dot{
 
                height: 10px;
                width: 10px;
                border-radius: 100%;
                background-color: #181717;
                border: 2px solid rgb(26, 28, 26);
                margin-left: 1272px;
                margin-top: -1%;
                position: sticky;
                top: 0;
               
                 }