/* reset code and common starts here  */
:root {
  --primary-color: rgb(11, 181, 48);
  --secondary-color: rgba(36, 122, 55, 0.9);
  --padding: 0.5rem;
  --transition: all 0.3s;
  --border-radius: 0.6rem;
  --box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 0.5);
}
* {
  box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
}
html {
  scroll-behavior: smooth;
}
img {
  width: 100%;
  height: auto;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-space-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.btn {
  border: none;
  padding: var(--padding);
  cursor: pointer;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn:hover {
  background-color: var(--secondary-color);
}
.card {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
  padding: var(--padding);
}
.card:hover {
  box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 1);
}
.hr-design {
  margin: 0.5rem 0;
}
.dot {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  display: inline-block;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.black {
  background-color: black;
}
.text-center {
  text-align: center;
}
.section-title {
  font-size: 2rem;
}
/* reset code and common ends here  */

/* navbar starts here  */
#menu-icon {
  display: none;
}
nav {
  font-family: fantasy;
  font-size: 1.2rem;

  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
}
.nav-upper {
  min-height: 10vh;
  background-color: var(--primary-color);
  padding: 1rem 0;
}
.nav__list {
  transition: var(--transition);
}
.nav__list:hover {
  text-decoration: overline;
  color: black;
}
.nav__link {
  color: white;
  transition: var(--transition);
}
.nav__link:hover {
  color: black;
}
.profile-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: white 1px solid;
  filter: saturate(0);
  transition: var(--transition);
}
.profile-icon:hover {
  filter: saturate(1);
}

.nav-lower {
  min-height: 10vh;
  background-color: var(--secondary-color);
  font-weight: bolder;
}
.nav__brand {
  font-size: 2rem;
}
/* navbar ends here  */

/* header starts here  */
.header {
  padding: 4rem 0;
  height: 80vh;
  background: url(images/gadget_slider1.jpg) no-repeat center;
  background-attachment: fixed;
  background-size: cover;
}
.banner {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.banner__title {
  font-size: 4rem;
  color: yellow;
  padding: 1rem;
  border-radius: var(--border-radius);
}
.features {
  width: 100%;
}
.feature {
  background-color: rgba(80, 160, 78, 0.7);
  color: white;
  border-radius: var(--border-radius);
  padding: 1rem;
  width: 15rem;
  flex-direction: column;
  gap: 1rem;
}
.feature__icon {
  font-size: 3rem;
}
/* header ends here  */

/* main starts here  */
main {
  padding: 4rem 0;
  min-height: 80vh;
}
.sidebar {
  flex: 1;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  align-self: flex-start;
}
.main-content {
  flex: 3;
  padding: var(--padding);
}
.actions__sort select {
  padding: var(--padding);
}
.actions__search input {
  padding: var(--padding);

  width: 15rem;
}
.actions__search button {
  margin-left: -0.3rem;
  border: 1px solid;
  padding: 0.55rem;
}
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}
.product {
  position: relative;
}
.badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: green;
  color: white;
  padding: 4px 8px;
  text-align: center;
  border-radius: var(--border-radius);
  z-index: 10;
}
.product__img {
  width: 100%;
  height: 15rem;
  filter: saturate(0);
  transition: var(--transition);
}
.product__img:hover {
  filter: saturate(1);
}
.product__body {
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.learn-more {
  color: green;
}

/* pagination starts here  */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination__btn {
  border-width: 1px 1px 1px 0;
  border-style: solid;
}
.pagination__btn:first-child {
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}
/* pagination ends here  */

/* prodcut details starts here  */
.product__details-left {
  flex: 1;
}
.product__details-left img {
  height: 20rem;
  width: 30rem;
}
.product__details-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* prodcut details ends here  */

/* cart design starts here  */
.cart {
  padding: var(--padding);
  gap: 1rem;
}
.cart .card {
  margin-bottom: 1rem;
}
.cart__items {
  flex: 1;
}
.cart__items-action {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart__item input {
  flex: 0.1;
}
.cart__item-img {
  flex: 0.2;
  width: 15rem;
  height: 10rem;
}
.cart__item-description {
  flex: 0.4;
}
.cart__item-shipping {
  margin-top: 0.5rem;
  color: red;
}
.cart__item-actions {
  flex: 0.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.cart__payment {
  flex: 1;
}
.cart__payment-summary > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
}
.cart__payment-btn {
  width: 100%;
}
.cart__payment-methods > h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.cart__payment-methods > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* cart design ends here  */

/* regisetr and login starts here  */
.register,
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  min-height: 60vh;
}
.register .card,
.login .card {
  width: 45rem;
}
.form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-control label {
  flex: 0.1;
  text-align: left;
}
.form-control input,
textarea {
  flex: 0.9;
  padding: var(--padding);
  border: 1px solid;
}
.form-control textarea {
  resize: none;
  height: 12vh;
}
.form-btn-field {
  border-radius: var(--border-radius);
}
.contact-btn {
  width: 30%;
}
/* regisetr and login ends here  */

/* profile starts here  */
.profile {
  flex-direction: column;
  gap: 3rem;
}
.profile .card {
  padding: var(--padding);
  width: 30rem;
  flex-direction: column;
  gap: 1rem;
}
.profile__img {
  width: 15vw;
  border-radius: 50%;
  border: 1px solid;
}
.profile__buttons button {
  background-color: transparent;
}
/* profile ends here  */

/* contact starts here  */
.contact-section {
  min-height: 52vh;
}
.contact-conatiner {
  margin-top: 5rem;
}
.contact-address {
  flex: 1;
  gap: 2rem;
  flex-direction: column;
}
.contact__map {
  width: 80%;
}
/* contact ends here  */

/* main ends here  */

/* footer starts here  */
.footer {
  padding: 1rem;
  background-color: var(--primary-color);
  min-height: 10vh;
  color: white;
  font-size: 1.1rem;
}
.btn-subscribe {
  margin-left: -5px;
}
.footer__input {
  border: none;
  padding: var(--padding);
  width: 20rem;
}
/* footer ends here  */

@media (max-width:992px) {
     .flex-space-around{
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }
    #menu-icon{
        display: block;
        text-align: center;
        margin: 1rem 0;
        cursor: pointer;
    }
    .hidden{
        display: none;
    }
    .header{
        height: 100vh;
    }
    .products{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cart_items, .cart_payment{
        width: 90%;
    }
    .product_details-left img{
    height: 20rem;
    width: 21rem;
    }
    .product_details-right{
        margin-left: 12px;
    }
    .form,.form-control{
        width: 100%;
    }
    .form-control input, textarea{
        width: 80%;
    }
    .register .card,
    .login .card{
        width: 90%;
    }
    .contact-address{
        width: 80%;
    }
    .banner__title{
        display: none;
    }
}
@media (max-width: 768px) {
  .flex-center {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
  }
  .products {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
}