* {
  margin: 0em;
  user-select: none;
  font-family: 'Lato', sans-serif;
}

html {
  scroll-behavior: smooth;
}

/*---- GOOGLE ICON  ----*/

#search_icon {
  color: lightgray;
}

/*---- NAVBAR / NAV MENU  ----*/

nav {
  background-color: black;
  padding: 1em 3.125em .5em;
}

.nav_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 80px;
}

.logo_txt {
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: grey;
  padding: 10px 20px;
  border-radius: 10px;
}

.search_input {
  border: none;
  background-color: transparent;
}

.search_input::placeholder {
  color: lightgray;
}

.limited_offer {
  color: white;
  font-size: 1.25rem;
  border-bottom: 1px solid green;
  cursor: pointer;
}

.limited_offer:hover {
  border-bottom: 1px solid greenyellow;
}

.nav_bottom {
  margin-top: .75em;
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4em;
  font-size: .75rem
}

.menu_item {
  font-weight: 400;
  color: lightgray;
}

.menu_item:hover {
  cursor: pointer;
  color: gray;
}

/*--------- Slider  ----------*/

.slider {
  margin-top: -.35em;
  background: url("https://images.unsplash.com/photo-1604147495798-57beb5d6af73?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80");
  clip-path: polygon(0 0, 100% 1%, 100% 100%, 0 90%);
  overflow: hidden;
}

.slider_wrapper {
  display: flex;
  width: 500vw;
  transition: all 1000ms ease-in-out;
}

.slider_img {
  z-index: 1;
}

.slider_bg {
  width: 60%;
  height: 120%;
  border-radius: 50%;
  position: absolute;
  opacity: 40%;
}

.slider_item {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slider_title {
  position: absolute;
  top: 10%;
  right: 10%;
  color: white;
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  z-index: 1;
}

.slider_price {
  position: absolute;
  top: 20%;
  left: 10%;
  color: white;
  font-size: 3rem;
  font-weight: 300;
  text-align: center;
  border: 1px solid grey;
  padding: .1em;
  z-index: 1;
}

.buy_btn {
  position: absolute;
  bottom: 30%;
  right: 10%;
  color: black;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  border: none;
  padding: .1em;
  z-index: 1;
  padding: .15em .5em;
  border-radius: 5px;
}

.buy_btn:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

.slider_item:nth-child(1) .slider_bg {
  background-color: #369e62;
}

.slider_item:nth-child(2) .slider_bg {
  background-color: rebeccapurple;
}

.slider_item:nth-child(3) .slider_bg {
  background-color: teal;
}

.slider_item:nth-child(4) .slider_bg {
  background-color: cornflowerblue;
}

.slider_item:nth-child(5) .slider_bg {
  background-color: yellowgreen;
}

.slider_item:nth-child(1) .slider_price {
  color: #369e62;
}

.slider_item:nth-child(2) .slider_price {
  color: rgb(140, 73, 207);
}

.slider_item:nth-child(3) .slider_price {
  color: teal;
}

.slider_item:nth-child(4) .slider_price {
  color: cornflowerblue;
}

.slider_item:nth-child(5) .slider_price {
  color: yellowgreen;
}

/* ------------  features ----------------- */

.features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.125em;
  gap: 1em;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.material-symbols-outlined {
  color: green;
}

.feature_title {
  font-weight: 900;
  margin-top: 1em;
}

.feature_description {
  margin-top: .5em;
  width: 50%;
  text-align: center;
  color: grey;
  font-size: .9rem;
}

/* ------------  Products ----------------- */


.product {
  height: 100vh;
  background-color: rgb(219, 219, 219);
  position: relative;
  clip-path: polygon(0 7%, 100% 0, 100% 81%, 70% 100%, 0 100%);
}

.product_img {
  width: 40%;
  margin-top: 4.5em;
  padding-top: 50px;
  padding-left: 50px;
}

.product_details {
  position: absolute;
  top: 10%;
  right: 2%;
  width: 40%;
  padding: 50px;
}

.product_title {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: .5em;
}

.product_description {
  font-size: 1rem;
  color: grey;
  margin-top: 1.5em;
}

.colors,
.sizes {
  display: flex;
  margin-top: 1.75em;
}

.color {
  width: 2em;
  height: 2em;
  border-radius: 5px;
  margin-right: .5em;
  background-color: black;
  cursor: pointer;
}

.color:last-child {
  background-color: darkblue;
}

.color:hover {
  transform: scale(1.1);
  transition: ease-in;
}

.size {
  padding: 0.312em 1.25em;
  border: 1px solid black;
  margin-right: .75em;
  cursor: pointer;
}

.size:hover {
  color: white;
  background-color: black;
  font-weight: 500;
}

.buy_product_btn {
  margin-top: 2.5em;
  padding: 0.725em 1.35em;
  background-color: black;
  color: white;
  font-weight: 800;
  border: none;
  cursor: pointer;
  float: right;
  margin-right: 2.5em;
}

.buy_product_btn:hover {
  border: 1px solid black;
  color: black;
  background-color: #fff;
  color: sa;
}

/* ------------  payment modal ----------------- */

.payment {
  color: white;
  text-shadow: 2px 2px black;
  width: 31.25em;
  height: 31.25em;
  background-color: grey;
  opacity: 98%;
  position: absolute;
  border-radius: 10px;
  border: 1px solid grey;
  top: 5%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  box-shadow: 0px 0px 11px 10px rgba(252, 252, 252, 0.91) inset;
  -webkit-box-shadow: 0px 0px 11px 10px rgba(255, 255, 255, 0.91) inset;
  -moz-box-shadow: 0px 0px 11px 10px rgba(253, 253, 253, 0.91) inset;
}

.close {
  position: absolute;
  top: 5%;
  right: 7%;
  font-size: 1.1rem;
  transition: transform 300ms;
}

.hidden {
  display: none;
}

.close:hover {
  color: green;
  font-size: 1.25rem;
  transform: rotate(180deg);
  translate: (ease-in-out);
  text-shadow: none;
  font-weight: bold;
  border: 1px solid green;
  border-radius: 50%;
  padding: .0em .2em;
  background-color: darkgray;
}

.payment_title {
  font-size: 2rem;
  text-shadow: 2px 2px black;
}

.input_container {
  display: flex;
  flex-direction: column;
  width: 90%;
}

.input_container>label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.payment_input {
  height: 2em;
  border: none;
  padding-left: .5em;
  font-size: 1.1rem;
  background-color: transparent;
  border-bottom: 1px solid white;
}

input:hover {
  cursor: pointer;
}

.payment_input::placeholder {
  color: lightgray;
  font-weight: 500;
}

.card_icons_title {
  width: 500px;
  display: flex;
  justify-content: space-between;
}

.card_info_title {
  margin-top: .5em;
}

.card_infomation {
  font-size: 1.5rem;
}

.card_logos {
  padding-right: 3em;
}

.card_icon {
  width: 40px;
}

.sm {
  width: 40%;
}

.pay_btn {
  height: 2.5rem;
  margin-top: .5em;
  font-size: 1.25rem;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  border: none;
}

.pay_btn:hover {
  color: white;
  background-color: black;
  cursor: pointer;
}

/* ------------  Gallery  ----------------- */
.gallery {
  padding: 3.125em;
  padding-bottom: 0em;
  display: flex;
  height: 100vh;
}

.gallery_item {
  flex: 1;
}

.gallery_img {
  width: 90%;
}

.gallery_title {
  font-size: 2rem;
  font-weight: 900;
}


.title_right {
  color: black;
  font-size: 3.5rem;
  letter-spacing: -2px;
}

/* ------------  New season  ----------------- */
#new_season {
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.new_season_container {
  margin-top: 2em;
  background-color: #000000;
  clip-path: polygon(34% 3%, 34% 3%, 100% 6%, 100% 88%, 71% 95%, 71% 95%, 0 90%, 0 9%);
}

.new_season {
  display: flex;
}

.season_item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
}

.season_image {
  width: 100%;
  padding-top: 1.5em;
}

.season_title {
  font-size: 2.5rem;
}

.season_title_sm {
  letter-spacing: 1px;
}

.season_btn {
  padding: .75em 1.5em;
  background-color: white;
  color: black;
  border: none;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  border: 1px solid white;
}

.season_btn:hover {
  color: white;
  cursor: pointer;
  background-color: rgb(0, 0, 0);
  border: 1px solid white;
}

/* ------------  Footer  ----------------- */
#footer {
  background-color: gray;
  display: flex;
}

.footer_left {
  display: flex;
  justify-content: space-between;
  flex: 2;
  padding: 2em 3.125em;
}

.footer_menu_title {
  font-size: 1.1rem;
}

.footer_list {
  list-style: none;
  padding: .25em;
}

.footer_menu_item {
  text-decoration: none;
}

.footer_list_item {
  color: lightgray;
  cursor: pointer;
  margin-bottom: .5em;
}

.footer_list_item:hover {
  color: black;
}

.footer_right {
  flex: 1;
  padding: 2em 3.125em;
  position: relative;
}

.footer_mail {
  margin-bottom: 1em;
}

.footer_input {
  width: 200px;
  height: 25px;
  border: none;
  padding-left: .5em;
}



.footer_btn {
  padding: .44em;
  color: white;
  background-color: black;
  border: none;
}

.footer_btn:hover {
  transform: scale(1.1);
}

.footer_right_menu_title {
  font-size: 1.25rem;
  margin-bottom: .5em;
}

.footer_icons {
  width: 2.187rem;
  margin-right: 1em;
}

.footer_icons:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.copyright_txt {
  margin-top: 1em;
  margin-bottom: 0em;
  font-size: .65rem;
  color: lightgray;
  position: absolute;
  bottom: 2.5%;
  right: 5%;
}

/* -------  @media query responsivness ----------------- */

@media (max-width:480px) {

  /* ------- navbar ----------------- */
  nav {
    padding: 1.25em 1.25em .5em 1.25em;
  }

  .search {
    display: none;
  }

  .logo {
    width: 50px;
  }

  .logo_txt {
    font-size: 1rem;
  }

  .linited_offer {
    font-size: 1rem;
  }

  .nav_bottom {
    flex-wrap: wrap;
    margin-bottom: .25em;
    gap: 2em;
  }

  /* ------- slider ----------------- */
  .slider {
    clip-path: none;
  }

  .slider_img {
    width: 90%;
  }

  .slider_bg {
    width: 100%;
    height: 100%;
  }

  .slider_title {
    display: none;
  }

  .slider_price {
    top: unset;
    bottom: 2%;
    left: 5%;
    font-size: 1.75rem;
    font-weight: 500;
    text-shadow: 1px 1px black;
  }

  .buy_btn {
    bottom: 2%;
    right: 5%;
    font-size: 1rem;
    opacity: 70%;
  }

  /* ------- features ----------------- */
  .features {
    flex-direction: column;
    padding: 1em 3.125em;
  }

  /* ------- product ----------------- */
  .product {
    clip-path: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product_container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product_img {
    width: 60%;
    padding-top: 5px;
    padding-left: 0px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
  }

  .product_details {
    width: 100%;
    padding: 0;
    top: unset;
    right: unset;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }

  .product_title {
    font-size: 1.25rem;
  }

  .buy_product_btn {
    margin-right: 0;
  }

  /* ------- payment ----------------- */
  .payment {
    width: 85%;
    padding: 1.125em;
    top: 0;
  }

  .payment_title {
    font-size: 1.5rem;
    margin-bottom: 1em;
  }

  .input_container>label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: none;
  }

  /* ------- gallery ----------------- */
  .gallery {
    display: none;
  }

  .gallery_img {
    width: 100%;
  }

  .title_left,
  .title_center {
    display: none;
  }

  .title_right {
    text-align: center;
  }

  /* ------- season ----------------- */
  #new_season {
    justify-content: unset;
    height: unset;
  }

  .new_season_container {
    clip-path: none;
    margin-top: 0;
  }

  .new_season {
    display: flex;
    flex-direction: column;
  }

  .season_image {
    padding-top: 0;
  }

  .season_title {
    font-size: 1.5rem;
  }

  .season_title_sm {
    font-size: 1rem;
  }

  .season_item:nth-child(2) {
    padding: 40px;
  }

  /* ------- footer ----------------- */
  #footer {

    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer_left {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex: 2;
    padding: 1em 1.5em;
    padding-bottom: 0;
  }

  .footer_menu_title {
    font-size: 1rem;
    margin-bottom: .65em;
  }

  .footer_list {
    font-size: .75rem;
  }

  .footer_list_item {
    margin-bottom: .75em;
  }

  .footer_right {
    width: 100%;
    padding: .5em 1.5em 2em 1.5em;
  }

  .footer_right_menu_title {
    font-size: 1rem;
  }

  .footer_social_icons {
    display: flex;
    justify-content: center;
    gap: 1em;
  }

  .footer_icons {
    width: 1.562rem;
    margin-right: 0;
  }

  .copyright_txt {
    right: 0%;
  }
}