styles.css

@font-face {
  font-family: "Gilroy Regular";
  src: url("./Typeface/Gilroy-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Gilroy Bold";
  src: url("./Typeface/Gilroy-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Gilroy Heavy";
  src: url("./Typeface/Gilroy-Heavy.ttf") format("truetype");
}

:root {
  --main-bg-clr: #1a1a1a;
  --main-white-clr: #f8f9fa;
  --main-gold-clr: #b48537;
  --box-shadow: rgba(255, 255, 255, 0.1) 0px 10px 25px;
  --transition: all 0.4s ease-in-out;
  --transition-bezier: transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--main-bg-clr);
}

a {
  all: unset;
  text-decoration: none;
  cursor: pointer;
}

/* Home section */

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.navbar li {
  margin: 2rem;
  font-family: "Gilroy Regular";
  font-size: 1rem;
  color: var(--main-white-clr);
  /* letter-spacing: 0.2rem; */
  list-style: none;
}

.shopping-cart {
  position: absolute;
  height: 1.8rem;
  justify-content: center;
  align-items: center;
  left: 110rem;
  cursor: pointer;
}

.nike-logo {
  position: absolute;
  height: 1.2rem;
  left: 4rem;
}

.main-container {
  display: flex;
  position: relative;
  height: 100vh;
}

.background-effect {
  position: absolute;
  /* height: 100rem; */
  height: 1100px;
  top: -5rem;
  left: 30rem;
  /* width: 1903px; */
  /* margin: 0 auto; */
  /* margin-top: -6rem; */
  z-index: -1;
}

.main-container h1 {
  position: absolute;
  top: 10rem;
  left: 18rem;

  font-family: "Gilroy Heavy";
  font-size: 5rem;

  color: var(--main-white-clr);
}

.main-container h2 {
  position: absolute;
  font-family: "Gilroy Bold";
  font-size: 3.2rem;
  letter-spacing: 0.1rem;
  color: var(--main-white-clr);
  top: 16rem;
  left: 18rem;
}

.nike-shoe {
  position: absolute;
  top: -15rem;
  left: 48rem;
  height: 64rem;
}

.nike-paragraph {
  position: absolute;
  top: 22rem;
  left: 18rem;
  font-family: "Gilroy Regular";
  font-size: 0.9rem;
  color: var(--main-white-clr);
  max-width: 42rem;
}

.order-btn {
  font-family: "Gilroy Bold";
  font-size: 1.2rem;
  position: absolute;
  background: none;
  border: none;
  color: var(--main-white-clr);
  top: 42rem;
  left: 18rem;
  background: var(--main-gold-clr);
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: var(--transition);
}

.order-btn:hover {
  box-shadow: var(--box-shadow);
}

/* Shoes section */

.main-container-2 {
  position: relative;
  top: 10rem;
}

.background-effect-2 {
  position: absolute;
  height: 1100px;
  top: -25rem;
  left: 30rem;
  z-index: -1;
}

.shoe-card-container {
  display: flex;
  flex: 1 1 180px;
  gap: 8rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.shoe-card-container h3 {
  padding: 0.5rem 0.5rem;
  font-family: "Gilroy Bold";
  font-size: 1.4rem;
}

.shoe-card-1 {
  position: relative;
  width: 360px;
  height: 570px;
  background: var(--main-white-clr);
  transition: var(--transition);
}

.shoe-card-1 img {
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.shoe-card-1:hover {
  box-shadow: var(--box-shadow);
}

.shoe-card-2 {
  position: relative;
  top: 0rem;
  width: 360px;
  height: 570px;
  background: var(--main-white-clr);
  transition: var(--transition);
}

.shoe-card-2 img {
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.shoe-card-2:hover {
  box-shadow: var(--box-shadow);
}

.shoe-card-3 {
  position: relative;
  width: 360px;
  height: 570px;
  background: var(--main-white-clr);
  transition: var(--transition);
}
.shoe-card-3 img {
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.shoe-card-3:hover {
  box-shadow: var(--box-shadow);
}

.card-paragraph {
  font-family: "Gilroy Regular";
  font-size: 0.8rem;
  padding: 0.5rem 0.5rem;
}

.shoe-color-box-tan {
  position: relative;
  background: #b48537;
  height: 15px;
  width: 15px;
  left: 0.5rem;
}
.shoe-color-box-white {
  position: relative;
  background: #dee2e6;
  height: 15px;
  width: 15px;
  left: 0.5rem;
}
.shoe-color-box-black {
  position: relative;
  background: #242423;
  height: 15px;
  width: 15px;
  left: 0.5rem;
}

.shoe-price-1{
  font-family: "Gilroy Bold";
  position: absolute;
  top: 32.8rem;
  left: 15rem;
}

.shoe-price-2{
  display: flex;
  font-family: "Gilroy Bold";
  position: relative;
  top: 1.2rem;
  left: 15rem;

}

.shoe-price-3{
  font-family: "Gilroy Bold";
  position: absolute;
  top: 32.8rem;
  left: 15rem;
} 

.cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--main-gold-clr);
  border: none;
  padding: 0.4rem 0.4rem;
  position: relative;
  top: 3rem;
  left: 0.5rem;
  font-family: "Gilroy Regular";
  font-size: 0.9rem;
  color: var(--main-white-clr);
  cursor: pointer;
}

.cart-btn img {
  margin-left: 0.5rem;
}

.btn-2{
  position: relative;
}

.btn-3 {
  position: relative;
  top: 1.5rem;
}

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

.search-bar {
  position: relative;
  font-family: "Gilroy Regular";
  font-size: 0.75rem;
  color: var(--main-white-clr);
  background: none;
  border: none;
  border: 1px solid var(--main-white-clr);
  padding: 0.3rem 0.6rem;
  border-radius: 64px;
  left: 19rem;
}

input:focus {
  outline: 0;
}

.search-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 17rem;
  height: 18px;
  width: 18px;
}

/* Shoppin cart overlay */

.cart-overlay {
  font-family: "Gilroy Bold";
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--main-white-clr);
  width: 380px;
  height: 540px;
  padding: 3.5rem 0.5rem;
  top: 5rem;
  left: 88rem;
  transition: var(--transition-bezier);
  visibility: hidden;
  overflow: hidden;
}




.cart-title {
  position: absolute;
  font-family: "Gilroy Heavy";
  font-size: 1.4rem;
  top: 1rem;
}

.cart-close {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  left: 85%;
  top: 1rem;
}

.cart-total {
  position: absolute;
  top: 27.5rem;
}

.cart-items footer{
  position: relative;
}

.cart-line {
  position: absolute;
  background: var(--main-bg-clr);
  width: 315px;
  height: 4px;
  top: 27rem;
}

.cart-checkout-btn {
  font-family: "Gilroy Bold";
  font-size: 1.2rem;
  padding: 0.5rem 1.2rem;
  color: var(--main-white-clr);
  letter-spacing: 0.1rem;
  background: var(--main-gold-clr);
  border: none;
  position: absolute;
  top: 30rem;
  cursor: pointer;
}

.visible{
  visibility: visible;
}

.cart{
  height: 50%;
}

.cart-items{
position: relative;
 top: -6rem;
 overflow: hidden;
 height: 360px;
}

.cart-item{
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0.5rem;
}

.cart-item-img{
  aspect-ratio: 1/1;
  object-fit: cover;
  height: 25%;
  width: 25%;
}

.cart-item-name{
  display: flex;
  width: 7rem;
  padding-left: 0.5rem;
}

.cart-quantity{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: 3rem;
}

.cart-item-price{
  position: relative;
  top: 3.5rem;
  right: 7rem;
  font-family: "Gilroy Bold";
  font-size: 0.85rem;
  padding-left: 0.5rem;
}

.cart-arrow-up{
  cursor: pointer;
}

.cart-arrow-down{
  cursor: pointer;
}

.red-dot{
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #dc2f02;
  position: relative;
  left: 45rem;
  bottom: 1rem;
  visibility: hidden;
}

.red-dot-shoes{
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #dc2f02;
  position: relative;
  left: 50.4rem;
  bottom: 1rem;
  visibility: hidden;
}

.visibility { 
  visibility: visible;
}

.filtered{
  visibility: hidden;
}

/* footer social media icons */

.icon-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  position: relative;
  margin-top: -45rem;
  margin-left: 111rem;
  max-width: 1.5rem;
}

.icon-container img{
  height: 20px;
  width: 20px;
  margin: 2rem 1rem;
  cursor: pointer;
}

/* Media Queries */

@media screen and (min-width: 300px) and (max-width: 900px){
  .nike-logo{
    left: 2rem;
  }
  .shopping-cart{
    left: 20rem;
  } 
  .main-container h1{
    left: 1rem;
  }
  .main-container h2 {
    left: 1rem;
  }
  .main-container p {
    top: 25rem;
    left: 1rem;
  }

  .nike-shoe{
    height: 75%;
    top: 23rem;
    left: -5rem;
  }
  .order-btn{
    top: 52rem;
    left: 7.5rem;
  }

  .icon-container{
    flex-direction: row;
    margin-top: 18rem;
    margin-left: 1rem;
  }
  .cart-overlay{
    left: 0rem;
  }
    .red-dot{
    left: 2.7rem;

  }
}
@media screen and (min-width: 414px)and (max-width: 900px){
  .nike-logo{
    left: 2rem;
  }
  .shopping-cart{
    left: 27rem;
  } 
  .main-container h1{
    left: 2rem;
  }
  .main-container h2 {
    left: 2rem;
  }
  .main-container p {
    top: 25rem;
    left: 2rem;
  }

  .nike-shoe{
    height: 75%;
    top: 23rem;
    left: -7rem;
  }
  .order-btn{
    top: 59rem;
    left: 7.5rem;
  }

  .icon-container{
    flex-direction: row;
    margin-top: 10rem;
    margin-left: 1rem;
  }
    .cart-overlay{
    left: 1rem;
  }
  .red-dot{
    left: 2.5rem;
  }
}
@media screen and (min-width: 390px)and (max-width: 900px){
  .nike-logo{
    left: 2rem;
  }
  .shopping-cart{
    left: 21rem;
  } 
  .main-container h1{
    left: 2rem;
  }
  .main-container h2 {
    left: 2rem;
  }
  .main-container p {
    top: 25rem;
    left: 2rem;
  }

  .nike-shoe{
    height: 75%;
    top: 23rem;
    left: -7rem;
  }
  .order-btn{
    top: 59rem;
    left: 7.5rem;
  }

  .icon-container{
    flex-direction: row;
    margin-top: 12rem;
    margin-left: 1rem;
  }
      .cart-overlay{
    left: 0.5rem;
  }
  .red-dot{
    left: 3.3rem;
  }
}
@media screen and (min-width: 393px)and (max-width: 900px){
  .nike-logo{
    left: 2rem;
  }
  .shopping-cart{
    left: 21rem;
  } 
  .main-container h1{
    left: 2rem;
  }
  .main-container h2 {
    left: 2rem;
  }
  .main-container p {
    top: 25rem;
    left: 2rem;
  }

  .nike-shoe{
    height: 75%;
    top: 23rem;
    left: -7rem;
  }
  .order-btn{
    top: 59rem;
    left: 7.5rem;
  }

  .icon-container{
    flex-direction: row;
    margin-top: 12rem;
    margin-left: 1rem;
  }
}

@media screen and (min-width: 820px) and (max-width: 1200px){
  .navbar{
    left: 0rem;
  }
  .nike-logo{
    left: 2.5rem;
  }
  .shopping-cart{
    left: 49rem;
  } 
  .main-container h1{
    left: 2rem;
  }
  .main-container h2 {
    left: 2rem;
  }
  .main-container p {
    top: 25rem;
    left: 2rem;
  }

  .nike-shoe{
    height: 80%;
    top: 12rem;
    left: -6rem;
  }
  .order-btn{
    top: 62rem;
    left: 22rem;
  }

  .icon-container{
    flex-direction: row;
    margin-top: -5rem;
    margin-left: 1rem;
  }
      .cart-overlay{
    left: 21rem;
  }
  .red-dot{
    left: 11.8rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 900px){
  .navbar{
    left: 0rem;
  }
  .nike-logo{
    left: 2.5rem;
  }
  .shopping-cart{
    left: 43rem;
  } 
  .main-container h1{
    left: 2rem;
  }
  .main-container h2 {
    left: 2rem;
  }
  .main-container p {
    top: 25rem;
    left: 2rem;
  }

  .nike-shoe{
    height: 80%;
    top: 16rem;
    left: -6rem;
  }
  .order-btn{
    top: 62rem;
    left: 20rem;
  }

  .icon-container{
    flex-direction: row;
    margin-top: 5rem;
    margin-left: 1rem;
  }
  .cart-overlay{
    left: 21rem;
  }
  .red-dot{
    left: 13.5rem;
  }
}