::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: hsl(26deg, 100%, 55%);
  border-radius: 10px;
  border: 1px solid #EDE1D7;
}
::-webkit-scrollbar-thumb:hover {
  background: #db6104;
}

@supports (scrollbar-color: red blue) {
  * {
    scrollbar-color: #EDE1D7 hsl(26deg, 100%, 55%);
    scrollbar-width: thin;
  }
}
* {
  font-family: "Kumbh Sans", sans-serif;
}

body, .cart-parent, .cart_content {
  scroll-behavior: smooth;
}

.container {
  padding: 0;
}
@media screen and (min-width: 576px) and (max-width: 760px) {
  .container {
    max-width: 640px;
  }
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: hsl(0deg, 0%, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

#load-logo > path:nth-child(2) {
  stroke-dasharray: 219.5168151855;
  stroke-dashoffset: 219.5168151855;
  animation: loading 2s ease-in infinite forwards;
}

#load-logo > path:nth-child(3) {
  stroke-dasharray: 268.6590881348;
  stroke-dashoffset: 268.6590881348;
  animation: loading 2s 300ms ease-in infinite forwards;
}

#load-logo > path:nth-child(4) {
  stroke-dasharray: 206.2070159912;
  stroke-dashoffset: 206.2070159912;
  animation: loading 2s 600ms ease-in infinite forwards;
}

#load-logo > path:nth-child(5) {
  stroke-dasharray: 217.9075927734;
  stroke-dashoffset: 217.9075927734;
  animation: loading 2s 900ms ease-in infinite forwards;
}

#load-logo > path:nth-child(6) {
  stroke-dasharray: 227.712097168;
  stroke-dashoffset: 227.712097168;
  animation: loading 2s 1200ms ease-in infinite forwards;
}

#load-logo > path:nth-child(7) {
  stroke-dasharray: 206.2099914551;
  stroke-dashoffset: 206.2099914551;
  animation: loading 2s 1500ms ease-in infinite forwards;
}

#load-logo > path:nth-child(8) {
  stroke-dasharray: 244.0299072266;
  stroke-dashoffset: 244.0299072266;
  animation: loading 2s 1800ms ease-in infinite forwards;
}

#load-logo > path:nth-child(9) {
  stroke-dasharray: 219.5178070068;
  stroke-dashoffset: 219.5178070068;
  animation: loading 2s 2100ms ease-in infinite forwards;
}

.loader.loaded {
  animation: fadeOut 1s forwards;
}

header {
  position: relative;
  padding: 2em 0;
  border-bottom: 1px solid #eee;
}
@media screen and (max-width: 800px) {
  header {
    padding: 1.5em 0;
  }
}
@media screen and (max-width: 650px) {
  header {
    border-bottom: none;
    padding: 0.5em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.hidden {
  visibility: hidden;
}

header nav {
  display: flex;
}
@media screen and (max-width: 650px) {
  header nav {
    justify-content: space-between;
    width: 90%;
  }
}

div.hamburger {
  display: none;
}
@media screen and (max-width: 650px) {
  div.hamburger {
    display: inline-block;
    cursor: pointer;
    margin-top: 2px;
    width: 5%;
  }
}
div.hamburger img {
  width: 100%;
}

div.logo {
  line-height: 2.5em;
}
@media screen and (max-width: 800px) {
  div.logo {
    width: 17%;
  }
}
@media screen and (max-width: 650px) {
  div.logo {
    width: 40%;
  }
}
div.logo img {
  width: 100%;
}

div.navLinks {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 650px) {
  div.navLinks {
    display: none;
  }
}
div.navLinks ul {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 800px) {
  div.navLinks ul {
    margin: 7px;
  }
}
div.navLinks ul li {
  list-style-type: none;
  padding: 0 5%;
}
div.navLinks ul li a {
  position: relative;
  text-decoration: none;
  color: hsl(220deg, 14%, 75%);
  font-weight: 500;
  transition: color 0.3s, font-weight 0.2s;
}
@media screen and (max-width: 800px) {
  div.navLinks ul li a {
    font-size: 0.85rem;
  }
}
div.navLinks ul li a:hover {
  font-weight: 900;
  color: rgba(0, 0, 0, 0.7);
}
div.navLinks ul li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  transition: height 0.3s ease-in-out;
  background: hsl(26deg, 100%, 55%);
  top: 4em;
}
@media screen and (max-width: 800px) {
  div.navLinks ul li a::before {
    top: 3.4em;
  }
}
div.navLinks ul li a:hover::before {
  height: 4px;
}

.mobile-menu-parent {
  display: none;
}
@media screen and (max-width: 650px) {
  .mobile-menu-parent {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 15;
    width: 100%;
    height: 100vh;
  }
}

.mobile-menu {
  background-color: hsl(0deg, 0%, 100%);
  width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.slide-in {
  animation: slide-in 500ms 100ms ease-in-out forwards;
}

.slide-out {
  animation: slide-out 500ms ease-in-out forwards;
}

.mobileNavLinks {
  margin-block: 2em;
}
.mobileNavLinks ul {
  list-style-type: none;
  padding-left: 0;
}
.mobileNavLinks li {
  margin-block: 1em;
}
.mobileNavLinks a {
  text-decoration: none;
  text-transform: capitalize;
  color: hsl(220deg, 13%, 13%);
  font-weight: bolder;
  transition: color 200ms;
  padding-block: 0.5em;
  position: relative;
}
.mobileNavLinks a::before {
  content: "";
  position: absolute;
  height: 6%;
  bottom: 0;
  background-color: hsl(26deg, 100%, 55%);
  transition: all 400ms;
  left: 50%;
  right: 50%;
}
.mobileNavLinks a:hover::before {
  left: 0;
  right: 0;
}

.mobileActive::before {
  width: 100% !important;
  left: 0 !important;
}

div.cartProfile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 800px) {
  div.cartProfile {
    width: 13%;
  }
}
@media screen and (max-width: 650px) {
  div.cartProfile {
    width: 25%;
  }
}

div.cart {
  width: 20%;
  position: relative;
  cursor: pointer;
}
div.cart svg {
  fill: #69707D;
  cursor: pointer;
  transition: fill 0.2s ease-in;
}
div.cart svg:hover {
  fill: #000;
}

.empty-cart {
  opacity: 0;
  position: absolute;
  background: hsl(26deg, 100%, 55%);
  color: hsl(0deg, 0%, 100%);
  top: -0.5em;
  right: 0.03em;
  padding: 0.7em 0;
  line-height: 0;
  width: 50%;
  border-radius: 30%;
  font-size: 0.7rem;
  text-align: center;
  transition: opacity 400ms linear;
}

.cart-number {
  position: absolute;
  background: hsl(26deg, 100%, 55%);
  color: hsl(0deg, 0%, 100%);
  top: -0.3em;
  right: 0.03em;
  padding: 0.7em 0;
  line-height: 0;
  width: 55%;
  border-radius: 30%;
  font-size: 0.7rem;
  text-align: center;
  opacity: 0;
  transition: all 400ms linear;
}
@media screen and (max-width: 800px) {
  .cart-number {
    top: -0.3em;
    right: -1em;
    width: 80%;
  }
}

div.profile {
  width: 40%;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border 0.3s linear;
  cursor: pointer;
}
@media screen and (max-width: 650px) {
  div.profile {
    width: 42%;
  }
}
div.profile:hover {
  border: 2px solid hsl(26deg, 100%, 55%);
}
div.profile img {
  width: 100%;
  transition: width 0.1s ease-in;
}
div.profile img:hover {
  width: 99%;
}

.back-to-top {
  position: fixed;
  right: 3%;
  bottom: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4%;
  height: 8%;
  transition: transform 200ms linear;
  transform: translateX(350px);
  z-index: 1;
}
@media screen and (max-width: 800px) {
  .back-to-top {
    right: 2%;
  }
}
@media screen and (max-width: 650px) {
  .back-to-top {
    width: 8%;
    right: 2%;
  }
}
.back-to-top:hover svg, .back-to-top:active svg {
  stroke: #eee;
}
.back-to-top:hover #svg-fill {
  fill: #ff7d1a;
}
.back-to-top svg {
  stroke: #ff7d1a;
  transition: stroke 0.2s;
  animation: bounce 0.9s infinite ease-out;
  border-radius: 3px;
}

.active {
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.7) !important;
}

#svg-fill {
  fill: transparent;
  transition: fill 0.2s;
}

.height {
  height: 200%;
}
@media screen and (max-width: 650px) {
  .height {
    height: 500%;
  }
}

.cart-parent {
  width: 30%;
  background: #fff;
  position: absolute;
  top: 90%;
  right: -3%;
  z-index: -10;
  box-shadow: 0 11px 20px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  opacity: 1;
}
@media screen and (max-width: 1200px) {
  .cart-parent {
    width: 35%;
    right: -2vw;
  }
}
@media screen and (max-width: 800px) {
  .cart-parent {
    width: 40%;
  }
}
@media screen and (max-width: 650px) {
  .cart-parent {
    width: 95%;
    right: 0;
    top: 110%;
    left: 2.5%;
  }
}
.cart-parent p.cart-text {
  text-transform: capitalize;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  padding: 0.5em 1em 1em;
  font-weight: 900;
}
@media screen and (max-width: 800px) {
  .cart-parent p.cart-text {
    font-size: 0.9rem;
  }
}
.cart-parent p.empty-cart-text {
  width: 70%;
  margin: 20% auto;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
}
@media screen and (max-width: 800px) {
  .cart-parent p.empty-cart-text {
    font-size: 0.8rem;
  }
}

.close-cart {
  animation: scale-out 400ms ease-in-out;
  transform-origin: top right;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

.open-cart {
  animation: scale-in 400ms ease-in-out;
  transform-origin: top right;
  z-index: 10;
}

.cart-content-checkout-btn {
  display: none;
  padding: 0 0 0.5em 0;
}

.cart_content {
  max-height: 250px;
  overflow-y: scroll;
}

.cart-product {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  align-items: center;
}

.cart-product-image {
  width: 14%;
  overflow: hidden;
  border-radius: 8px;
  height: 48px;
}
@media screen and (max-width: 1200px) {
  .cart-product-image {
    width: 15%;
    height: 47px;
  }
}
@media screen and (max-width: 800px) {
  .cart-product-image {
    width: 13%;
    border-radius: 5px;
    height: 35px;
  }
}
@media screen and (max-width: 650px) {
  .cart-product-image {
    width: 13%;
    height: 48px;
  }
}
.cart-product-image img {
  width: 100%;
  height: 100%;
}

.cart-product-details {
  width: 70%;
}
.cart-product-details p {
  padding: 0;
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 0;
  margin: 0;
}
@media screen and (max-width: 800px) {
  .cart-product-details p {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 650px) {
  .cart-product-details p {
    font-size: 0.9rem;
  }
}
.cart-product-details span {
  font-size: 0.8rem;
}
@media screen and (max-width: 800px) {
  .cart-product-details span {
    font-size: 0.7rem;
  }
}
@media screen and (max-width: 650px) {
  .cart-product-details span {
    font-size: 0.8rem;
  }
}

.reviewed-price {
  font-weight: 900;
  font-size: 1.1rem;
}

.delete-btn {
  width: 5%;
  cursor: pointer;
}
@media screen and (max-width: 650px) {
  .delete-btn {
    width: 4%;
  }
}
.delete-btn img {
  width: 100%;
}

.checkout-btn {
  width: 90%;
  margin: 0.5em auto;
}
@media screen and (max-width: 800px) {
  .checkout-btn {
    width: 95%;
  }
}
.checkout-btn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
}
@media screen and (max-width: 800px) {
  .checkout-btn button {
    padding: 1em 1.3em;
    font-size: 0.8rem;
    justify-content: space-around;
  }
}
@media screen and (max-width: 650px) {
  .checkout-btn button {
    padding: 1em 10em;
  }
}
@media screen and (max-width: 400px) {
  .checkout-btn button {
    padding: 1em 7.5em;
  }
}
@media screen and (max-width: 325px) {
  .checkout-btn button {
    padding: 1em 5.5em;
  }
}
.checkout-btn button:hover {
  opacity: 0.6;
}
.checkout-btn button svg {
  width: 23%;
  fill: hsl(0deg, 0%, 100%);
}
@media screen and (max-width: 650px) {
  .checkout-btn button svg {
    width: 30%;
  }
}
@media screen and (max-width: 325px) {
  .checkout-btn button svg {
    width: 15%;
  }
}

.button {
  position: relative;
  overflow: hidden;
}

.button span {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  animation: animate 1s linear infinite;
  z-index: -999;
}

.added {
  position: fixed;
  background: green;
  color: hsl(0deg, 0%, 100%);
  width: 30%;
  left: 40%;
  bottom: 7%;
  z-index: 1;
  text-align: center;
  padding: 0.5em;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 350ms;
}
@media screen and (max-width: 650px) {
  .added {
    width: 50%;
    left: 25%;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-2px);
  }
}
@keyframes blurred-in {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: rotateX(60deg) scale(2);
  }
  100% {
    transform: rotateX(0deg) scale(1);
    opacity: 1;
  }
}
@keyframes scale-out {
  0% {
    transform: rotateX(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: rotateX(60deg) scale(2);
    filter: blur(10px);
  }
}
@keyframes slide-in {
  from {
    width: 0;
    padding: 0;
  }
  to {
    width: 70%;
    padding: 1em;
  }
}
@keyframes slide-out {
  to {
    width: 0;
    padding: 0;
  }
  from {
    width: 70%;
    padding: 1em;
  }
}
@keyframes transitionIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes loading {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animate {
  from {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  to {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}
.product-collection {
  grid-area: product;
  background-image: url("../images/product-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.product-collection > div h2, .product-collection > div p, .product-collection > div span, .product-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.product-collection:hover > div {
  opacity: 1;
}
.product-collection:hover > div h2, .product-collection:hover > div p, .product-collection:hover > div span, .product-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.product-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .product-collection > div {
    height: 67% !important;
  }
}
.product-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .product-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .product-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.product-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .product-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .product-collection > div p {
    font-size: 0.7rem;
  }
}
.product-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .product-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .product-collection > div span {
    font-size: 0.8rem;
  }
}
.product-collection > div a {
  text-decoration: none;
}
.product-collection > div .viewbtn {
  transition-delay: 200ms;
}
.product-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .product-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .product-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .product-collection > div .viewbtn button {
    width: 40%;
  }
}
.product-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .product-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .product-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.nike-collection {
  grid-area: nike;
  background-image: url("../images/nike-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.nike-collection > div h2, .nike-collection > div p, .nike-collection > div span, .nike-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.nike-collection:hover > div {
  opacity: 1;
}
.nike-collection:hover > div h2, .nike-collection:hover > div p, .nike-collection:hover > div span, .nike-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.nike-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .nike-collection > div {
    height: 67% !important;
  }
}
.nike-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .nike-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .nike-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.nike-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .nike-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .nike-collection > div p {
    font-size: 0.7rem;
  }
}
.nike-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .nike-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .nike-collection > div span {
    font-size: 0.8rem;
  }
}
.nike-collection > div a {
  text-decoration: none;
}
.nike-collection > div .viewbtn {
  transition-delay: 200ms;
}
.nike-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .nike-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .nike-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .nike-collection > div .viewbtn button {
    width: 40%;
  }
}
.nike-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .nike-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .nike-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.addidas-collection {
  grid-area: addidas;
  background-image: url("../images/addidas-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.addidas-collection > div h2, .addidas-collection > div p, .addidas-collection > div span, .addidas-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.addidas-collection:hover > div {
  opacity: 1;
}
.addidas-collection:hover > div h2, .addidas-collection:hover > div p, .addidas-collection:hover > div span, .addidas-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.addidas-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .addidas-collection > div {
    height: 67% !important;
  }
}
.addidas-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .addidas-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .addidas-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.addidas-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .addidas-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .addidas-collection > div p {
    font-size: 0.7rem;
  }
}
.addidas-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .addidas-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .addidas-collection > div span {
    font-size: 0.8rem;
  }
}
.addidas-collection > div a {
  text-decoration: none;
}
.addidas-collection > div .viewbtn {
  transition-delay: 200ms;
}
.addidas-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .addidas-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .addidas-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .addidas-collection > div .viewbtn button {
    width: 40%;
  }
}
.addidas-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .addidas-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .addidas-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.puma-collection {
  grid-area: puma;
  background-image: url("../images/puma-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.puma-collection > div h2, .puma-collection > div p, .puma-collection > div span, .puma-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.puma-collection:hover > div {
  opacity: 1;
}
.puma-collection:hover > div h2, .puma-collection:hover > div p, .puma-collection:hover > div span, .puma-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.puma-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .puma-collection > div {
    height: 67% !important;
  }
}
.puma-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .puma-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .puma-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.puma-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .puma-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .puma-collection > div p {
    font-size: 0.7rem;
  }
}
.puma-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .puma-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .puma-collection > div span {
    font-size: 0.8rem;
  }
}
.puma-collection > div a {
  text-decoration: none;
}
.puma-collection > div .viewbtn {
  transition-delay: 200ms;
}
.puma-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .puma-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .puma-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .puma-collection > div .viewbtn button {
    width: 40%;
  }
}
.puma-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .puma-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .puma-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.newbalance-collection {
  grid-area: newbalance;
  background-image: url("../images/newbalance-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.newbalance-collection > div h2, .newbalance-collection > div p, .newbalance-collection > div span, .newbalance-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.newbalance-collection:hover > div {
  opacity: 1;
}
.newbalance-collection:hover > div h2, .newbalance-collection:hover > div p, .newbalance-collection:hover > div span, .newbalance-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.newbalance-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .newbalance-collection > div {
    height: 67% !important;
  }
}
.newbalance-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.newbalance-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div p {
    font-size: 0.7rem;
  }
}
.newbalance-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div span {
    font-size: 0.8rem;
  }
}
.newbalance-collection > div a {
  text-decoration: none;
}
.newbalance-collection > div .viewbtn {
  transition-delay: 200ms;
}
.newbalance-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .newbalance-collection > div .viewbtn button {
    width: 40%;
  }
}
.newbalance-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .newbalance-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.vans-collection {
  grid-area: vans;
  background-image: url("../images/vans-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.vans-collection > div h2, .vans-collection > div p, .vans-collection > div span, .vans-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.vans-collection:hover > div {
  opacity: 1;
}
.vans-collection:hover > div h2, .vans-collection:hover > div p, .vans-collection:hover > div span, .vans-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.vans-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .vans-collection > div {
    height: 67% !important;
  }
}
.vans-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .vans-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .vans-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.vans-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .vans-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .vans-collection > div p {
    font-size: 0.7rem;
  }
}
.vans-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .vans-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .vans-collection > div span {
    font-size: 0.8rem;
  }
}
.vans-collection > div a {
  text-decoration: none;
}
.vans-collection > div .viewbtn {
  transition-delay: 200ms;
}
.vans-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .vans-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .vans-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .vans-collection > div .viewbtn button {
    width: 40%;
  }
}
.vans-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .vans-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .vans-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.alexander-collection {
  grid-area: alexander;
  background-image: url("../images/alexander-women-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.alexander-collection > div h2, .alexander-collection > div p, .alexander-collection > div span, .alexander-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.alexander-collection:hover > div {
  opacity: 1;
}
.alexander-collection:hover > div h2, .alexander-collection:hover > div p, .alexander-collection:hover > div span, .alexander-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.alexander-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .alexander-collection > div {
    height: 67% !important;
  }
}
.alexander-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .alexander-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .alexander-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.alexander-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .alexander-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .alexander-collection > div p {
    font-size: 0.7rem;
  }
}
.alexander-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .alexander-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .alexander-collection > div span {
    font-size: 0.8rem;
  }
}
.alexander-collection > div a {
  text-decoration: none;
}
.alexander-collection > div .viewbtn {
  transition-delay: 200ms;
}
.alexander-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .alexander-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .alexander-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .alexander-collection > div .viewbtn button {
    width: 40%;
  }
}
.alexander-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .alexander-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .alexander-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.balenciaga-collection {
  grid-area: balenciaga;
  background-image: url("../images/balenciaga-women-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.balenciaga-collection > div h2, .balenciaga-collection > div p, .balenciaga-collection > div span, .balenciaga-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.balenciaga-collection:hover > div {
  opacity: 1;
}
.balenciaga-collection:hover > div h2, .balenciaga-collection:hover > div p, .balenciaga-collection:hover > div span, .balenciaga-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.balenciaga-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .balenciaga-collection > div {
    height: 67% !important;
  }
}
.balenciaga-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .balenciaga-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .balenciaga-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.balenciaga-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .balenciaga-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .balenciaga-collection > div p {
    font-size: 0.7rem;
  }
}
.balenciaga-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .balenciaga-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .balenciaga-collection > div span {
    font-size: 0.8rem;
  }
}
.balenciaga-collection > div a {
  text-decoration: none;
}
.balenciaga-collection > div .viewbtn {
  transition-delay: 200ms;
}
.balenciaga-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .balenciaga-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .balenciaga-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .balenciaga-collection > div .viewbtn button {
    width: 40%;
  }
}
.balenciaga-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .balenciaga-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .balenciaga-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.off-white-collection {
  grid-area: off-white;
  background-image: url("../images/off-white-women-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.off-white-collection > div h2, .off-white-collection > div p, .off-white-collection > div span, .off-white-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.off-white-collection:hover > div {
  opacity: 1;
}
.off-white-collection:hover > div h2, .off-white-collection:hover > div p, .off-white-collection:hover > div span, .off-white-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.off-white-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .off-white-collection > div {
    height: 67% !important;
  }
}
.off-white-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .off-white-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .off-white-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.off-white-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .off-white-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .off-white-collection > div p {
    font-size: 0.7rem;
  }
}
.off-white-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .off-white-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .off-white-collection > div span {
    font-size: 0.8rem;
  }
}
.off-white-collection > div a {
  text-decoration: none;
}
.off-white-collection > div .viewbtn {
  transition-delay: 200ms;
}
.off-white-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .off-white-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .off-white-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .off-white-collection > div .viewbtn button {
    width: 40%;
  }
}
.off-white-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .off-white-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .off-white-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.veja-collection {
  grid-area: veja;
  background-image: url("../images/veja-women-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.veja-collection > div h2, .veja-collection > div p, .veja-collection > div span, .veja-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.veja-collection:hover > div {
  opacity: 1;
}
.veja-collection:hover > div h2, .veja-collection:hover > div p, .veja-collection:hover > div span, .veja-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.veja-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .veja-collection > div {
    height: 67% !important;
  }
}
.veja-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .veja-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .veja-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.veja-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .veja-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .veja-collection > div p {
    font-size: 0.7rem;
  }
}
.veja-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .veja-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .veja-collection > div span {
    font-size: 0.8rem;
  }
}
.veja-collection > div a {
  text-decoration: none;
}
.veja-collection > div .viewbtn {
  transition-delay: 200ms;
}
.veja-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .veja-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .veja-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .veja-collection > div .viewbtn button {
    width: 40%;
  }
}
.veja-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .veja-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .veja-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.gucci-collection {
  grid-area: gucci;
  background-image: url("../images/gucci-women-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.gucci-collection > div h2, .gucci-collection > div p, .gucci-collection > div span, .gucci-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.gucci-collection:hover > div {
  opacity: 1;
}
.gucci-collection:hover > div h2, .gucci-collection:hover > div p, .gucci-collection:hover > div span, .gucci-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.gucci-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .gucci-collection > div {
    height: 67% !important;
  }
}
.gucci-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .gucci-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .gucci-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.gucci-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .gucci-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .gucci-collection > div p {
    font-size: 0.7rem;
  }
}
.gucci-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .gucci-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .gucci-collection > div span {
    font-size: 0.8rem;
  }
}
.gucci-collection > div a {
  text-decoration: none;
}
.gucci-collection > div .viewbtn {
  transition-delay: 200ms;
}
.gucci-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .gucci-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .gucci-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .gucci-collection > div .viewbtn button {
    width: 40%;
  }
}
.gucci-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .gucci-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .gucci-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.converse-collection {
  grid-area: converse;
  background-image: url("../images/converse-women-product-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
}
.converse-collection > div h2, .converse-collection > div p, .converse-collection > div span, .converse-collection > div .viewbtn {
  transform: translateY(20px) rotateZ(-6deg);
  opacity: 0;
  transition: all 600ms;
  transform-origin: center right;
  pointer-events: none;
}
.converse-collection:hover > div {
  opacity: 1;
}
.converse-collection:hover > div h2, .converse-collection:hover > div p, .converse-collection:hover > div span, .converse-collection:hover > div .viewbtn {
  transform: translateY(0px) rotateZ(0deg);
  opacity: 1;
  pointer-events: visible;
}
.converse-collection > div {
  position: absolute;
  width: 100%;
  background: linear-gradient(transparent, #000 65%);
  padding: 1em;
  opacity: 0;
  transition: all 400ms;
}
@media screen and (max-width: 650px) {
  .converse-collection > div {
    height: 67% !important;
  }
}
.converse-collection > div h2 {
  color: hsl(0deg, 0%, 100%);
  font-size: 2.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0.6em;
}
@media screen and (max-width: 1200px) {
  .converse-collection > div h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .converse-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}
.converse-collection > div p {
  color: hsl(0deg, 0%, 100%);
  width: 90%;
  margin: 0;
  transition-delay: 100ms;
}
@media screen and (max-width: 1200px) {
  .converse-collection > div p {
    width: 100%;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .converse-collection > div p {
    font-size: 0.7rem;
  }
}
.converse-collection > div span {
  color: hsl(0deg, 0%, 100%);
  margin-block: 0.5em;
  display: inline-block;
  transition-delay: 150ms;
}
@media screen and (max-width: 1200px) {
  .converse-collection > div span {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 800px) {
  .converse-collection > div span {
    font-size: 0.8rem;
  }
}
.converse-collection > div a {
  text-decoration: none;
}
.converse-collection > div .viewbtn {
  transition-delay: 200ms;
}
.converse-collection > div .viewbtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsl(26deg, 100%, 55%);
  border: none;
  padding: 1em 2em;
  width: 100%;
  letter-spacing: 0.05em;
  color: hsl(0deg, 0%, 100%);
  font-weight: 800;
  border-radius: 10px;
  transition: all 0.2s linear;
  padding: 0.4em 0.6em;
  width: 45%;
  font-weight: 500;
  border-radius: 5px;
}
@media screen and (max-width: 1200px) {
  .converse-collection > div .viewbtn button {
    width: 51%;
  }
}
@media screen and (max-width: 800px) {
  .converse-collection > div .viewbtn button {
    width: 65%;
    font-size: 0.8em;
  }
}
@media screen and (max-width: 650px) {
  .converse-collection > div .viewbtn button {
    width: 40%;
  }
}
.converse-collection > div .viewbtn button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 800px) {
  .converse-collection > div {
    padding: 0.5em;
  }
}
@media screen and (max-width: 650px) {
  .converse-collection {
    height: 15em;
    margin-block: 1em;
  }
}

.femaleCollection, .collection {
  display: grid;
  gap: 5px;
  padding: 1em 3em;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 800px) {
  .femaleCollection, .collection {
    padding: 1em 1em;
  }
}
@media screen and (max-width: 650px) {
  .femaleCollection, .collection {
    padding: 0 1em;
    display: block;
  }
}

main {
  margin-bottom: 1em;
}

.collection {
  grid-template-areas: "product addidas addidas addidas" "product addidas addidas addidas" "product addidas addidas addidas" "product addidas addidas addidas" "product nike newbalance newbalance" "product nike newbalance newbalance" "product nike newbalance newbalance" "product nike vans vans" "puma nike vans vans" "puma nike vans vans" "puma nike vans vans";
}

.femaleCollection {
  grid-template-areas: "alexander balenciaga balenciaga balenciaga" "alexander balenciaga balenciaga balenciaga" "alexander balenciaga balenciaga balenciaga" "gucci gucci converse converse" "gucci gucci converse converse" "gucci gucci converse converse" "gucci gucci converse converse" "gucci gucci converse converse" "off-white veja converse converse" "off-white veja converse converse" "off-white veja converse converse";
}

.product-collection {
  background-image: url(../images/image-product-2.jpg);
  height: 28em;
}
@media screen and (max-width: 1100px) {
  .product-collection {
    height: 24em;
  }
}
@media screen and (max-width: 800px) {
  .product-collection {
    height: 21em;
  }
}
@media screen and (max-width: 650px) {
  .product-collection {
    height: 15em;
  }
}
.product-collection > div {
  height: 60%;
}
@media screen and (max-width: 1200px) {
  .product-collection > div {
    height: 62%;
  }
}
@media screen and (max-width: 800px) {
  .product-collection > div {
    height: 52%;
  }
}

.nike-collection > div {
  height: 54%;
}
@media screen and (max-width: 1200px) {
  .nike-collection > div {
    height: 58%;
    padding: 1em 0.5em;
  }
}
@media screen and (max-width: 800px) {
  .nike-collection > div {
    height: 54%;
  }
}

.addidas-collection {
  background-position: 50% 40%;
}
@media screen and (max-width: 800px) {
  .addidas-collection {
    height: 11em;
  }
}
@media screen and (max-width: 650px) {
  .addidas-collection {
    height: 15em;
  }
}
.addidas-collection > div {
  height: 100%;
}
@media screen and (max-width: 1200px) {
  .addidas-collection > div {
    padding: 0.5em 1em;
  }
}
@media screen and (max-width: 800px) {
  .addidas-collection > div {
    padding: 0.5em;
    height: 90%;
  }
}
.addidas-collection > div p {
  width: 70%;
}
@media screen and (max-width: 650px) {
  .addidas-collection > div p {
    width: 100%;
  }
}
.addidas-collection > div .viewbtn {
  width: 50%;
}
@media screen and (max-width: 650px) {
  .addidas-collection > div .viewbtn {
    width: 100%;
  }
}

.puma-collection {
  height: 14em;
}
@media screen and (max-width: 1100px) {
  .puma-collection {
    height: 12em;
  }
}
@media screen and (max-width: 800px) {
  .puma-collection {
    height: 10em;
  }
}
@media screen and (max-width: 650px) {
  .puma-collection {
    height: 15em;
  }
}
@media screen and (max-width: 1200px) {
  .puma-collection > div {
    padding: 0.5em;
  }
}
.puma-collection > div h2 {
  margin-bottom: 0.4em;
}
@media screen and (max-width: 1200px) {
  .puma-collection > div h2 {
    margin-bottom: 0.2em;
  }
}

.newbalance-collection {
  background-position: 50% 60%;
}
@media screen and (max-width: 800px) {
  .newbalance-collection {
    height: 9em;
  }
}
@media screen and (max-width: 650px) {
  .newbalance-collection {
    height: 15em;
  }
}
.newbalance-collection > div {
  padding: 0.5em;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div {
    padding: 0.2em;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div {
    padding: 0.3em;
  }
}
.newbalance-collection > div h2 {
  font-size: 1.6rem;
  margin-bottom: 0.2em;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div h2 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div h2 {
    margin-bottom: 0.2em;
  }
}
.newbalance-collection > div p {
  font-size: 0.9rem;
  line-height: 1.5;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div p {
    line-height: 1.4;
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div p {
    font-size: 0.7rem;
  }
}
.newbalance-collection > div span {
  font-size: 0.9rem;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div span {
    margin-block: 0em;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div span {
    margin-block: 0.3em;
  }
}
.newbalance-collection > div .viewbtn button {
  padding: 0.3em 0.6em;
}
@media screen and (max-width: 1200px) {
  .newbalance-collection > div .viewbtn button {
    padding: 0.1em 0.6em;
  }
}
@media screen and (max-width: 800px) {
  .newbalance-collection > div .viewbtn button {
    padding-block: 0.3em;
  }
}

.vans-collection {
  background-position: 50% 30%;
}
.vans-collection > div {
  height: 87%;
}
@media screen and (max-width: 1200px) {
  .vans-collection > div {
    height: 95%;
    padding: 1em 0.5em;
  }
}
@media screen and (max-width: 800px) {
  .vans-collection > div {
    height: 100%;
  }
}
@media screen and (max-width: 800px) {
  .vans-collection > div h2 {
    margin-bottom: 0.2em;
  }
}

h1 {
  margin: 1em;
}
@media screen and (max-width: 800px) {
  h1 {
    margin: 0.5em;
  }
}

.alexander-collection {
  height: 17em;
}
@media screen and (max-width: 1200px) {
  .alexander-collection {
    height: 15em;
  }
}
@media screen and (max-width: 800px) {
  .alexander-collection {
    height: 10em;
  }
}
@media screen and (max-width: 650px) {
  .alexander-collection {
    height: 15em;
  }
}

.balenciaga-collection {
  background-position: 50% 70%;
}
.balenciaga-collection > div p {
  max-width: 80%;
}
.balenciaga-collection > div button {
  width: 25% !important;
}
@media screen and (max-width: 1200px) {
  .balenciaga-collection > div button {
    width: 30% !important;
  }
}
@media screen and (max-width: 650px) {
  .balenciaga-collection > div button {
    width: 40% !important;
  }
}

.gucci-collection {
  height: 20em;
}
@media screen and (max-width: 1200px) {
  .gucci-collection {
    height: 14em;
  }
}
@media screen and (max-width: 800px) {
  .gucci-collection {
    height: 10em;
  }
}
@media screen and (max-width: 650px) {
  .gucci-collection {
    height: 15em;
  }
}
.gucci-collection > div p {
  max-width: 80%;
}
.gucci-collection > div button {
  width: 25% !important;
}
@media screen and (max-width: 1200px) {
  .gucci-collection > div button {
    width: 30% !important;
  }
}
@media screen and (max-width: 650px) {
  .gucci-collection > div button {
    width: 40% !important;
  }
}

.off-white-collection {
  height: 15em;
}
@media screen and (max-width: 1200px) {
  .off-white-collection {
    height: 11em;
  }
}
@media screen and (max-width: 800px) {
  .off-white-collection {
    height: 9em;
  }
}
@media screen and (max-width: 650px) {
  .off-white-collection {
    height: 15em;
  }
}
@media screen and (max-width: 1200px) {
  .off-white-collection > div {
    padding: 0.2em;
  }
}
@media screen and (max-width: 650px) {
  .off-white-collection > div {
    padding: 0.5em;
  }
}
.off-white-collection > div h2 {
  margin-bottom: 0.4em;
}
@media screen and (max-width: 1200px) {
  .off-white-collection > div h2 {
    margin-bottom: 0.1em;
  }
}
@media screen and (max-width: 800px) {
  .off-white-collection > div h2 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 650px) {
  .off-white-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}

@media screen and (max-width: 1200px) {
  .veja-collection > div {
    padding: 0.2em;
  }
}
@media screen and (max-width: 650px) {
  .veja-collection > div {
    padding: 0.5em;
  }
}
.veja-collection > div h2 {
  margin-bottom: 0.4em;
}
@media screen and (max-width: 1200px) {
  .veja-collection > div h2 {
    margin-bottom: 0.1em;
  }
}
@media screen and (max-width: 800px) {
  .veja-collection > div h2 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 650px) {
  .veja-collection > div h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4em;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(20px) rotateZ(-6deg);
    opacity: 0;
  }
  to {
    transform: translateY(0px) rotateZ(0deg);
    opacity: 1;
  }
}

/*# sourceMappingURL=index.css.map */