/* Root Styles and Configurations */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  font-family: Verdana, sans-serif;
}
:root {
  --flip-blue: #2874f0;
}

/* Header Styles */
header {
  display: flex;
  background-color: var(--flip-blue);
  height: 70px;
  align-items: center;
  justify-content: space-around;
}

/* Header Left Section Styles */
.header-left {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  min-width: 300px;
  width: 50%;
  gap: 2%;
  flex: 0 0 auto;
}

/* Logo Styles */
.logo {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.logo-top {
  overflow: hidden;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-text-flipkart {
  height: 350%;
}
.logo-bottom {
  height: 20%;
  display: flex;
  margin-left: 7%;
  align-items: center;
}
.logo-text {
  font-style: italic;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  font-size: 80%;
  color: white;
}
.logo-text-plus {
  margin-left: 2%;
  color: rgb(255, 255, 0);
}
.logo-flipkart-plus {
  position: relative;
  margin-left: 2%;
  margin-bottom: 2%;
  height: 90%;
}

/* Searchbar Styles */
.searchbar {
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  position: relative;
  background-color: white;
  padding-right: 2%;
  border-radius: 3px;
  overflow: hidden;
}
.searchbar-input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding-left: 2%;
  font-size: medium;
  text-overflow: ellipsis;
}
.searchbar-icon {
  color: var(--flip-blue);
}

/* Searchbar Styles for Mobile */
.searchbar-for-mobile {
  display: none;
}
.searchbar-for-mobile {
  padding: 9%;
  background-color: white;
  height: 50%;
  color: var(--flip-blue);
  border-radius: 2px;
  position: relative;
  justify-content: start;
  align-items: center;
}
.searchbar-for-mobile:hover .searchbar-input-mobile {
  transform: scaleX(1);
}
.searchbar-input-mobile {
  display: block;
  position: absolute;
  width: calc(100vw - 150px);
  transition: all 100ms ease-in-out;
  transform-origin: left;
  transform: scaleX(0);
  z-index: 2;
  height: 100%;
  left: 99%;
  border: none;
  outline: none;
}

/* Header Right Section Styles */
.header-right {
  display: flex;
  height: 100%;

  min-width: 300px;
  width: 25%;
  gap: 2%;
  align-items: center;
}

/* Navigation Buttons Styles */
.nav-buttons {
  height: 50%;
  width: 30%;
  border: none;
  border-radius: 2px;
  font-size: medium;
  font-weight: 400;
  transition: all 100ms ease-in;
}

/* Login Button Styles */
.login-button {
  color: var(--flip-blue);
  background-color: white;
}
.login-button:hover {
  background-color: rgba(255, 255, 255, 0.897);
}
/* Cart & More Button Styles */
.cart-more-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  color: white;
  background-color: var(--flip-blue);
}
.cart-more-buttons:hover {
  background-color: white;
  color: var(--flip-blue);
}
.more-arrow {
  transition: all 200ms ease-in-out;
}
.more-button {
  height: 100%;
  width: 100%;
}
/* Dropdown menu animation and styles */
.dropdown-more:hover .more-arrow {
  transform: rotate(180deg);
}
.dropdown-more:hover .more-button {
  background-color: white;
  color: var(--flip-blue);
}
.dropdown-more:hover .dropdown-more-list {
  visibility: visible;
  transform: scaleY(1);
  transform-origin: top;
}
.dropdown-more {
  height: 50%;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dropdown-more-list {
  top: 100%;
  position: absolute;
  visibility: hidden;
  background-color: white;
  width: 100%;
  transition: all 100ms ease-in;
  border: 1px solid rgb(232, 232, 232);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: scaleY(0);
  transform-origin: top;
  border-radius: 1px;
}
.dropdown-more-list li {
  list-style: none;
  text-align: center;
  width: 100%;
  padding: 6%;
  border-bottom: 1px solid rgb(226, 226, 226);
  transition: all 50ms ease-in;
}
.dropdown-more-list li:hover {
  background-color: rgb(229, 229, 229);
}

/* Responsive Styles For Header*/
@media (max-width: 700px) {
  .searchbar-for-mobile {
    display: flex;
    margin-left: 10%;
  }
  .searchbar {
    display: none;
  }
  .header-left {
    width: auto;
    min-width: 0px;
    margin-left: 5%;
  }
  .header-right {
    margin-left: auto;
  }
  header {
    justify-content: start;
    height: 50px;
  }
}
@media (max-width: 450px) {
  .nav-buttons {
    font-size: small;
  }
  .header-right {
    min-width: 0px;
    margin-right: 10px;
    width: 60%;
    justify-content: flex-end;
  }
  .button-names {
    display: none;
    flex-shrink: 1;
  }
  .cart-more-buttons {
    width: 40px;
  }
  .dropdown-more-list li {
    min-width: 70px;
    background-color: white;
  }
}

/* main Body Styles */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: #f6f6f6;
  padding-bottom: 50px;
}

/* Category Container Styles */
.categories {
  display: flex;
  align-items: start;
  justify-content: center;
  overflow-x: scroll;
  width: 100%;
  gap: 3%;
  padding-top: 10px;
  padding-bottom: 5px;
  box-shadow: 0px 1px 5px rgb(212, 212, 212);
  background-color: white;
}
/* Category Item Styles */
.category-item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}
.category-item-name {
  text-align: center;
}
.category-item-image {
  height: 80px;
  padding: 10%;
  transition: all 50ms ease-in-out;
}
.category-item-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1%;
  width: 7rem;
  gap: 5%;
  font-size: 0.9rem;
}
.category-item-image:hover {
  transform: scale(1.2);
}
.category-item:hover {
  cursor: pointer;
}
.categories::-webkit-scrollbar {
  height: 6px;
}
.categories::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* Responsive Styles For Category Container */
@media (max-width: 1300px) {
  .categories {
    justify-content: space-around;
  }
}

/* Product Container Section Styles */

.main-section {
  display: flex;
  width: 90%;
  height: 400px;
  gap: 20px;
}

.section-deals,
.section-gaming {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 1px 1px 10px rgb(207, 207, 207);
  background-color: white;
  overflow: hidden;
  position: relative;
}
.product-header {
  flex: 0 0 60px;
  padding: 15px;
  padding-left: 25px;
  display: flex;
  border-bottom: 1px solid rgb(230, 230, 230);
  align-items: center;
}
.product-header-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.product-header-title-text {
  font-weight: bold;
  font-size: larger;
  text-overflow: ellipsis;
}
.product-header-title-time {
  color: gray;
}
.product-view-button {
  margin-left: auto;
  padding: 10px 15px;
  border-radius: 2px;
  border: none;
  background-color: var(--flip-blue);
  color: white;
  font-weight: 600;
  box-shadow: 1px 1px 5px rgb(203, 203, 203);
}
.product-view-button:hover {
  color: rgb(49, 49, 49);
  background-color: rgb(217, 217, 217);
  transition: all 100ms ease-in-out;
}
.product-content {
  display: flex;
  min-height: 0;
  flex: 0 1 auto;
  position: relative;
  padding: 20px;
  overflow: auto;
  gap: 10px;
}
.product-content::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.product-content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.product-content-item {
  display: flex;
  width: 200px;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  font-size: small;
  align-items: center;
  padding: 20px;
  transition: all 50ms ease-in-out;
  overflow: hidden;
}

.product-content-item:hover {
  background-color: #f6f6f6;
}
.product-content-item-image {
  flex: 1;
  min-height: 0;
  object-fit: scale-down;
  mix-blend-mode: multiply;
  padding: 10px;
}
.product-content-item-title {
  text-align: center;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.product-content-item-discount {
  text-align: center;
  white-space: nowrap;
  color: green;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}
.product-content-item-description {
  text-align: center;
  color: gray;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}
.product-content-scroll-button {
  position: absolute;
  right: 0;
  height: 80px;
  /* --height: 60px;
  --top: 50%; */
  /* top: calc(var(--top) - 1 / 2 (var(--height))); */
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 35px;
  font-weight: bolder;
  font-size: x-large;
  background-color: white;
  box-shadow: 1px 1px 20px rgb(93, 93, 93);
  z-index: 2;
}

/* Advertisement Styles */
.advertisement {
  margin-left: auto;
  height: 100%;
  flex: 0 0 auto;
  box-shadow: 1px 1px 5px rgb(27, 27, 27);
}
.advertisement-image {
  height: 100%;
}

/* Responsive Styles For Product Container Section */
@media (max-width: 800px) {
  .product-header-title {
    flex-direction: column;
    gap: 2px;
  }
}
@media (max-width: 900px) {
  .product-content-item {
    height: 300px;
    gap: 5px;
    width: 200px;
  }
  .advertisement {
    position: fixed;
    bottom: 2%;
    right: 2%;
    height: 20%;
    z-index: 2;
  }
  .product-content {
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: scroll;
  }
  .product {
    flex: 0 0 auto;
  }
  .main-section {
    height: 500px;
    flex-direction: column;
  }
  .product-content-scroll-button {
    display: none;
  }
}

/* Gaming Section Styles (only the title differs) */
.product-header-title-gaming {
  display: flex;
  justify-content: center;

  flex-direction: column;
  gap: 5px;
}