html {
  background-color: black;
}
html::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Myfont1, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@font-face {
  font-family: Myfont1;
  src: url("fonts/GOTHIC.TTF");
}
@font-face {
  font-family: Myfont2;
  src: url("fonts/GOTHICB.TTF");
}

#navbar {
  background-color: white;
  width: min(1920px, 100vw);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  padding: 0px 50px;
}

#title {
  /* border: 1px solid green; */
  width: 200px;
  aspect-ratio: 5/1;
  background-image: url("images/Title\ 500X100\ px.png");
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}

#menubar {
  /* border: 1px solid red; */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.menus {
  /* border: 1px solid blue; */
  display: flex;
  /* padding: 2px; */
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
  font-size: 20px;
  font-weight: 400;
}


.button1 {
  /* border: 1px solid blue; */
  background-color: black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-weight: 400;
}

.hamburger {
  /* border: 1px solid blue; */
  display: none;
  justify-content: center;
  align-items: center;
}

#hero {
  /* border: 1px solid white; */
  width: min(1920px, 100vw);
  aspect-ratio: 2/1;
  margin: auto;
  background-image: url("images/Hero\ 2048X1024px.png");
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.section1{
    background-color: white;
    width: min(1920px, 100vw);
    margin: auto;
    padding: 40px 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 16px;
    text-align: center;
  }

h1 {
    font-size: 25px;
}
.section1 p {
    font-size: 19px;
}

.section2{
    background-color: white;
    /* border: 1px solid black; */
    width: min(1920px, 100vw);
    margin: auto;
    padding: 30px 0px 60px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

.productsearch{
  border: 1px solid black;
  border-radius: 25px;
  width: clamp(100px, 50%, 600px);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchallproducts{
  border: 1px solid black;
  border-radius: 25px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchico{
  /* border: 1px solid black; */
  width: 46px;
  aspect-ratio: 1/1;
  border-radius:calc((100cqh - 4px)/2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.search{
  border: none;
  background-color: rgb(230, 230, 230);
  width: calc(100% - 50px);
  height: calc(100% - 4px);
  border-radius:calc((100cqh - 4px)/2);
  font-size: 16px;
  padding-left: 30px;
}

.button2{
  background-color: rgba(0, 0, 0, 0);
  border: none;
  font-size: 16px;
  padding: 5px 30px;
  cursor: pointer;
}









.section3{
  background-color: whitesmoke;
  width: min(1920px, 100vw);
  margin: auto;
  padding: 50px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;  
}

.carousel{
  /* border: 2px solid black; */
  width: calc(100% - 300px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.collectionA{
  /* border: 2px solid red; */
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  gap: 40px;
  grid-auto-columns: calc((100% / 2) - 20px);  
}

.cardA{
  width: calc(100%);
  aspect-ratio: 3/2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150px;
  color: rgba(0, 0, 0, 0);
  scroll-snap-align: center;
}

#cardA1{
  background-image: url("images/set1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#cardA2{
  background-image: url("images/set2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#cardA3{
  background-image: url("images/set3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardA4{
  background-image: url("images/set4.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#cardA5{
  background-image: url("images/set5.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#cardA6{
  background-image: url("images/set6.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}















.section4{
  background-color: white;
  width: min(1920px, 100vw);
  margin: auto;
  padding: 40px;
  gap: 30px;
  display: flex;
  flex-direction: column;
}

.sec4-head{
  /* border: 1px solid black; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 50px;
}

.sec4-title{
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 10px;
}

h4 {
  color: gray;
  font-family: Myfont1;
}
.sec4-tabs{
  background-color: rgb(230 230 230 / 1);
  /* border: 1px solid black; */
  border-radius: 31px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 6px;
  gap: 12px;
}

.button4{
  border: none;
  background-color: rgb(230 230 230 / 0);
  /* border: 1px solid black; */
  border-radius: 25px;
  height: 50px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}
.button4:hover {
  background-color: rgba(255, 255, 255, 1);
 }

.button4:active, .button4:focus {
  background-color: rgba(255, 255, 255, 1);
 }



.sec4-collection{
  /* border: 1px solid black; */
  width: 100%;
  display: grid;
  padding: 30px;
  grid-template-columns: 1fr  1fr  1fr 1fr;
  gap: 30px;
}

#cardB1{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/3;
  grid-row: 1/3;
  position: relative;
}

#cardB2{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 3/4;
  grid-row: 1/2;
  position: relative;
}

#cardB3{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 4/5;
  grid-row: 1/2;
  position: relative;
}

#cardB4{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 3/4;
  grid-row: 2/3;
  position: relative;
}

#cardB5{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 4/5;
  grid-row: 2/3;
  position: relative;
}

.cardB1-textbox{
  background-color: whitesmoke;
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;

}

.cardB-textbox{
  background-color:  whitesmoke;
  width: 100%;
  height: 25%;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

#cardB1-image{
  width: 100%;
  height: 80%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1A.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardB2-image{
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1B.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardB3-image{
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1C.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%;
}

#cardB4-image{
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1D.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardB5-image{
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1E.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.cardB-title{
  font-size: 20px;
  font-family: Myfont2;
  color: gray;
}

.cardB-price{
  font-size: 18px;
  font-family: Myfont1;
  color: black;
}

.cardB-button{
  border: none;
  background-color: rgb(45, 45, 45);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}


.section5{
  background-color: rgb(247, 247, 247);
  width: min(1920px, 100vw);
  margin: auto;
  padding: 50px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;  
}

.sec5-title{
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.sec5-collection{
  /* border: 1px solid black; */
  width: 100%;
  display: grid;
  padding: 30px;
  grid-template-columns: 1fr  1fr  1fr 1fr;
  gap: 30px;
}

#cardC1{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
}

#cardC1-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  
}

.cardC-textbox{
  background-color: white;
  width: 100%;
  height: 25%;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0px 40px 10px 40px;
}

.cardC-title{
  font-size: 20px;
  font-family: Myfont2;
  color: gray;
}



.cardC-button{
  border: none;
  background-color: rgb(45, 45, 45);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

#cardC2{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 1/2;
  position: relative;
}
#cardC2-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 60%;
}



#cardC3{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 3/4;
  grid-row: 1/2;
  position: relative;
}

#cardC3-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#cardC4{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 4/5;
  grid-row: 1/2;
  position: relative;
}
#cardC4-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C4.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#cardC5{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 2/3;
  position: relative;
}
#cardC5-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C5.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#cardC6{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 2/3;
  position: relative;
}
#cardC6-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C6.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}




#cardC7{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 3/4;
  grid-row: 2/3;
  position: relative;
}
#cardC7-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C7.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 35%; 
}




#cardC8{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 4/5;
  grid-row: 2/3;
  position: relative;
}
#cardC8-image{
  background-color: white;
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C8.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#footer{
  background-color: rgb(120, 120, 120);
  width: min(1920px, 100vw);
  /* height: 420px; */
  margin: auto;
  padding: 60px 80px 40px 80px;
  color: white;
}

#footer-grid{
  /* border: 2px solid red; */
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 3fr 1fr;
  gap: 10px;
}

.footer-item1{
  /* border: 2px solid red; */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

h2{
  font-size: 30px;
}

.footer-item2{
  /* border: 2px solid yellow; */
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0px 0px 0px 30px;
}

.footer-item3{
  /* border: 2px solid yellow; */
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0px 0px 0px 30px;
}

.footer-item4{
  /* border: 2px solid yellow; */
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0px 0px 0px 30px;
}

.input1{
  background-color: black;
  border:  none;
  border-radius: 20px;
  color: white;
  width: 100%;
  height: 50px;
  padding: 0px 0px 0px 30px;
  font-size: 17px;
}
.button5{
  background-color: white;
  border:  none;
  border-radius: 20px;
  color: black;
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-family: Myfont2;
}




.footer-item5{
  /* border: 2px solid yellow; */
  grid-column: 1/5;
  display: flex;
  border-top: 2px solid white;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.logos{
  /* border: 2px solid yellow; */
  width: 500px;
  aspect-ratio: 7/1;
  background-image: url("images/media\ icons.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 60%;

}












@media screen and (max-width: 1600px){

    .section1{
    padding: 40px 200px;
    gap: 30px;
}
.carousel{
  /* border: 2px solid black; */
  width: calc(100% - 200px);
}

.button4{
  width: 250px;
}

@media screen and (max-width: 1400px) {
.cardB-textbox{
  height: 35%;
  gap: 5px;
}
#cardB2-image, #cardB3-image, #cardB4-image, #cardB5-image{
  height: 65%;
}
}


@media screen and (max-width: 1300px) {
.cardB-textbox{
  height: 35%;
  gap: 5px;
}

.cardB-title{
  font-size: 14px;
  font-family: Myfont2;
  color: gray;
}

.cardB-price{
  font-size: 12px;
  font-family: Myfont1;
  color: black;
}

.cardB-button{
  padding: 5px 15px;
  color: white;
  font-size: 12px;
}

#cardB2-image, #cardB3-image, #cardB4-image, #cardB5-image{
  height: 65%;
}
}

@media screen and (max-width: 1300px) {
.button4{
  width: 180px;
}

}



@media screen and (max-width: 1100px) {
  #menubar {
    gap: 30px;
  }
  .menus {
    font-size: 16px;
  }
  .button1 {
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 16px;
  }
  .section1{
    padding: 30px 100px;
    gap: 30px;
}
.carousel{
  /* border: 2px solid black; */
  width: calc(100% - 100px);
}

.button4{
  border: none;
  background-color: rgb(230 230 230 / 0);
  /* border: 1px solid black; */
  border-radius: 25px;
  height: 50px;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;


}







@media screen and (max-width: 900px) {
  #menubar {
    gap: 20px;
  }
  .section1 h1 {
    font-size: 25px;
}
.section1 p {
    font-size: 15px;
}
.button4{
  width: 100px;
}
.cardB-title{
  font-size: 16px;
  font-family: Myfont2;
  color: gray;
}

.cardB-price{
  font-size: 14px;
  font-family: Myfont1;
  color: black;
}

.cardB-button{
  border: none;
  background-color: rgb(45, 45, 45);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 10px;
  font-weight: 400;
  cursor: pointer;
}
.cardB1-textbox p{
  text-align: center;
  font-size: 12px;
}
.cardB1-textbox {

  gap: 5px;
}
}






@media screen and (max-width: 1100px) {
.sec5-collection{
  /* border: 1px solid black; */
  width: 100%;
  display: grid;
  padding: 30px;
  grid-template-columns: 1fr  1fr;
  gap: 20px;
}

#cardC1{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
}

#cardC1-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90%;
  
}



#cardC2{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 1/2;
  position: relative;
}
#cardC2-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 60%;
}



#cardC3{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 2/3;
  position: relative;
}

#cardC3-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#cardC4{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 2/3;
  position: relative;
}
#cardC4-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C4.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#cardC5{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 3/4;
  position: relative;
}
#cardC5-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C5.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}



#cardC6{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 3/4;
  position: relative;
}
#cardC6-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C6.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}




#cardC7{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 4/5;
  position: relative;
}
#cardC7-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C7.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 35%; 
}




#cardC8{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/3.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 4/5;
  position: relative;
}
#cardC8-image{
  background-color: white;
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/card\ C8.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%; 
}

.cardC-textbox{
  background-color: white;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.cardC-title{
  font-size: 18px;
  font-family: Myfont2;
  color: gray;
}



.cardC-button{
  border: none;
  background-color: rgb(45, 45, 45);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}


}




@media screen and (max-width: 850px) {
.carousel{
  width: calc(100% - 100px);
}

.collectionA{
  grid-auto-columns: calc((100%) - 20px);
}
}





@media screen and (max-width: 770px) {
    #navbar {
  padding: 0px 25px;
  }
  #title {
    width: 150px;
  }

  .menus {
    display: none;
  }

  .button1 {
    /* border: 1px solid black; */
    width: 28px;
    height: 28px;
    display: flex;
    background-color: rgba(0, 0, 0, 0);
    font-size: 0px;
    background-image: url("images/login\ 50px.png");
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;    
  }

  .hamburger {
    /* border: 1px solid blue; */
    display: flex;
  }
  .section1{
    padding: 30px 50px;
    gap: 20px;
  }
  h1 {
      font-size: 20px;
  }
  .section1 p {
      font-size: 15px;
  }
  .section2{
    /* background-color: grey; */
    padding: 40px 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

  .productsearch{
  width: 80vw;
  }
  .productsearch{
  width: 80vw;
  }
  .searchallproducts{
  width: 80vw;
  }
  .carousel{
  width: calc(100% - 50px);
  }




  .section4{
  padding: 10px;
}
  .sec4-head{
  flex-direction: column;
  justify-content: center
  align-items: center; 
  padding: 0px 10px;
  gap: 30px;
}

.sec4-title{
  align-items: center;
 }
h1 {
  text-align: center;
  }


 .sec4-tabs{
  border-radius: 18px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 6px;
  gap: 12px;
}

.button4{
  border-radius: 25px;
  height: 28px;
  width: 100px;
  font-size: 14px;
} 
.sec4-collection{
  padding: 10px;
}

.cardC-textbox{
  gap: 5px;
  padding: 10px;
}

.cardC-title{
  font-size: 14px;
  font-family: Myfont2;
  color: gray;
}



.cardC-button{
  border: none;
  background-color: rgb(45, 45, 45);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 10px;
  font-weight: 400;
  cursor: pointer;
}


#footer{
  background-color: rgb(120, 120, 120);
  width: min(1920px, 100vw);
  /* height: 420px; */
  margin: auto;
  padding: 15px;
  color: white;
}

#footer-grid{
  /* border: 2px solid red; */
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 2fr 2fr 2fr 1fr;
  gap: 10px;
}

.footer-item1{
  /* border: 2px solid red; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 1/3;
  grid-row: 1/2;
  padding: 30px 0px 0px 0px;
}

h2{
  font-size: 30px;
}

.footer-item2{
  /* border: 2px solid yellow; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0px 0px 0px 30px;
  grid-column: 1/2;
  grid-row: 2/3;
}

.footer-item3{
  /* border: 2px solid yellow; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0px 0px 0px 30px;
  grid-column: 2/3;
  grid-row: 2/3;
}

.footer-item4{
  /* border: 2px solid yellow; */
  display: flex;
  flex-direction: column;

  gap: 10px;
  padding: 10px;
  grid-column: 1/3;
  grid-row: 3/4;
}

.input1{
  background-color: black;
  border:  none;
  border-radius: 20px;
  color: white;
  width: 100%;
  height: 50px;
  padding: 0px 0px 0px 30px;
  font-size: 17px;
}
.button5{
  background-color: white;
  border:  none;
  border-radius: 20px;
  color: black;
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-family: Myfont2;
}




.footer-item5{
  /* border: 2px solid yellow; */
  grid-column: 1/5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/3;
  grid-row: 4/5;
  gap: 20px;
}

.logos{
  /* border: 2px solid yellow; */
  width: 500px;
  aspect-ratio: 7/1;
  background-image: url("images/media\ icons.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 60%;

}

.caution{
  text-align: center;
}




.sec4-collection{
  /* border: 1px solid black; */
  width: 100%;
  display: grid;
  padding: 5px;
  grid-template-columns: 1fr  1fr;
  gap: 10px;
}

#cardB1{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 1/1.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/3;
  grid-row: 1/3;
  position: relative;
}



#cardB2{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 3/4;
  position: relative;
}

#cardB3{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 3/4;
  position: relative;
}

#cardB4{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 4/5;
  position: relative;
}

#cardB5{
  /* border: 1px solid red; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  aspect-ratio: 3/5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 4/5;
  position: relative;
}

.cardB1-textbox{
  background-color: whitesmoke;
  width: 100%;
  height: 25%;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;

}

.cardB1-textbox p{
  text-align: center;
}
.cardB-textbox{
  background-color:  whitesmoke;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

#cardB1-image{
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1A.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardB2-image{
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1B.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardB3-image{
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1C.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%;
}

#cardB4-image{
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1D.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#cardB5-image{
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0px;
  border-radius: 20px 20px 0px 0px; 
  background-image: url("images/cardB\ 1E.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.cardB-title{
  font-size: 16px;
  font-family: Myfont2;
  color: gray;
}

.cardB-price{
  font-size: 14px;
  font-family: Myfont1;
  color: black;
}

.cardB-button{
  border: none;
  background-color: rgb(45, 45, 45);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  color: white;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}



}