@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Root Properties start */
:root {
  --main-color: #131921;
  --main-link: #fff;
  --hover-link: #fc6767;
  --secondary-color: #232f3e;
  --main-font: "Inter", sans-serif;
  --body-background-color: #ffffff;
  --dark-element: #f0f0f0;
  --black: #000;
  --white: #fff;
  --boxShadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  --mainBlue: #2a55e5;
  --light-blue: #2874f0;
  --search-icon: #828282;
  --placeholder-back: #e8f0fe;
  --primary: #0170b4;
  --bg-blue: rgba(1, 112, 180, 0.08);
}

/* Root Properties end */

body {
  background-color: var(--body-background-color) !important ;
  transition: 0.3s;
  z-index: 99;
}
title {
  text-transform: capitalize;
}
/* dark background start */
.dark {
  background-color: #121212 !important;
}

.dark .navv {
  background-color: #181818;
  border-bottom: 1px solid #2a2a2a;
  transition: 0.3s;
}

.dark .menu_list a,
.dark .category_name {
  color: #fff;
}
.dark .menu_list .login {
  border: 2px solid #fff;
}

.dark input[type="search"],
.dark input[type="text"] {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #2a2a2a;
}
.dark .fa-magnifying-glass:hover {
  color: #fff !important;
}
.dark .catagories,
.dark .for_you,
.dark .product {
  background-color: #1e1e1e;
  border: 1px solid #2e2e2e;
  transition: 0.3s;
}
.dark .thumb,
.dark .for_you_title,
.dark .Product_title a,
.dark .perDay,
.dark .owner_text,
.dark .phone_text {
  color: #fff;
  transition: 0.3s;
}
.dark .footer {
  background-color: #181818;
}
.dark .backTop {
  background-color: #1e1e1e !important;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}
.dark .footer_title,
.dark .footer_list ul li a {
  color: #fff;
}
/* login dark start */
.dark .login_page,
.dark .signup_page {
  background-color: #121212;
}
.dark .right_login,
.dark .right_signup {
  background-color: #1e1e1e;
}
.dark .right_login p,
.dark .right_signup p,
.dark .insert_product_title,
.dark .manage_banner h4,
.dark .welcome_admin_msg,
.dark .form_fields .title,
.dark .wel_msg,
.dark .over_title,
.dark .over_subTitle,
.dark .pass_label,
.dark .change_title h2,
.dark .error,
.dark .manage_title,
.dark .cate-name h4,
.dark .arrow,
.dark .category-title .category-icon,
.dark .category-title h4 {
  color: #fff !important;
}
/* login dark end */
/* single page dark start */
.dark .single_page {
  background-color: #121212;
}
/* single page dark end */

/* dark background end */
.container {
  width: 90% !important;
  margin: auto;
  height: 100%;
}
/* toggle button start */
#toggleBtn {
  width: 50px;
  height: 26px;
  background: #ccc;
  border: none;
  border-radius: 30px;
  box-shadow:
    rgba(195, 195, 207, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  cursor: pointer;
}
.moon {
  transition: 0.3s ease;
  margin-right: 20px;
}
.sun {
  transition: 0.3s ease;
  margin-left: 20px;
}
/* toggle button end */
li {
  display: inline-flex;
  list-style: none;
}

a,
h4 {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-family: var(--main-font);
  word-spacing: 1px;
  letter-spacing: 1px;
  color: #000;
}
/* loader start */

.loader {
  position: absolute;
  border: 6px solid #534f4f;

  border-top: 6px solid #f3f3f3;
  left: 50%;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 999;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* loader end */

/* Nav start */
/* skeleton loading start */
.skeleton-product {
  width: 180px;
  height: 290px;
  padding: 10px;
  background-color: #fff;
  border-radius: 0.7rem;
}
.skeleton {
  opacity: 0.7;
  animation: skeleton-loading 1s linear infinite alternate;
}
.skeleton_img {
  height: 140px;
  width: 150px;
  margin-left: 4px;
  border-radius: 4px;
}
.sekeleton_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 8px;
  margin-top: 10px;
  margin-left: 4px;
  border-radius: 3px;
}
.sekeleton_text:last-child {
  width: 80%;
  margin-bottom: 0%;
}
@keyframes skeleton-loading {
  0% {
    background: hsl(200, 20%, 70%);
  }
  100% {
    background: hsl(200, 20%, 90%);
  }
}

/* skeleton loading end */
.navv {
  transition: 0.3s;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--main-link);
}

.header_logo img {
  height: 46px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* middle nav start */

.navv .container .nav-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  flex-wrap: wrap;
  gap: 10px;
}
.header_menus ul {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar .search_btn {
  position: absolute;
  background: none;
  border: none;
  padding-left: 10px;
  cursor: pointer;
}

.search-bar .fa-magnifying-glass {
  font-size: 14px;
  color: var(--search-icon);
  transition: 0.5s all ease-in-out;
}

.search-bar .fa-magnifying-glass:hover {
  color: #000;
}

.search-bar input {
  width: 100%;
  max-width: 370px;
  font-size: 12px;
  padding: 10px 10px 10px 45px;
  outline: none;
  text-transform: uppercase;
  border: 1px solid #232f3e;
  border-radius: 3px;
  transition: 0.3s ease-in-out;
}

.search-bar input:hover {
  border: 1px solid #0170b4;
}
.search-bar:focus {
  border: none;
}
.search {
  position: relative;
}

.fa-magnifying-glass {
  position: absolute;
  z-index: 999;
  left: 10px;
  top: 10px;
  font-size: 20px;
  color: #0e0d0d;
}
.menu-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.menu_list {
  padding-right: 10px;
}

.menu_list .login {
  padding: 4px 12px 4px 12px;
  border: 2px solid #000;
  text-align: center;
  border-radius: 2px;
  margin-right: 15px;
  transition: 0.5s all ease-in-out;
  color: #000;
}
.menu_link {
  color: #000;
}

.menu_list .login a {
  font-size: 10px;
  color: #000;
}

.fa-user {
  padding-right: 5px;
}
.plus {
  background-color: #fff !important;
  color: #000 !important;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 14px !important;
}

.post {
  display: flex;

  gap: 6px;
  font-family: "inter";
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4px 10px;
  margin-right: 50px;
  border: 1px solid #000;
  top: 26px;
  font-size: 12px;
  background-color: #000;
  color: #fff !important;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
}
.post:hover {
  background-color: #fff;
  color: #000 !important;
}
.post:hover > .plus {
  background-color: #000 !important;
  color: #fff !important;
}
.post_user {
  display: flex;

  gap: 6px;
  font-family: "inter";
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4px 10px;
  margin-right: 50px;
  border: 1px solid #000;
  top: 26px;
  font-size: 12px;
  background-color: #000;
  color: #fff !important;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
}
.post_user:hover {
  background-color: #fff;
  color: #000 !important;
}
.post_user:hover > .plus {
  background-color: #000 !important;
  color: #fff !important;
}

.toast-box {
  position: absolute;
  top: 100px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  gap: 10px;
}
.toast {
  position: relative;
  height: 50px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: start;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 4px;
  font-family: "inter";
  font-size: 12px;
  background: #fff;
  color: #000;
  animation: slide 0.5s ease-in-out;
}

@keyframes slide {
  0% {
    transform: translateX(-250px);
  }
  100% {
    transform: translateX(20px);
  }
}
.warning {
  font-size: 20px !important;
  margin-left: 10px;
  color: red !important;
}

.toast::after {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 0;
  background: green;
  animation: progress 3s ease;
}

@keyframes progress {
  100% {
    width: 0;
  }
}
/* .search-bar .cart {
  margin-left: 20px;
} */

/* .cart a {
  font-size: 25px;
} */

/* middle nav end */

/* bottom nav start */
.bottom-navbar {
  display: flex;
  height: 40px;
  background-color: var(--white);
  opacity: 0.9;
}

.bottom-navbar .secondary_list {
  padding-top: 10px;
}

.bottom_nav_list {
  padding-right: 15px;
}

.bottom_nav_list a {
  font-size: 12px;
  text-transform: uppercase;
  transition: 0.5s all ease;
  color: #131921;
}

.bottom_nav_list a:hover {
  color: #fc6767;
}

/* bottom nav end */

/* Nav end */

/* categories start */

.catagories {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  text-align: center;
  border: 1px solid #fff;
  justify-content: center;
  background-color: #fff;
  /* padding: 30px 10px 30px 10px; */
  margin-top: 10px;
  transition: 0.5s all ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.cato1 {
  padding: 25px;
}

.cato1 img {
  height: 90px;
  width: 100px;
}

.cato1 a {
  color: #000;
  font-size: 12px;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  padding: 0px;
}

.cato1 a h3 {
  font-weight: 400;
}

/* categories end */

/* fashion banner start */

.Banner {
  position: absolute;
  margin-left: -100px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 10px;
  z-index: 999;
  margin-top: 10px;
}

.Banner ul li {
  display: flex;
  flex-direction: column;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: 12px;
  padding: 10px 40px 10px 10px;
  text-align: start;
}

.Banner ul li:hover {
  background-color: #ccc;
  cursor: pointer;
}

.Title {
  padding: 5px;
  font-weight: 700;
  text-align: start;
}

.right_banner {
  position: absolute;
  margin-left: 200px;
  padding: 10px;
  font-size: 14px;
  text-wrap: nowrap;
  top: 0px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: none;
}

.mens_top_wear:hover .right_banner {
  display: block;
}

.right_banner ul li:hover {
  background: none;
}

.right_banner ul li:hover > a {
  font-size: 13px;
  color: green;
}

/* fashion banner end */

/* Product Card start */

.product_cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 7px;
  justify-content: center;
}

.product {
  width: 170px;
  height: 290px;
  padding: 10px;
  background-color: #fff;
  transition: 0.3s linear;
  border: 1px solid transparent;
  border-radius: 0.7rem;
}

.product:hover {
  background: var(--bg-blue);
  border-color: var(--primary);
}

.product img {
  display: flex;
  height: 140px;
  justify-self: center;
  width: 150px;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.product .Product_title {
  padding-top: 10px;
}

.product a {
  color: #000;
  font-size: 12px;
  text-wrap: pretty;
  font-family: "roboto";
}
.product a:hover {
  color: var(--mainBlue);
  font-size: 12px;
  text-wrap: pretty;
}
.price {
  padding-top: 10px;
  color: var(--hover-link);
  font-size: 14px;
  font-weight: 500 !important;
  font-family: "roboto";
}
.perDay {
  color: #000;
  margin-left: 2px;
  letter-spacing: 1px;
  font-family: "Times New Roman", Times, serif;
  text-transform: lowercase;
}
.owner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.owner_text,
.cate_text,
.phone_text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.phone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.call,
.account {
  font-size: 14px !important;
  color: #009688 !important;
}

.cateIcon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.cateIc {
  font-size: 18px !important;
  color: var(--light-blue) !important;
}

/* for you start */
.for_you {
  background-color: var(--white);
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #fff;
  transition: 0.5s all ease-in-out;
}

.for_you_banner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-left: 10px;
  border: 1px solid #000;
}
.for_you_right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.for_you_right .thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px !important;
  border: 0.1rem solid #ccc;
  height: 30px;
  width: 30px;
  border-radius: 10px;
}
.for_you_banner p {
  font-size: 16px;
  font-family: "inter";
  padding: 10px;
  color: #232f3e;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.load_more {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.load {
  padding: 10px 120px 10px 120px;
  background: none;
  border: 1px solid var(--hover-link);
  color: var(--hover-link);
  font-size: 16px;
  cursor: pointer;
}

/* for you end */
/* back to top start */
.back_to_top a {
  padding: 0px;
}

.backTop {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 45px;
  border: none;
  background: #d7d7d7;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
}

.backTop:hover {
  background: #bfbfc1;
}

/* back to top end */

/* footer start */
.footer {
  display: flex;
  background: var(--white);
  padding-bottom: 60px;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  transition: 0.3s;
}

.footer-box {
  display: flex;
  width: 20%;
  flex-direction: column;
  padding-left: 40px;
}

.footer_title {
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 12px;
  padding-top: 40px;
  letter-spacing: 3px;
  padding-bottom: 20px;
}

.footer_list ul li {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.footer_list ul li a {
  font-size: 10px;
}

.footer_list ul li a:hover {
  color: var(--light-blue);
  font-size: 11px;
}

.right_footer {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.right_footer_title {
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  padding-top: 40px;
  padding-bottom: 20px;
}

.right_footer_imgs {
  display: flex;
  column-gap: 20px;
}

.right_footer_imgs img {
  height: 46px;
  width: 79px;
}

/* footer end */
.mobile-navbar {
  display: none;
}

/* show and hide css class */

.hide {
  display: none !important;
}

.visible {
  display: block !important;
  transition: 0.5s all ease-in-out;
}

/* show and hide css class end */
.mobi-categories {
  display: none;
}