@import url("https://fonts.cdnfonts.com/css/satoshi");

@font-face {
  font-family: integral;
  src: url(../fonts/Fontspring-DEMO-integralcf-heavy.otf);
}

/* General Reset */
:root {
  --pry-color: #ffffff;
  --sec-color: #f0eeed;
  --text-color: #000000;
  --heading-ff: integral, sans-serif;
  --ff: "Satoshi", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none !important;
  font-family: var(--ff);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
}

.heading-1 {
  font-family: var(--heading-ff);
  font-size: 4rem;
  font-weight: 900;
  color: var(--text-color);
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-padding {
  padding: 120px 0px 0px;
}

.c-shadow {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* HEADER SECTION */
.nav--brand-name,
.footer--brand-name {
  font-family: var(--heading-ff);
  font-weight: 900;
  color: var(--text-color);
}

.nav-link {
  font-weight: bolder;
}

.nav--cart-icon {
  position: relative;
  padding: 2px;
  cursor: pointer;
}

.nav--cart-counter {
  position: absolute;
  top: -5px;
  right: -2px;
  background-color: var(--text-color);
  color: var(--pry-color);
  width: 60%;
  height: 60%;
  border-radius: 100%;
  padding: 2px;
  font-size: small;
  font-weight: 600;
}

main {
  padding-top: 140px;
}

.main--hero-img-container {
  position: relative;
  margin-bottom: 0;
}

.vector-lg {
  position: absolute;
  top: 15%;
  right: 0;
  width: 80px;
}

.img-container {
  background-color: var(--pry-color);
  height: 300px;
  object-fit: contain;
  width: 100%;
  overflow: hidden;
}

.img-fit {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.rating-icon-container {
  height: 30px;
}

.vector-sm {
  position: absolute;
  top: 40%;
  left: 0;
  width: 40px;
}

.c-card {
  border: 2px solid var(--sec-color);
  border-radius: 10px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}

.card--clothing {
  background-image: url(../assets/categories/clothing.jpg);
}

.card--self-care {
  background-image: url(../assets/categories/self-care.jpg);
  background-position: center;
}

.card--electronics {
  background-image: url(../assets/categories/electonics.jpg);
  background-position: center;
  color: var(--pry-color);
}

.card--interior {
  background-image: url(../assets/categories/house-hold.jpg);
}

/* FOOTER SECTION  */

footer .footer--social-links a {
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--text-color);
  border: 3px solid var(--text-color);
  background-color: var(--pry-color);
  margin-right: 8px;
  transition: all 0.4s linear;
}

.footer--social-links a:hover {
  background-color: var(--text-color);
  color: var(--pry-color);
}

footer h5 {
  letter-spacing: 2px;
}
@media (max-width: 600px) {
  .heading-1 {
    font-size: 2rem;
  }
}