/* For Header */

   /* Custom styles */
   .navbar {
       background-color: rgba(255, 255, 255, 0.95);
       /* padding: 1rem 2rem; */
   }

   .navbar-brand img {
       height: 20px;
   }

   header{
       position: absolute;
       background-color: transparent;
   }

   .nav-link {
       color: #333 !important;
       /* font-size: 0.9rem; */
       text-transform: uppercase;
       letter-spacing: 1px;
       /* padding: 0.5rem 1rem !important; */
       font-weight: 500;
   }

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

   .dropdown-menu {
       border: none;
       border-radius: 0;
       box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   }

   .dropdown-item {
       font-size: 0.9rem;
       padding: 0.5rem 1.5rem;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .navbar-toggler {
       border: none;
       padding: 0;
   }

   .navbar-toggler:focus {
       box-shadow: none;
   }

   .header-icons {
       display: flex;
       gap: 1rem;
       align-items: center;
   }

   .header-icon {
       font-size: 1.2rem;
       color: #333;
       text-decoration: none;
   }

   .header-icon:hover {
       color: #666;
   }

   .cart-count {
       position: relative;
       top: -8px;
       right: 8px;
       background-color: #000;
       color: white;
       font-size: 0.7rem;
       padding: 2px 6px;
       border-radius: 50%;
   }

   .navbar-nav{
       display: ruby;
   }
   .navbar-nav .nav-link{
       font-size: 12px;
   }

   @media (max-width: 991.98px) {

       .navbar-expand-lg .navbar-nav{
           /* flex-direction:row */
       }

       .navbar-nav{
       display: block;
   }
       .navbar-collapse {
           position: fixed;
           top: 0;
           left: 0;
           padding: 2rem;
           width: 80%;
           height: 100vh;
           background-color: white;
           transform: translateX(-100%);
           transition: transform 0.3s ease-in-out;
           z-index: 1050;
       }

       .navbar-collapse.show {
           transform: translateX(0);
       }

       .mobile-nav-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0,0,0,0.5);
           z-index: 1040;
           display: none;
       }

       .mobile-nav-overlay.show {
           display: block;
       }

       .mobile-nav-close {
           position: absolute;
           top: 1rem;
           right: 1rem;
           font-size: 1.5rem;
           cursor: pointer;
       }

       .dropdown-menu {
           border: none;
           box-shadow: none;
           padding-left: 1rem;
       }
   }

   @media (min-width: 600px) {
       .navbar-collapse{
           width: 60%;
       }
   }

   @media (max-width: 600px) {
       .navbar-collapse{
           width: 80%;
       }
   }

   @media (max-width: 412px) {
    .header-icon{
       font-size: 14px;
    }

    .mobile-logo{
       margin-right: 19%;
    }

    .navbar-nav .nav-link{
       font-size: 13px;
   }

   }
   @media (max-width: 385px) {
    .header-icon{
       font-size: 13px;
    }
    /* .header-icons{
       gap: 0.9rem;
    } */

   }

/* For Scroller  */
   /* @media (max-width:1115px){ */
   body {
       margin: 0;
       padding: 0;
       font-family: Arial, sans-serif;
   }

   .scroller-container {
       /* width: 100%; */
       overflow-x: scroll;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
       /* Firefox */
       -ms-overflow-style: none;
       /* IE 10+ */
   }

   .scroller-container::-webkit-scrollbar {
       display: none;
       /* Chrome, Safari, newer versions of Opera */
   }

   .image-scroller {
       display: flex;
       padding: 20px 0;
       gap: 20px;
       width: max-content;
   }

   .scroll-item {
       flex: 0 0 auto;
       width: 180px;
       height: 200px;
       background-color: #f0f0f0;
       /* border-radius: 10px; */
       overflow: hidden;
   }

   .scroll-item img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .scroller-container1 {
       width: 100%;
       overflow-x: scroll;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
       /* Firefox */
       -ms-overflow-style: none;
       /* IE 10+ */
       /* overflow: hidden; */
   }

   .image-scroller1 {
       display: flex;
       padding: 10px 0;
       gap: 20px;
       width: max-content;
       overflow: hidden;
   }

   #sellingCarousel1 {
       width: 100%;
   }

   .carousel-itemslide {
       width: 100% !important;
   }

   /* }    */


 /* For PopUp Form  */
   .popup-overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 1000;
   }

   .popup-form {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background-color: white;
       padding: 20px;
       border-radius: 8px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       z-index: 1001;
       width: 300px;
   }

   .close-btn {
       position: absolute;
       right: 10px;
       top: 10px;
       cursor: pointer;
       font-size: 20px;
   }

   .form-group {
       margin-bottom: 15px;
   }

   .form-group label {
       display: block;
       margin-bottom: 5px;
   }

   .form-group input {
       width: 100%;
       padding: 8px;
       border: 1px solid #ddd;
       border-radius: 4px;
   }

   .submit-btn {
       background-color: #4CAF50;
       color: white;
       padding: 10px 15px;
       border: none;
       border-radius: 4px;
       cursor: pointer;
       width: 100%;
   }

   .submit-btn:hover {
       background-color: #45a049;
   }

 /* Spin To win  */

   /* Reset default margins and make popup fullscreen */
   * { margin: 0; padding: 0; box-sizing: border-box; }
   
   .spin-container {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.7);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 1000;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .spin-container.visible {
       opacity: 1;
   }

   .spin-content {
       background: white;
       padding: 40px;
       border-radius: 20px;
       display: flex;
       gap: 40px;
       max-width: 800px;
       position: relative;
       transform: scale(0.95);
       transition: transform 0.3s ease;
       box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   }

   .spin-container.visible .spin-content {
       transform: scale(1);
   }

   .wheel-container {
       width: 300px;
       height: 300px;
       position: relative;
   }

   .wheel {
       width: 100%;
       height: 100%;
       border-radius: 50%;
       position: relative;
       transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
       transform: rotate(0deg);
       background: white;
       box-shadow: 0 0 20px rgba(0,0,0,0.1);
   }

   .wheel-section {
       position: absolute;
       width: 50%;
       height: 50%;
       transform-origin: 100% 100%;
       clip-path: polygon(0 0, 100% 0, 100% 100%);
   }

   .section-content {
       position: absolute;
       left: 50%;
       top: 25%;
       transform: translate(-50%, -50%) rotate(60deg);
       white-space: nowrap;
       font-size: 14px;
       font-weight: 600;
       width: 80px;
       text-align: center;
   }

   .wheel::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 30px;
       height: 30px;
       background: white;
       border-radius: 50%;
       box-shadow: 0 0 10px rgba(0,0,0,0.1);
       z-index: 2;
   }

   .pointer {
       position: absolute;
       top: 50%;
       right: -12px;
       transform: translateY(-50%);
       width: 24px;
       height: 24px;
       background: white;
       clip-path: polygon(0 50%, 100% 0, 100% 100%);
       box-shadow: 2px 0 5px rgba(0,0,0,0.1);
       z-index: 3;
   }

   .form-container {
       padding: 20px;
       width: 300px;
   }

   .close-button {
       position: absolute;
       right: 15px;
       top: 15px;
       width: 30px;
       height: 30px;
       font-size: 24px;
       cursor: pointer;
       border: none;
       background: none;
       padding: 0;
       transition: transform 0.2s ease;
   }

   .close-button:hover {
       transform: scale(1.1);
   }

   .form-group {
       margin-bottom: 15px;
   }

   .form-group input {
       width: 100%;
       padding: 12px;
       border: 1px solid #ddd;
       border-radius: 6px;
       font-size: 14px;
       transition: border-color 0.2s ease;
   }

   .form-group input:focus {
       outline: none;
       border-color: #000;
   }

   .submit-button {
       width: 100%;
       padding: 15px;
       background: #000;
       color: white;
       border: none;
       border-radius: 6px;
       font-size: 16px;
       cursor: pointer;
       transition: background-color 0.2s ease;
       margin-bottom: 10px;
   }

   .submit-button:hover {
       background: #333;
   }

   .submit-button:disabled {
       background: #666;
       cursor: not-allowed;
   }

   .no-thanks {
       width: 100%;
       padding: 15px;
       background: none;
       border: none;
       color: #666;
       font-size: 14px;
       cursor: pointer;
       text-decoration: underline;
       transition: color 0.2s ease;
   }

   .no-thanks:hover {
       color: #000;
   }

 /* For text bottom to up */
   .offset-text {
       position: fixed;
top: 50%;
left: -50px;
z-index: 999 !important;
transform: rotate(271deg);
padding: 10px;
border: #000;
background-color: #000;
color: white;
cursor: pointer;
font-size: 20px;
}


/* For Size Select  */
   /* For Size Select Popup */
.close-button,.view-details{background:0 0;cursor:pointer}.close-button{position:absolute;right:16px;top:16px;border:none;font-size:24px}.product-info{display:flex;gap:16px;margin-bottom:24px}.product-image{width:80px;height:80px;object-fit:cover;border-radius:4px}.product-details h3{font-size:18px;margin:0 0 4px}.price1{font-size:18px;margin:4px 0}.view-details{color:#666;text-decoration:underline;border:none;padding:0;font-size:14px}.size-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}.size-button{padding:8px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer}.add-to-bag{width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px}.add-to-bag:hover{background:#723a0f}

body {
   font-family: Arial, sans-serif;
   background-color: #f8f9fa;
}

.spin-btn{
margin-left: 30%; margin-top: 12% !important;
}

/* Spin to Win Button */
.spin-button {
   position: fixed;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   background-color: #000;
   color: #fff;
   padding: 10px 20px;
   border: none;
   border-radius: 0 5px 5px 0;
   cursor: pointer;
   font-size: 16px;
   z-index: 999;
   transition: background-color 0.3s ease;
}

.spin-button:hover {
   background-color: #0056b3;
}

/* Spin to Win Modal */
.spin-to-win-modal {
   position: fixed;
   left: -900px;
   top: 0;
   width: 900px;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
   transition: left 0.5s ease;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1999;
}

.spin-to-win-modal.show {
   left: 0;
}

.spin-to-win-container {
   /* display: flex; */
   /* flex-wrap: wrap; */
   background: #fff;
   border-radius: 10px;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   width: 900px;
   position: relative;
   height: 70vh;
}

/* Close Button */
.close-button {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color: #ff4d4d;
   color: #fff;
   border: none;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}

.close-button:hover {
   background-color: #ff1a1a;
}

/* Spinning Wheel */
.wheel-container {
   position: relative;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: conic-gradient(
       rgb(248, 243, 238) 0% 20%, 
       #d4e5fa 20% 40%, 
       #d6f5d5 40% 60%, 
       #fff6b0 60% 80%, 
       #ffe0a3 80% 100%
   );
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 20px;
}

/* .wheel-container::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 30px;
   background: #fff;
   clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
} */

.wheel-container1 {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 30px;
   background: #fff;
   clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.segment {
   position: absolute;
   /* width: 300px; */
   /* height: 300px; */
   transform-origin: center;
   font-size: 14px;
   font-weight: bold;
   color: #000;
   padding-left: 160px;
}

.wheel-pointer {
   position: absolute;
   /* top: 50%; */
   left: 40%;
   transform: translate(-50%, -50%);
   width: 50px;
   height: 50px;
   background: #000;
   clip-path: polygon(50% 0, 0% 100%, 100% 100%);
   z-index: 10;
}

       .form-container {
   padding: 20px;
   width: 300px;
}

.close-button {
   position: absolute;
   right: 15px;
   top: 15px;
   width: 30px;
   height: 30px;
   font-size: 24px;
   cursor: pointer;
   border: none;
   /* background: none; */
   padding: 0;
   /* transition: transform 0.2s ease; */
} 

.close-button:hover {
   transform: scale(1.1);
}

.form-group {
   margin-bottom: 15px;
}

.form-group input {
   width: 100%;
   padding: 12px;
   border: 1px solid #ddd;
   border-radius: 6px;
   font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-group input:focus {
   outline: none;
   border-color: #000;
}

.submit-button {
   width: 100%; 
   padding: 15px;
   background: #000;
   color: white;
   border: none;
   border-radius: 6px;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.2s ease;
   margin-bottom: 10px;
}

.submit-button:hover {
   background: #333;
}

.submit-button:disabled {
   background: #666;
   cursor: not-allowed;
}

.no-thanks {
   width: 100%;
   padding: 15px;
   background: none;
   border: none;
   color: #666;
   font-size: 14px;
   cursor: pointer;
   text-decoration: underline;
   transition: color 0.2s ease;
}

.no-thanks:hover {
   color: #000;
}

@media (max-width:420px){

/* .banner-text {
    margin-top: 110%;
    margin-left: 35%;
} */

.banner-text{
    display: none;

}

 

.spin-to-win-modal{
    width: 100%;
}

.spin-to-win-container{
    overflow: scroll;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.wheel-pointer{
    left: 60%;
}
.spin-btn{
    margin-left: 46%;
margin-top: 22% !important;
}

.form-container{
    margin-top: 5%;
    text-align: center;
}
}

/* For Banner Slider */
    .slider-section {
        position: relative;
        overflow: hidden;
        height: 100vh;
    }

    .carousel-item5 {
        height: 100vh;
    }

    .carousel-item5 img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }