/* ruble part--------------------- */

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Lato', sans-serif;
}


/* banner styling------------------ */
#banner > img {
  width: 100%;
}
.img-slider {
  position: relative;
  width: 100%;
  height: 450px;
}
#logo{
  width: 90%;
  margin-top: 10%;
}
.inputSearch{
  background-color: transparent;
}
.img-slider .slide {
  z-index: 1;
  position: absolute;
  width: 100%;
  clip-path: circle(0% at 0 50%);
}

.img-slider .slide.active {
  clip-path: circle(150% at 0 50%);
  transition: 1.5s;
  transition-property: clip-path;
}

.img-slider .slide img {
  z-index: 1;
  width: 100%;
  height: 450px;
  border-radius: 5px;
}

.img-slider .slide {
  position: absolute;
  top: 0;
}
.img-slider .slide {
  width: 100%;
  border-radius: 4px;
}

.img-slider .navigation {
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.img-slider .navigation .btn {
  background: rgba(255, 255, 255, 0.5);
  width: 16px;
  height: 16px;
  margin: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.img-slider .navigation .btn.active {
  background: #2696e9;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* after banner styling------------------------- */
#after_banner {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 2vh;
  grid-column-gap: 3vh;
}
#after_banner img {
  width: 100%;
  height: 17vh;
  margin: auto;
}
/* #after_banner img:hover{
    zoom:unset;
  } */

/* After six grid item styling---------------------- */
#after-six-item {
  margin: 30px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
#after-six-item img {
  width: 100%;
}
#two_photo_row {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 14px;
}

/* collections styling------------------------ */

#collections {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
#collections img {
  width: 100%;
  border-radius: 5px;
}

/* card image slider--------------- */
.swiper {
  width: 96%;
  /* height: 100%; */
  margin: 20px;
  /* font-size: 70% */
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 50%;
  object-fit: cover;
}
.topbrand {
  /* font-family:Helvetica, Arial, sans-serif; */
  margin-top: 10px;
  margin-left: 10px;
  padding: 10px;
  font-weight: 200;
  /* text-align: center; */
  /* background-color: #2696e9; */
}

/* four_boxes_styling----------- */

#diamod_boxes {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
#diamod_boxes img {
  width: 100%;
}

/* two_boxes at the bottom---------------- */
#two_boxes {
  padding: 15px;
  margin: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  background-color: #f5f5f5;
}
#two_boxes img {
  width: 60%;
  display: block;
  margin: auto;
}
.two_boxes_texts {
  /* font-size: 1.6em; */
  padding: 15px;
  text-align: center;
}
.two_boxes_small_texts {
  padding: 10px;
  font-size: smaller;
  text-align: center;
}
.two_boxes_btn {
  display: block;
  margin: auto;
  padding: 5px 8px;
  border-radius: 5px;
  color: white;
  border: 1px solid white;
  background: linear-gradient(to right, rgb(222, 87, 229), rgb(136, 99, 251));
}
#two_boxes_input {
  display: block;
  margin: auto;
  padding: 5px;
  border: 1px solid slateblue;
  margin-top: 15px;
  border-radius: 3px;
}
/* end of two boxes---------------------- */

#gold_exchange {
  padding: 20px;
  background-color: #f7f0ee;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.gold_texts {
  margin: auto;
}
#gold_exchange img {
  width: 80%;
  display: block;
  margin: auto;
}

/* instagram part-------------------------- */
#bottom_container {
  margin: 20px;
}
#instagram_part {
  display: flex;
}
#first_part_instagram > img {
  width: 40vw;
  height: 100%;
}
#last_part_instagram img {
  width: 100%;
  height: 100%;
}
#last_part_instagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* footer styling start from here------------------------------- */

#footer_top {
  margin: 40px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.small_text {
  font-size: smaller;
  font-weight: 200;
  text-align: justify;
}
.big_text {
  text-align: center;
  font-weight: 200;
}

/* footer contact designing------------------ */
#footer_contact {
  background-color: #f6f4ff;
  width: 100%;
  height: 400px;
}
#footer_inside {
  width: 90vw;
  margin: auto;
  /* background-color: #2696e9; */
  height: 400px;
  padding: 4vw;
}
#first{
  display: grid;
  grid-template-columns: repeat(5,1fr);
}
#first>div>p{
  padding:4px 0px;
  font-size: x-small;
}
#first>div>h4{
  font-weight: 500;
}
.flex_property>i{
 padding: 4px;
}
.link{
  color:  rgb(222, 87, 229);
}
#btn{
  margin-top: 18px;
  padding: 10px;
  border-radius: 10px;
  font-size: x-small;
  border: 1px solid #2696e9;
  margin-bottom: 10px;
}
#btn:hover{
  background: linear-gradient(to right, rgb(222, 87, 229), rgb(136, 99, 251));
  color: white;
}

#second{
display: flex;
justify-content: space-between;
}

#second_payment{
  width: 100px;
  height: 100px;
  /* background-color: red; */

}
#second_icon_small{
display: flex;
}
#second_icon_small>i{
  color: rgb(222, 87, 229);
 margin: 10px;
 font-size: 20px;
 padding: 5px;
 border-radius: 4px;
 border:1px solid #2696e9;
}
.facebook{
font-size: 30px; 
}
/* media query--------------------- */
@media all and (min-width: 600px) and (max-width: 900px) {
  #gold_exchange img {
    width: 60%;
  }
  #gold_exchange {
    grid-template-columns: repeat(1, 1fr);
  }
  #instagram_part {
    display: flex;
    flex-direction: column;
  }
  #first_part_instagram > img {
    width: 100%;
  }
  #last_part_instagram {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (min-width: 300px) and (max-width: 600px) {
  #after_banner {
    grid-template-columns: repeat(2, 1fr);
  }
  #after-six-item {
    margin: 30px 0px;
    grid-template-columns: repeat(1, 1fr);
  }
  #diamod_boxes {
    margin: 0px;
    grid-template-columns: repeat(1, 1fr);
    gap: 7px;
  }
  #two_boxes {
    grid-template-columns: repeat(1, 1fr);
  }
  #two_boxes img {
    width: 100%;
  }
  #gold_exchange img {
    width: 50%;
  }
  #gold_exchange {
    grid-template-columns: repeat(1, 1fr);
  }
  #instagram_part {
    display: flex;
    flex-direction: column;
  }
  #first_part_instagram > img {
    width: 100%;
  }
  #last_part_instagram {
    grid-template-columns: repeat(2, 1fr);
  }
  #footer_top {
    margin: 30px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
  }
  #footer_inside {
    width: 100vw;
    padding: 3vw;
  }
}