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

/* nav first */
.navbar {
  background-color: rgb(228, 186, 79);
}
.fa-user{
  color: rgb(228, 186, 79);
  background-color: black;
  padding: 10px;
  border-radius: 60%;
}
.fixed-nav {
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
}

.user {
  color: white;
  text-decoration: none;
}
.icons {
  padding: 10px;
  font-size: 17px;
  color: white;
}

.icons:hover {
  color: darkgoldenrod;
  background-color: black;
  border-radius: 50px;
  transition: 1s;
}

/* nav second */
.navbar-toggler:hover {
  border: none !important;
}

.navbar-toggler:focus {
  border: none !important;
}

/* .navbar-toggler{
    background-color: rgb(228, 186, 79) !important; 
} */
.nav-link {
  font-size: 17px !important;
  padding: 10px !important;
  color: black !important;
  position: relative !important;
  font-weight: 400 !important;
  
}

.nav-link:hover {
  color: darkgoldenrod !important;
}


.nav-link::after {
  content: "";
  width: 0px;
  height: 3px;
  background-color: darkgoldenrod;
  position: absolute;
  top: 80%;
  transition: 0.3s ease;
  left: 12px;
}

.nav-link:hover:after {
  width: 40%;
  transform: translateX(50%);
}

.cart {
  position: absolute;
  right: 90px;
  top: 20px;
}
.bi-person
{
  font-size: 22px !important;
  font-weight:bold !important;
}

/* Hide dropdown by default */
.dropdown {
  font-size: 17px !important;
  /* margin-top: 10px !important;
    margin-left: 5px; */
  color: black !important;
  text-decoration: none !important;
}

.nav-item.dropdown .dropdown-menu {
  display: none;
  /* Hide the dropdown menu */
  position: absolute;
  /* Ensure dropdown is correctly positioned */
  left: 0;
  /* Align left */
  right: 0;
  /* Align right */
  z-index: 1;
  /* Keep the dropdown above other elements */
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  /* Show the dropdown menu when the parent nav-item is hovered */
}

/* Optional: Add smooth transition effect */
.dropdown-menu {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
}

.nav-icon {
  color: black;
  border-radius: 50%;
  position: absolute;
  margin-top: 20px;
}

.cart {
  display: flex;
}

.items {
  /* padding: 1px; */
  font-size: 14px;
  margin-left: 12px;
  padding-left: 7.5px;
  background-color: black;
  color: white;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}

.active {
  color: rgb(228, 186, 79);
}

@media only screen and (max-width: 991px) {
  /* nav second*/
  .nav-link::after {
    content: "";
    background-color: transparent;
    position: absolute;
  }
  .offcanvas {
    width: 80% !important;
    z-index: 99999 !important;
  }
  .navbar-brand {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  .nav-img {
    width: 70px !important;
    height: 60px !important;
  }

  .navbar-toggler {
    position: absolute !important;
    bottom: 20px !important;
    border: none !important;
  }

  .cart {
    position: absolute;
    right: 35px;
    top: 60px;
  }

  .cart .nav-icon {
    font-size: 18px;
    color: black;
  }

  .second {
    height: 130px;
  }

  .nav-item.dropdown .dropdown-menu {
    display: none;
  }

  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }

  .dropdown-menu {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
  }

  .nav-item.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .nav-item.dropdown.show .dropdown-menu {
    display: block;
  }

  /* new arrival */
  .heading:before,
  .heading:after {
    display: none;
  }
  /* cart section */
  .cart-small {
    display: none !important;
  }
  .img-img{
    min-height: 30vh !important;
  }
  .img-text{
    margin-bottom: -100px !important;
  }
  .gap{
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
  .span{
    display: block !important;
  }
}

/* new arrival */
.icon{
  font-size: 35px;
}
.icon-size{
  font-size: 18px;
  letter-spacing: 2px;
}
.img-text {
  position: absolute;
  margin-bottom: -220px;
  /* bottom: -260px; */
  border: 1px solid white;
  border-radius: 8px;
  padding: 8px 35px;
  color: white;
  background-color: transparent;
  overflow: hidden; /* To ensure smooth slide-in effect */
  z-index: 1; /* Ensure text stays above */
  transition: color 0.5s ease-in-out; /* Smooth text color transition */
}
.img-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -110%; /* Initially place the white background outside on the left */
  width: 100%;
  height: 100%;
  background: white;
  z-index: -1; /* Place background behind the text */
  transition: transform 0.5s ease-in-out; /* Smooth slide-in effect */
  transform: translateX(0); /* Initial transform value */
}

.img-text:hover::before {
  transform: translateX(110%); /* Slide the background to fill the button */
}

.img-text:hover {
  color: black; /* Change text color on hover */
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.heading {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight:600;
}

.head-design {
  color: rgb(228, 186, 79);
}

.heading {
  position: relative;
  display: inline-block;
}

.heading:before,
.heading:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 320%;
  height: 1px;
  /* Adjust height as needed */
  background-color: rgb(168, 168, 168);
  /* Adjust color as needed */
}

.heading:before {
  left: -330%;
}

.heading:after {
  right: -330%;
}

.arrival-button {
  position: relative; /* Ensure positioning for pseudo-element */
  padding: 10px 35px !important;
  font-size: 16px !important;
  border: 1px solid darkgoldenrod !important;
  color: darkgoldenrod !important;
  background-color: transparent !important;
  font-weight: 500 !important;
  overflow: hidden; /* To ensure smooth slide-in effect */
  z-index: 1; /* Ensure text stays above */
  transition: color 0.5s ease-in-out; /* Smooth text color transition */
}

.arrival-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -110%; /* Initially place the background outside on the left */
  width: 100%;
  height: 100%;
  background: darkgoldenrod; /* Background color for the hover effect */
  z-index: -1; /* Place background behind the text */
  transition: transform 0.5s ease-in-out; /* Smooth slide-in effect */
  transform: translateX(0); /* Initial transform value */
}

.arrival-button:hover::before {
  transform: translateX(110%); /* Slide the background to fill the button */
}

.arrival-button:hover {
  color: white !important; /* Change text color on hover */
}
.img-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.cards-btn {
  display: none;
  bottom: -2%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  height: 43px;
  width: 180px;
  border-radius: 4px;
  cursor: pointer;
}
.cards-btn:hover{
  width: 243px;
  transition: 0.3s ease-in-out;
}
.img-wrapper:hover .cards-btn {
  display: block;
}

/* animation 1 */
/* Define the Kenburns Animation */
@keyframes kenburns-bottom {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 84%;
  }
  100% {
    transform: scale(1.05) translateY(5px);
    transform-origin: bottom;
  }
}

/* Styling for the element */
.card-img {
  display: block;
  width: 100%;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

/* Apply Kenburns Animation on Hover */
.card-img:hover {
  animation: kenburns-bottom 1s ease-out both;
}

/* animation 2 */
    /* Image style */ 
    /* .img-wrapper{
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease; 
    } */

    /* Hover effect */
    /* .img-wrapper:hover {
      transform: scale(0.9); 
    } */



/* cart */
#submitButton{
  position: relative; /* Ensure positioning for pseudo-element */
  /* padding: 10px 35px !important; */
  font-size: 16px !important;
  border: 1px solid black !important;
  color: black !important;
  background-color: transparent !important;
  font-weight: 500 !important;
  overflow: hidden; /* To ensure smooth slide-in effect */
  z-index: 1; /* Ensure text stays above */
  transition: color 0.5s ease-in-out; /* Smooth text color transition */

}
#submitButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -110%; /* Initially place the background outside on the left */
  width: 100%;
  height: 100%;
  background: black; /* Background color for the hover effect */
  z-index: -1; /* Place background behind the text */
  transition: transform 0.5s ease-in-out; /* Smooth slide-in effect */
  transform: translateX(0); /* Initial transform value */
}

#submitButton:hover::before {
  transform: translateX(110%); /* Slide the background to fill the button */
}

#submitButton:hover {
  color: white !important; /* Change text color on hover */
}

/* Ensure the checkout section displays correctly */
.checkout {
  display: none;
}

.checkout .form-control {
  margin-bottom: 15px;
}

.checkout .form-check {
  margin-bottom: 15px;
}

.checkout .form-floating {
  margin-bottom: 15px;
}

.checkout .accordion-item {
  margin-bottom: 15px;
}

/* footer */
.footer-top {
  border-top: 1px solid rgb(228, 228, 228);
}

.footer-text {
  max-width: 410px;
  font-size: 15px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  word-spacing: 2px;
  line-height: 23px;
}

.footer-links {
  color: black;
  text-decoration: none;
}
.footer-bottom {
  background-color: rgb(228, 186, 79);
  color: white;
}

.newsletter-text {
  max-width: 250px;
  font-size: 15px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  word-spacing: 2px;
  line-height: 20px;
}

.footer-img {
  margin-right: 15px;
  height: 26px;
  width: 26px;
}

.form-control {
  border-radius: 30px !important;
  border-color: transparent !important;
  width: 100%;
}

.btn-dark {
  background-color: black !important;
  border-radius: 30px !important;
}
.footer-input{
  border-radius: 30px !important;
  width: fit-content;
  border: 1px solid black !important;
padding-top: 5px;
padding-bottom: 5px;
}
.btn-dark:hover {
  background-color: rgb(228, 186, 79) !important;
  border-color: rgb(228, 186, 79) !important;
}
.return-policy-link{
  color: grey;
  text-decoration-color: gray;
}

/* javascript class */
.shop{
  display: none;
}
.link{
  color: darkgoldenrod !important;
}
.active{
  color: darkgoldenrod !important;
}
.about{
  display: none  !important;
}
.return{
  display: none !important;
}
.cartsection{
  display: none !important;
}
/* cart */
.cart-hr{
  color: 1px solid rgb(228, 228, 228) !important;
}
.cartInput{
  border: none !important;
}
.cartsection{
  display: none;
}
.checkout{
  display: none;
}


        /* Styles for Back to Top button */
        #backToTop {
          display: none;
          position: fixed;
          bottom: 50px;
          right: 30px;
          background-color: rgb(228, 186, 79);
          color: #fff;
          border: none;
          /* border-radius: 50%; */
          padding: 7px 12px;
          font-size: 20px;
          font-family:Verdana, Geneva, Tahoma, sans-serif;
          cursor: pointer;
          z-index: 1000;
      }

      /* #backToTop:hover {
          background-color: #444;
      } */



      /* checkout */
      .is-invalid {
        border-color: red;
      }
      
      .error-message {
        color: red;
        font-size: 0.875rem;
      }
      
      /* Uniform radio button size */
      .form-check-input {
        width: 18px;
        height: 18px;
      }
      
      .links{
      color: darkgoldenrod;
      font-size: 15px;
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      }
      
      .forthe-form {
        box-shadow: none !important;
      }
      
      .forthe-form {
        border-color: rgb(219, 219, 219) !important;
        border-radius: 5px !important;
      }.forthe-form:focus {
        border-color: darkgoldenrod !important;
      }
      
      .for-form {
        border-color: darkgoldenrod !important;
        cursor: pointer;
        box-shadow: none !important;
        border-radius: 5px !important;
        width: 100%;
      }
      
      .input-color:checked {
        background-color: darkgoldenrod !important;
        border-color: darkgoldenrod !important;
        font-weight: lighter !important;
      }
      
      .input-color{
        border-color: rgb(219, 219, 219);
      }
      .input-color:focus {
        border-color: darkgoldenrod !important;
      }
      
        /* Sticky right section
        .container {
            display: flex;
            flex-wrap: wrap;
        } */
      
        .rightside {
            position: sticky;
            top: 0;
            max-height: 100vh;
            overflow-y: auto;
            background: #fff;
            scrollbar-width: none;
            /* scroll-behavior: auto; */
            /* z-index: 1; */
        }
        .rightside::-webkit-scrollbar {
          display: none; 
        }

        .leftside {
            height: 100%;
            overflow-y: auto;
        }  
        /* General styling for the container */
      .my-3 {
        position: relative;
      }
      
      /* Label styling */
      .floating-label {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
        color: #aaa;
      }
      
      /* When the input is focused or has content */
      input.forthe-form:focus + .floating-label,
      input.forthe-form:not(:placeholder-shown) + .floating-label {
        top: 12px;
        font-size: 12px;
      }
      .privacy{
        transition: 0.3s ease-in-out;
        position: fixed;
      }
      @media only screen and (max-width: 991px) {
        .privacy{
          transition: 0.3s ease-in-out;
          position: fixed;
          z-index: 1;
          background-color: white;  
          width:  360px !important;
          height:  500px !important;
        }
        .col-lg-5 {
          position:relative;
          top: 0;
          max-height: 100vh;
          overflow-y: auto;
          background: #fff;
          /* z-index: 1; */
      }
      }
      
      .forContainer {
        filter: blur(5px); /* Blur effect */
        pointer-events: none; /* Disable interaction */
        opacity: 0.7; /* Optional: Reduce opacity for better effect */
      }
      
      .privacy {
        display: none; /*Hidden by default*/
        z-index: 1000; /* Ensure it appears above the overlay */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        overflow-y: auto;
      }
      .bi-x{
        font-size: 30px;
        font-weight: 100;
        color: grey;
      }
      .privacy-icon{
        background-color: white;
        position: sticky !important;
        top:0;
        left: 0 !important;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 30px !important;
        max-height: 25px !important; 
      }
      .checkout-logo {
        margin: auto;
        width: fit-content !important;
    }
    
    .checkout-icon {
        position: absolute; /* Keeps it positioned relative to its parent */
        right: 0; /* Aligns it to the right edge */
        top: 50%; /* Aligns it vertically */
        transform: translateY(-50%); /* Corrects vertical positioning to center */
        width: fit-content !important;
    }
    
    .nav-checkout {
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .bi-bag {
        font-size: 18px;
        color: darkgoldenrod;
    }
    
    .position {
        position: relative; /* Ensures .checkout-icon is positioned relative to this */
        margin: 0; /* Prevents unintended horizontal margins */
        width: 100%; /* Ensures it spans the full width */
      }
          .back-none{
        display: none !important;
      }
      .img-badge{
        display: flex; 
        justify-content: center; 
        align-items: center; 
        position: relative;
        left: 55px; 
        top: 13px ; 
        height: 22px; 
        width: 22px; 
        background-color: rgb(104, 104, 104); 
        color: white; 
        border-radius: 50%; 
        font-size: 13px;
        margin: -3px;
      }

@media only screen and (max-width: 1142px) {
  body {
    overflow-x: hidden;
  }
}

/* user */
.hidden {
  display: none;
}
.loginPage, .signupPage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 90vh;
}
.forlink{
  display: none;
}
.login-link{
  color: black;
  text-decoration: none;
}

@media only screen and (max-width:1142){
  body{
    overflow-x: hidden;
  }
}

.cccc{
  display: block !important;
}
.span{
  display: none;
}