/* Primary */
/* Font */
/* Poppins Font */
.poppins-font {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Inter Font */

.inter-font {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}

/* Roboto Font */

.roboto-font {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings: "width" 100;
}

/* Manrope Font */

.manrope-font{
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Color */
.color-primary {
  color: #3a3a3a;
}

/* Button */
.button-primary {
  background-color: #e02c6d;
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
}

.display-flex {
  display: flex;
}

/* Header Section */
/* Navbar */

nav {
  justify-content: space-between;
}

nav h3 {
  font-size: 1.5rem;
  margin-top: 77px;
}

nav ul {
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  margin-top: 85px;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  font-weight: 600;
}

nav ul i {
  color: #000000;
}

/* Banner Section */
.banner-container {
  margin-top: 50px;
  justify-content: space-between;
  align-items: center;
  gap: 133px;
}

.banner-content1-heading {
  width: 582px;
  height: 133px;
  font-size: 3.25rem;
}

.banner-content1-paragraph {
  width: 505px;
  height: 60.9px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 16px;
}

.banner-content1-button {
  width: 216px;
  border-radius: 44px;
  text-align: center;
  padding: 10px 56px 10px 24px;
  margin-top: 10px;
  border: none;
}

.banner-content1-button i {
  margin-left: 8px;
}

.banner-content2-image1 img {
  width: 475px;
  height: 475px;
  margin-bottom: -50px;
}
.banner-content2-image2 img {
  width: 440px;
  height: 414px;
  margin-top: -400px;
}

/* Logo Section */
.logo-container {
  margin-top: 100px;
}

.logo-content div {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 61px;
}

/* Collection Section */
main {
  margin-top: 100px;
}
.collection-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.collection-content-heading {
  font-size: 1.5rem;
  font-weight: 500;
}
.collection-content-box1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  gap: 30px;
  border-radius: 5px;
}
.collection-content-box1-content {
  width: 329px;
  height: 476px;
  padding: 15px;
  border-radius: 5px;
  text-align: start;
  background-color: rgba(255, 255, 255, 1);
  fill: Solid color rgb(255, 255, 255);
  box-shadow: 0px 0px 40px 0px rgba(162, 134, 134, 0.36);
}
.collection-content-box1 img {
  border-radius: 5px;
}
.collection-content-box1 h3 {
  font-size: 1.5rem;
  font-weight: 500;
  color: rgba(24, 25, 31, 1);
}
.collection-content-box1 p {
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);
  margin-top: -15px;
}
.collection-content-box1-content1-star img {
  width: 16px;
  height: 16px;
}
.collection-content-box1-content1 {
  width: 122px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: -20px;
}
.collection-content-box1-content1-paragraph {
  font-size: 0.9rem;
  font-weight: bold;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
}
.collection-content-box1-content1-star {
  display: flex;
}

.collection-content-box1-content2 p {
  font-size: 0.9rem;
  color: rgba(120, 120, 133, 1);
  margin-top: 0px;
}
.collection-content-extra {
  margin-top: 50px;
  text-align: end;
}
.collection-content-see-more {
  color: #e02c6d;
}
.collection-content-see-more i {
  margin-left: 5px;
}

/* Feature Product Section */
.feature-product-container {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 96px;
}
.feature-product-content h3 {
  font-size: 2.4rem;
  font-weight: bold;
  color: #0a0826;
}
.feature-product-content p {
  margin-top: -30px;
  width: 501px;
  height: 81px;
  font-size: 1rem;
  font-weight: bold;
  color: #6c6c6c;
}
.feature-product-content-button button {
  width: 160px;
  padding-top: 10px;
  padding-left: 24px;
  padding-bottom: 10px;
  font-size: 1rem;
  border: none;
}
.feature-product-content-button button i {
  margin-left: 8px;
  padding-top: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
}

/* Footer */
footer{
  width: all;
  margin-top: 100px;
  background-color: #0a0826;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-content{
  margin: 50px ;
  color: #FFFFFF;
  text-align: center;
}

.footer-content h3{
  font-size: 1.5rem;
  font-weight: bold;
}

.footer-content p{
  font-size: 0.9rem;
}

.footer-content ul{
  display: flex;
  gap: 16px;
}
.footer-content ul li img{
   width: 32px;
  height: 32px;
}
.footer-content ul{
  padding-left: 50px;
}


/* Media Query */


/* Medium Size Device */
@media screen and (min-width: 576px) and (max-width: 992px) {
  /* nav{
    width: ;
  } */
  /* Banner Section */
  .banner-container,
  .feature-product-container
   {
    flex-direction: column-reverse;
  }

  .banner-content1 {
    margin-top: -120px;
  }

  /* Logo Section */
  .logo-container {
    margin-top: 50px;
  }
  .logo-content div {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
  .logo-content div img {
    width: 100%;
    height: 100%;
  }

  /* Collection Section */
  .collection-content-box1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
   /* Footer */
  footer{
    width: 100%;
    margin-top: 50px;
  }
}


/* Small Size Device */
@media screen and (max-width: 576px) {
  nav,
  nav ul 
  {
    flex-direction: column;
  }

  /* Navbar Section */
  nav {
    align-items: center;
  }
  nav ul {
    gap: 30px;
    margin-top: 30px;
  }

  /* Banner Section */
  .banner-container,
  .feature-product-container
   {
    margin-top: 100px;
    flex-direction: column-reverse;
    align-items: center;
    margin-top: 50px;
  }
  .banner-content2-image1 img {
    width: 100%;
    height: 100%;
  }
  .banner-content2-image2 img {
    width: 90%;
    height: 90%;
  }
  .banner-content1 {
    text-align: center;
    margin-top: -150px;
  }
  .banner-content1-heading {
    width: auto;
    margin-bottom: 130px;
  }
  .banner-content1-paragraph {
    width: auto;
  }
  .banner-content1-button {
    margin-top: 40px;
  }

  /* Logo Section */
  .logo-container {
    margin-top: 50px;
  }
  .logo-content div {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
  }
  .logo-content div img {
    width: 100%;
    height: 100%;
  }

  /* Collection Section */
  .collection-container {
    margin-top: 50px;
  }
  .collection-content-box1 {
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
  }

  /* Feature Products Section */
  .feature-product-content{
    text-align: center;
  }
  .feature-product-content h3{
    width: auto;
  }
  .feature-product-content p{
    width: auto;
  }
  .feature-product-content-button{
    margin-top: 50px;
  }
  .feature-product-container img{
    width: 90%;
    margin-top: -50px;
  }

  /* Footer */
  footer{
    width: 100%;
    margin-top: 50px;
  }
}
