/*---G-Fonts---*/
@import url("https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
/*---Used-colors---*/
:root {
  --color-1: #dde6ed;
  --color-2: #9db2bf;
  --color-3: #27374d;
  --color-4: #fbfbfb;
  --color-5: #526d82;
  --color-6: #ffffff;
  --color-7: #000000;
  --color-8: #db0000;
  --color-9: #393e46;
  --color-10: #818181;
  --color-11: #dc5050;
  --color-12: #48a91e;
  --color-13: #4dff00;
}
html, body {
  height: 100%;
}
body {
  background-color: var(--color-4);
  margin: 15px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
header {
  background-color: var(--color-2);
  color: var(--text-color);
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
header img {
  width: 100px;
  height: 100px;
  padding-left: 10px;
}
.nav-title {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--color-3);
  text-shadow: #526d82 0 0 2px;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-3);
  animation: typing 3s steps(90),
    blink 0.75s step-end infinite alternate;
}

@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: 193px;
  }
}

@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--color-2);
  }
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
}
.nav-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.nav-buttons {
  background-color: var(--color-3);
  text-decoration: none;
  border-radius: 15px;
  padding: 10px;
  color: var(--color-4);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.nav-buttons:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
/*--Dropdown--*/
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-6);
  min-width: 160px;
  border-radius: 10px;
  z-index: 1;
  margin-top: 5px;
}
.dropdown-content a {
  color: var(--color-3);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  border-radius: 10px;
}
.dropdown-content a:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
.show {
  display: block;
}
.login-button {
  background-color: var(--color-3);
  text-decoration: none;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-size: 17px;
  font-weight: 500;
  border-radius: 15px;
  padding: 11px;
  color: var(--color-4);
  border: none;
  cursor: pointer;
}
.login-button:hover {
  background-color: var(--color-5);
  color: var(--color-4);
}
.login-icon {
  color: var(--color-13);
}
.login-button:hover .login-icon {
  color: var(--color-13);
}
/*--search-bar--*/
.search-title {
  display: flex;
  justify-content: center;
  color: var(--color-8);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 20px;
}
.search-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.search-bar input[type="text"] {
  width: 250px;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 15px;
  font-size: 16px;
}
.search-button {
  padding: 10px 20px;
  background-color: var(--color-3);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;
}
.search-button:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
/*--sale-AD--*/
.slideshow-container {
  position: relative;
  width: 950px;
  height: auto;
  margin: auto;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-top: 50px;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-4);
  color: var(--color-3);
  font-size: 24px;
  padding: 8px 12px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  width: 50px;
  height: 50px;
}
.slide-btn:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
.prev {
  left: 10px;
}

.next {
  right: 10px;
}
/*--explore-cards--*/
.products-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.product-card {
  background-color: var(--color-6);
  border-radius: 20px;
  padding: 20px;
  width: 200px;
  height: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.product-card:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.product-card img {
  width: 200px;
  height: 110px;
  border-radius: 10px;
  object-fit: cover;
}
.product-card p {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-3);
  font-size: 16px;
  padding: 5px;
}
.product-card a {
  text-decoration: none;
  background-color: var(--color-3);
  color: var(--color-4);
  border: none;
  padding: 10px;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
}
.product-card a:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
/*--Suggested-products--*/
.Suggested-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.Suggested-card {
  background-color: var(--color-6);
  border-radius: 20px;
  padding: 20px;
  width: 200px;
  height: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.377);
  text-align: center;
  margin-bottom: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.Suggested-card:hover img {
  transform: scale(1.3);
}
.Suggested-card:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.Suggested-card img {
  width: 200px;
  height: 180px;
  border-radius: 10px;
  object-fit: cover;
  transition: transform 0.5s ease-out;
  cursor: pointer;
}
.Suggested-card a {
  text-decoration: none;
}
.Suggested-card-title {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-3);
  font-size: 16px;
  cursor: pointer;
}
.Suggested-card-description {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-3);
  font-size: 14px;
  cursor: pointer;
}
/*--footer--*/
.footer-container {
  background-color: var(--color-2);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  margin-top: 80px;
  margin-bottom: 0;
}
.footer-rights {
  font-family: "Cal Sans", sans-serif;
  font-weight: 300;
  color: var(--color-3);
  font-size: 16px;
}
.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--color-3);
  font-family: "Cal Sans", sans-serif;
}

.footer-links a:hover {
  color: var(--color-5);
}
/*-----------------------contact-us Sheet-----------------------*/
.contact-container {
  display: flex;
  justify-content: center;
  margin: auto;
  flex-wrap: wrap;
  width: 800px;
  height: auto;
  padding: 20px;
  box-shadow: #000000 0 0 10px;
  border-radius: 20px;
  background-color: var(--color-6);
}
.contact-info-header h2 {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-3);
  font-size: 25px;
  text-align: center;
}
.contact-info-header p {
  font-family: "Cal Sans", sans-serif;
  color: var(--color-8);
  font-size: 15px;
  text-align: center;
}
.contact-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0;
}
.contact-input {
  width: 550px;
  height: 12px;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 10px;
  font-size: 16px;
}
.contact-massege {
  width: 550px;
  height: 100px;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 10px;
  font-size: 16px;
}
.contact-button {
  padding: 10px 20px;
  background-color: var(--color-3);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;
}
.contact-button:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
/*-----------------------About Sheet-----------------------*/
.about-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  flex-wrap: wrap;
  width: 700px;
  height: auto;
  box-shadow: #000000 0 0 10px;
  border-radius: 20px;
  background-color: var(--color-6);
}
.about-team-name {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-8);
  text-align: center;
  align-items: center;
}
.about-content {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  font-family: "Cal Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-3);
}
.about-name {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-8);
  font-size: 20px;
  margin-left: 10px;
}
/*-----------------------Cart Sheet-----------------------*/
.cart-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  flex-wrap: wrap;
  width: 700px;
  height: 400px;
  box-shadow: #000000 0 0 10px;
  border-radius: 20px;
}
.cart-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: "Cal Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-size: 40px;
  color: var(--color-3);
}
.cart-button {
  display: flex;
  justify-content: center;
  text-decoration: none;
  padding: 10px 20px;
  background-color: var(--color-3);
  color: var(--color-4);
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;
  margin: auto;
  width: 125px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
}
.cart-button:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
/*-----------------------Laptops Sheet-----------------------*/
.sale-img-laptops {
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 50px;
  width: 500px;
  height: auto;
}
.laptops-title {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-8);
  font-size: 35px;
  text-align: center;
}
.card-price-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.card-price {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-8);
  font-size: 18px;
  margin: 0;
  cursor: pointer;
}
.card-old-price {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  color: var(--color-10);
  font-size: 14px;
  text-decoration: line-through;
  margin: 0;
  cursor: pointer;
}
/*-----------------------Every item style Sheets-----------------------*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.item-container {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0 auto;
  flex-wrap: wrap;
  width: 915px;
  height: auto;
  box-shadow: #000000 0 0 10px;
  border-radius: 20px;
  margin-top: 80px;
  overflow: hidden;
  padding: 20px;
}
.item-container img {
  width: 490px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  margin-right: 50px;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  transition: transform 1s ease;
}
.item-container img:hover {
  transform: scale(1.2);
}
.item-details {
  font-family: "Cal Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-3);
}
.item-details h2 {
  font-family: "Cal Sans", sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--color-8);
}
.item-price {
  font-family: "Cal Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-8);
  margin: 0;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 100px;
}
.newP {
  font-family: "Cal Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--color-12);
  margin: 0;
}
.oldP {
  font-family: "Cal Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--color-10);
  margin: 0;
  text-decoration: line-through;
}
.item-details p {
  font-family: "Cal Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-8);
  margin: 0;
  margin-top: 8px;
  margin-bottom: 8px;
}
.item-details button:hover {
  background-color: var(--color-5);
  color: var(--color-7);
}
.add-cart-button {
  padding: 10px 20px;
  background-color: var(--color-8);
  color: var(--color-4);
  border-radius: 15px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  width: 135px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  margin-bottom: 10px;
}
.add-cart-button:hover {
  background-color: var(--color-11);
  color: var(--color-7);
}