body {
  font-family: Lato, sans-serif;
  margin: 0 auto;
  color: black;
  max-width: 1500px;
  min-width: 430px;
}
h1 {
  font-size: 3rem;
  color: black;
}
h2 {
  font-size: 2rem;
  color: black;
}
h1, h2 {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
}
a {
  text-decoration: none;
  color: black;
}
li {
  list-style-type: none;
  width: fit-content;
}
button {
  all: unset;
  margin-top: 2rem;
  margin-bottom: 2rem;
  background-color: gray;
  border: 1px solid gray;
  padding: 0.7rem;
  border-radius: 10px;
  font-weight: 700;
  min-width: 8rem;
  text-align: center;
}
button:hover {
  background-color: #ffffff;
  border: 1px solid black;
}
nav {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-top: 9rem;
}
section .no-hero-image {
  background-image: none;
}
.main-grid {
  display: grid;
  grid-template-columns: 14rem auto;
  background-color: white;
  column-gap: 1rem;
  min-height: 100vh;
}


/* __________SIDE BY SIDE INPUTS_______________*/

#cvv-expiry,
#login,
#new-password {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}


/* __________HERO SECTION_______________*/

.hero-section {
  display: grid;
}
.hero-section img {
  width: 100%;
  grid-column: 1/2;
  grid-row: 1/2;
}
.header-links {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: rgb(255, 255, 255);
  align-self: start;
}
.shopping-cart {
  margin-left: auto;
  margin-right: 1rem;
  margin-top: 2rem;
}
.header-links .main-logo {
  margin-right: auto;
  width: 16rem;
}
.shopping-cart img {
  width: 4rem;
}
.header-links-mobile-container {
  display: none;
}

/* __________ABOUT US_______________*/

.about-us-section {
  margin-top: 8rem;
  font-size: 1.5rem;
  margin-bottom: 5rem;
  margin-left: 2rem;
  margin-right: 2rem;
  text-align: center;
  background-color: white;
  width: fit-content;
  padding: 2rem;
}


/* __________BANNER_______________*/

.new-arrivals-banner {
  background-color: rgba(255, 255, 255, 0.719);
  padding-bottom: 2rem;
  grid-column: 1/2;
  grid-row: 1/2;
  max-height: 23rem;
  margin-top: 28rem;
  z-index: 0;
}
.new-arrivals-banner h2 {
  padding-top: 0.5rem;
  padding-left: 5rem;
  color: black;
}
.banner-images-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-evenly;
  gap: 4rem;
  padding-left: 5rem;
  padding-right: 5rem;
}
.new-arrivals-banner img {
  width: 100%;
  border-radius: 20px;
}


/* __________LOGIN_______________*/

.login-grid img {
  width: 100%;
}
.login-details div {
  display: flex;
  flex-direction: column;
}
.login-details input {
  margin-bottom: 1rem;
}
.login-details button {
  background-color: rgb(120, 120, 120);
  border: 2px solid gray;
  margin-top: 0rem;
}
.login-details button:hover {
  background-color: rgb(150, 150, 150);
  border: 2px solid black;
}
.login-grid {
  
  padding: 2rem 0;
}
.login-text {
  max-width: 30%;
  align-self: center;
  margin: 0 auto;
  padding: 1rem 2rem 0 2rem;
  background-color: lightgray;
  min-width: 370px;
}

/* __________FIREFOX FIX______________*/

@-moz-document url-prefix() {
  .login-text {
   padding-right: 4.5rem;
  }
}


/* __________CONTACT_______________*/

.contact-grid {
  margin-top: 0rem;
  margin-bottom: 1rem;
  margin-left: 1.2rem;
  padding: 0 3rem 3rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contact-grid img {
  max-width: 100%;
}
.contact-text {
  padding: 0 2rem;
  padding-left: 0;
}
.contact-text h2 {
  color: black;
  margin-bottom: .1rem;
}
.contact-main h1 {
  margin-left: 4rem;
  margin-top: 4rem;
}


/* __________ITEM PAGE_______________*/


.shoe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 2rem;
}
.shoe-description {
  padding:0 2rem;
}
.shoe-grid .wishlist-icon {
  margin: 0;
  margin-right: 20px;
  padding: 0;
}
.shoe-grid .wishlist-icon:hover {
  border: none;
  margin-top: 4px;
  margin-right: 24px;
  padding-top: 4px;
  padding-left: 20px;
}
.item-grid {
  margin: 0 3rem;
}
.item-grid h1 {
  margin-top: 4rem;
}
.shoe-grid button {
  justify-self: end;
 margin-top: 0;
}
.shoe-grid .product-image {
  max-width: 100%;
}


/* __________SERVICES_______________*/

.services-grid {
  margin-top: 0rem;
  margin-bottom: 3rem;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.services-text {
  padding: 2rem;
  background-color: rgba(189, 189, 189, 0.458);
  grid-column: 1/2;
  grid-row: 1/2;
}
.services-grid img {
  max-width: 100%;
}
.contact-grid {
  margin-top: orem;
  margin-bottom: 1rem;
  padding: 0 3rem 3rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
}


/* __________WISH LIST_______________*/

.wish-list-main h1 {
  margin-top: 4rem;
  margin-left: 4rem;
}
.wish-list-main .product-gallery-grid {
  margin-top: 3rem;
  margin-bottom: 2rem;
}


/* __________CART_______________*/

.main-cart h1 {
  margin-top: 4rem;
  margin-left: 4rem;
}
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 2rem 4rem;
  gap: 3rem;
}
.cart-container img {
  width: 10rem;
}
.main-cart h2 {
  color: black;
}
.product-in-cart {
  display: flex;
  align-items: flex-start;
  background-color: rgba(169, 169, 169, 0.458);
  margin-bottom: 1rem;
  padding-left: 2rem;
  padding-bottom: 2rem;
}
.in-cart-price {
  margin-left: auto;
  margin-right: 2rem;
  align-self: last baseline;
  font-weight: 800;
}
.cart-total {
  display: flex;
  padding-top: 2rem;
}
.payment-details div {
  display: flex;
  flex-direction: column;
}
.payment-details input {
  margin-bottom: 1rem;
}
.thankyou {
  font-size: 1.7rem;
  margin: 3rem;
  text-align: center;
}
.payment-container label {
  padding-right: .2rem;
  padding-bottom: .2rem;
}


/* __________PRODUCTS_______________*/

.products-main h1{
  margin-left: 4rem;
  margin-top: 4rem;
}
.product-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2rem;
  row-gap: 5rem;
  margin: 5rem 4rem;
}
.product-container {
  display: grid;
  grid-template-columns: 1fr;
}
.product-container h3 {
  font-size: 1.4rem;
  grid-column: 1/2;
  grid-row: 2/3;
  margin: 0;
  align-self: center;
}
.price {
  display: flex;
}
.price h4 {
  margin: 0;
  padding-right: 1rem;
  font-size: 1.2rem;
}
.price p {
  margin: 0;
  align-self: end;
  padding-bottom: 2px;
  font-size: 1.2rem;
}
.product-container p {
  margin-top: 0;
  }
.product-container a:nth-child(2) {
  grid-column: 1/2;
  grid-row: 2/3;
  align-self:center; 
  }
.wishlist-icon {
  grid-column: 1/2;
  grid-row: 2/3;
  align-self:center; 
  justify-self:end; 
  width: 1.7rem;
  border: 4px solid white;
}
.product-container .wishlist-icon {
  padding-right: 1rem;
}
.wishlist-icon:hover {
  border: none;
  margin-top: 4px;
  margin-right: 4px;
  padding-top: 4px;
}
.product-image {
  width: 100%;
  grid-column: 1/2;
  grid-row: 1/2;
}
.hero-section-no-image {
  margin-top: 0;
}

/* __________POLICY_______________*/

.policy-information-container section ul li {
  list-style-type: initial;
  padding-top: 0.3rem;
}
.policy-information-container section {
  background-color: rgba(181, 181, 181, 0.458);
  border-radius: 20px;
  padding: 1rem 3rem;
  margin-top: 3rem;
}
.policy-information-container{
  padding: 1rem 4rem 4rem 4rem;
}
.policy-information-container h2 {
  font-size: 1.8rem;
 }

/* __________NAV_______________*/

.main-nav {
  margin-top: 13rem;
  border-right: 1px solid lightgrey;
  position: fixed;
}
.header-links {
  display: flex;
}
.main-nav li {
  margin-top: 0.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.6rem 1rem .7rem 1rem;
}
.main-nav ul:nth-child(2) {
  margin-top: 1rem;
}
.current-page {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  background-color: lightgray;
  border-radius: 3px;
}
.main-nav a:hover, .mobile-nav a:hover {
  color: gray;
}
.main-nav .product-search-li {
  display: flex;
  flex-direction: column;
}
.main-nav .product-search-li label {
  padding-bottom: .2rem;
}


/* __________ NAV MOBILE_______________*/

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2rem;
  padding-left: 0;
}
.header-links .hamburger-button {
  width: 4rem;
  align-self: start;
  margin-top: 2.2rem;
}
.hamburger-button {
  display: none;
  z-index: 99;
}
.mobile-nav {
  border: 1px solid black;
  margin: 0rem;
  margin-top: 8rem;
  position: fixed;
  width: 100vw;
  background-color: white;
  padding: 2rem 0;
  z-index: 3;
  margin-left: 1.5rem;
  align-self: center;
}
.mobile-nav .product-search-li {
  margin-top:3rem;
  margin-bottom: 2rem;
  text-align: center;
}
.mobile-nav li {
  margin-top: .5rem;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 700;
  padding: 0.6rem 1rem .7rem 1rem;
}
.hidden {
  display: none;
}


/* __________FOOTER_______________*/

footer{
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #b7b7b7;
  align-self: end;
}
footer ul {
  display: flex;
  font-size: 1.2rem;
  padding-left: 0;
  margin-left: 3rem;
}
footer ul li {
  margin-right: 1.8rem;
  align-items: center;
  height: fit-content;
  align-self: center;
}
footer ul li a:hover {
  color: #fcddd3;
}
footer img {
  width: 2.5rem;
  padding-left: 10px;
  border: 4px solid #b7b7b7;
}
.mobile-footer img:hover {
  border: none;
  margin-top: 4px;
  margin-right: 4px;
  padding-top: 4px;
  padding-left: 20px;
}
.main-footer img:hover {
  border: none;
  margin-top: 4px;
  margin-right: 4px;
  padding-top: 4px;
  padding-left: 14px;
}
.social-icons {
  margin-left: auto;
  margin-right: 2.5rem;
}
.mobile-footer {
  display: none;
}


/* __________SOCIALS PAGE_______________*/

.socials-notice {
  text-align: center;
  margin-bottom: 10rem;
}
.socials-notice img {
  max-width: 6rem;
  padding: 1rem;
}




/*_______________________________RESPONSIVE __________________________________________*/


/*___________________RESPONSIVE max-width : 1200px_________________*/

@media (max-width: 1200px) {


  /* __________HERO SECTION__________*/

  .shopping-cart {
    margin-right: 1.5rem;
  }
  .main-logo {
    width: 50%;
  }


  /* __________ABOUT US______________*/
  .about-us-section {
    margin-top: 4rem;
  }
  

   /* __________SHOPPING CART______________*/

.cart-grid {
  grid-template-columns: 1fr;
}
  

  /* __________BANNER________________*/

  /* __________LOGIN_________________*/

  /* __________CONTACT_______________*/

  .contact-grid img {
    margin-top: 2rem;
  }


  /* __________SERVICES______________*/

  .shared-grid {
    grid-template-columns: 1fr;
  }
  .services-text h1 {
    margin-top: 1rem;
  }


  /* __________ITEM________________*/

  .shoe-grid {
    grid-template-columns: 1fr;
  }
  .shoe-grid .product-image {
    max-width: 35rem;
   justify-self: center;
  }


  /* __________WISH LIST_____________*/

  /* __________PRODUCTS______________*/

  .product-gallery-grid {
    grid-template-columns:1fr 1fr;
  }


  /* __________POLICY________________*/

  /* __________NAV___________________*/

  /* __________FOOTER________________*/
}


@media (max-width:950) {
  footer ul {
    margin-left: 1rem;
  }
  footer ul {
    display: grid;
    grid-template-columns: 1fr;
  }
  footer img {
    grid-column: 1/2;
    grid-row: 5/6;
  }
  footer a {
    font-size: 1rem;
    padding:1rem;
  }
 
}

/*___________________RESPONSIVE max-width : 1060px_________________*/
@media(max-width:1060px) {


.main-footer {
  display: none;
}
.mobile-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
} 
.mobile-footer ul {
  flex-direction: column;
  margin-left: 3.5rem;
  padding-bottom: 1;
  padding-top: 0;
}
.mobile-footer li {
  align-self: start;
  padding-top: .8rem;
}
footer img {
  padding-left: 1rem;
}
.social-icons {
  margin-right: 3rem;
  align-self: center;
}
.hero-section .hero-img {
  margin-top:2rem;
}
}



/*___________________RESPONSIVE max-width : 860px_________________*/

@media (max-width: 860px) {

  .main-grid {
     grid-template-columns: 1fr;
     min-height: 100vh;
  }


  /* __________HERO SECTION__________*/

  .shopping-cart img {
    width: 4rem;
  }
  .shopping-cart {
    margin-top: 2rem;
    margin-right: 2rem;
  }
  .hamburger-button {
    display: block;
    margin-right: 1.5rem;
  }
  .header-links-main {
    display: none;
  }
  .header-links-mobile-container {
    display: block;
    position: fixed;
    width: 100vw;
    z-index: 99;
  }
 

  /* __________ABOUT US______________*/

  .about-us-section {
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
  }


  /* __________BANNER________________*/

  .banner-images-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .new-arrivals-banner h2 {
    padding-left: 2rem;
  }
  .new-arrivals-banner {
    max-height: 23rem;
    margin-top: 20rem;
  
  }

  /* __________LOGIN_________________*/

  .login-text {
    margin-top: 6rem;
  }
  #login {
    grid-template-columns: 1fr;
  }
  #new-password {
    grid-template-columns: 1fr;
  }
  .login-text input {
    width : 300px;
  }


  /* __________ITEM_________________*/

  .item-grid h1 {
    margin-top: 12rem;
  }
  .shoe-grid {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 4rem;
  }
  

  /* __________CONTACT_______________*/
  .contact-main h1 {
    margin-top: 12rem;
  }


  /* __________SERVICES______________*/
  .services-text{
    margin-top: 10rem;
  }


  /* __________WISH LIST_____________*/
  .wish-list-main h1 {
    margin-top: 12rem;
  }


  /* __________PRODUCTS______________*/

  .product-gallery-grid {
    grid-template-columns:1fr 1fr;
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .products-main h1{
    margin-top: 12rem;
  }


  /* __________POLICY________________*/
  .policy-information-container h1 {
    margin-top: 12rem;
  }
  .policy-information-container h2 {
    font-size: 1.6rem;
   }


  /* __________SHOPPING CART_______________*/

  .main-cart h1 {
    margin-top: 12rem;
    margin-left: 2rem;
  }
  .cart-grid {
    margin: 0;
    padding : 0 2rem 2rem 2rem;
  }


  /* __________NAV___________________*/

  .main-nav {
    display: none;
  }


  /* __________FOOTER________________*/

  footer ul {
    margin-left: 2rem;
  }
  footer {
    grid-column: auto;
    grid-row: auto;
  }
  footer ul li {
    margin-right:.8rem;
  }


/* __________SOCIALS________________*/

  .socials-notice {
    text-align: center;
    margin-top: 12rem;
    margin-bottom: 20rem;
  }
  .socials-notice img {
    width: 5rem;
    padding: 1rem;
  }
  
}




/*___________________RESPONSIVE max-width : 700px_________________*/

@media (max-width: 700px) {

  /* __________HERO SECTION__________*/

  .hero-img {
    display: none;
  }
  .shopping-cart {
    margin-top: 1rem;
    margin-right: 2rem;
  }
  .main-logo {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .shopping-cart {
   margin-top: 2rem;
  }


  /* __________ABOUT US______________*/

  .about-us-section h1 {
    margin-top: 0.5rem;
  }
  .about-us-section {
    font-size: 1.2rem;
    margin-top: 5rem;
  }


  /* __________BANNER________________*/

  .new-arrivals-banner {
    margin-top: 10rem;
    background-color: rgba(128, 128, 128, 0.569);
  }
  .banner-images-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    grid-column: 1/2;
    grid-row: 2/2;
  }
  .new-arrivals-banner h2 {
    padding-left: 1.5rem;
  }
  div .new-arrivals-banner{
  max-height: 20rem;
  }


  /* __________LOGIN_________________*/

   /* __________CART_________________*/

   .thankyou  {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 4rem;
   }

  /* __________CONTACT_______________*/

  /* __________SERVICES______________*/

  /* __________WISH LIST_____________*/

  /* __________PRODUCTS______________*/

  .product-gallery-grid {
    margin-left: 4rem;
    margin-right: 4rem;
  }


   /* __________ITEM_____________*/

 h1 {
    font-size: 2.5rem;
  }


  /* __________POLICY________________*/

  /* __________NAV___________________*/

  /* __________FOOTER________________*/
  
}


/*___________________RESPONSIVE max-width : 600px_________________*/


@media (max-width:600px) {
  .product-gallery-grid {
  grid-template-columns:1fr;
  }
}


/*___________________RESPONSIVE max-width : 500px_________________*/

@media (max-width: 500px) {


    /* __________NAV___________________*/

    .shopping-cart img {
      max-width: 3rem;
    }
    .hamburger-button {
      max-width: 3rem;
    }


  /* __________HERO SECTION__________*/

  /* __________ABOUT US______________*/

  /* __________BANNER________________*/

  /* __________LOGIN_________________*/

  /* __________CONTACT_______________*/

  /* __________SERVICES______________*/

  /* __________WISH LIST_____________*/

  /* __________PRODUCTS______________*/

  .product-gallery-grid {
    margin-left: 3rem;
    margin-right: 3rem;
  }

 

  /* __________POLICY________________*/

  .policy-information-container  {
   padding-left: 2rem;
   padding-right: 2rem;
  }
  .policy-information-container h2 {
    font-size: 1.5rem;
   }

  /* __________FOOTER________________*/
  
}


/*___________________RESPONSIVE max-width : 1400px_________________*/
@media (max-width: 1400px) {
  .banner-images-container {
    gap: 1rem;
  }
}