/* Reset and base styles */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Poppins', sans-serif;
 }

 /* ------- Header -------- */

 /* Top Header */
 .top-header {
     background: #000000;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 20px;
     overflow: hidden;
 }

 .frame-746 {
     display: flex;
     flex-direction: row;
     gap: 20px;
     align-items: center;
     justify-content: center;
     width: 100%;
     max-width: 1200px;
 }

 .frame-555 {
     display: flex;
     flex-direction: row;
     gap: 8px;
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
 }

 .summer-sale-text {
     color: #fafafa;
     text-align: left;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 14px;
     line-height: 21px;
     font-weight: 400;
     position: relative;
 }

 .shop-now {
     color: #fafafa;
     text-align: center;
     font-family: "Poppins-SemiBold", sans-serif;
     font-size: 14px;
     line-height: 24px;
     font-weight: 600;
     text-decoration: underline;
     position: relative;
     white-space: nowrap;
 }

 .frame-549 {
     display: flex;
     flex-direction: row;
     gap: 5px;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
 }

 .english {
     color: #fafafa;
     text-align: left;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 14px;
     line-height: 21px;
     font-weight: 400;
     position: relative;
 }

 .drop-down {
     color: #fafafa;
     font-size: 14px;
 }

 /* Main Header */
 .header {
     display: flex;
     flex-direction: row;
     gap: 20px;
     align-items: center;
     justify-content: space-between;
     padding: 20px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .frame-556 {
     display: flex;
     flex-direction: row;
     gap: 20px;
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
 }

 .logo {
     flex-shrink: 0;
     width: 118px;
     height: 24px;
     position: relative;
 }

 .exclusive {
     color: #000000;
     text-align: left;
     font-family: "Inter-Bold", sans-serif;
     font-size: 24px;
     line-height: 24px;
     letter-spacing: 0.03em;
     font-weight: 700;
     position: absolute;
     right: 0%;
     left: 0%;
     width: 100%;
     bottom: 0%;
     top: 0%;
     height: 100%;
 }

 .frame-554 {
     display: flex;
     flex-direction: row;
     gap: 24px;
     align-items: flex-start;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
 }

 .header2 {
     display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
 }

 .home,
 .contact,
 .about,
 .sign-up {
     color: #000000;
     text-align: center;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     position: relative;
     white-space: nowrap;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .home:hover,
 .contact:hover,
 .about:hover,
 .sign-up:hover {
     color: #555;
 }

 .header3,
 .header4,
 .header5 {
     flex-shrink: 0;
     height: 24px;
     position: relative;
     display: flex;
     align-items: center;
 }

 .header3 {
     width: 66px;
 }

 .header4 {
     width: 48px;
 }

 .header5 {
     width: 61px;
 }

 .under-line {
     opacity: 0.5;
     flex-shrink: 0;
     width: 48px;
     height: 0px;
     position: relative;
     border-bottom: 1px solid #000;
 }

 .frame-552 {
     display: flex;
     flex-direction: row;
     gap: 16px;
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
 }

 .search-component-set {
     background: #f5f5f5;
     border-radius: 4px;
     padding: 7px 12px 7px 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
 }

 .frame-550 {
     display: flex;
     flex-direction: row;
     gap: 10px;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
 }

 .what-are-you-looking-for {
     color: #000000;
     text-align: left;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 12px;
     line-height: 18px;
     font-weight: 400;
     opacity: 0.5;
     position: relative;
     white-space: nowrap;
 }

 .component-2 {
     color: #000000;
     font-size: 16px;
     opacity: 0.7;
 }

 .frame-551 {
     display: flex;
     flex-direction: row;
     gap: 16px;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
 }

 .wishlist-1,
 .cart-1-with-buy {
     color: #000000;
     font-size: 20px;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .wishlist-1:hover,
 .cart-1-with-buy:hover {
     color: #555;
 }

 .line-3 {
     width: 100%;
     height: 0px;
     position: relative;
     overflow: visible;
     border-bottom: 1px solid #E5E5E5;
 }

 /* Mobile Menu Toggle */
 .mobile-menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 24px;
     height: 18px;
     background: transparent;
     border: none;
     cursor: pointer;
 }

 .mobile-menu-toggle span {
     display: block;
     height: 2px;
     width: 100%;
     background-color: #000;
     border-radius: 2px;
     transition: all 0.3s ease;
 }

 .mobile-menu-toggle.active span:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
 }

 .mobile-menu-toggle.active span:nth-child(2) {
     opacity: 0;
 }

 .mobile-menu-toggle.active span:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
 }

 /* Responsive Styles */
 @media (max-width: 1024px) {
     .frame-746 {
         gap: 10px;
     }

     .summer-sale-text {
         font-size: 12px;
     }

     .frame-554 {
         gap: 16px;
     }
 }

 @media (max-width: 768px) {
     .top-header {
         height: auto;
         padding: 10px 20px;
     }

     .frame-746 {
         flex-direction: column;
         gap: 10px;
     }

     .frame-555 {
         justify-content: center;
     }

     .header {
         flex-wrap: wrap;
         gap: 15px;
     }

     .frame-556 {
         width: 100%;
         justify-content: space-between;
     }

     .frame-554 {
         display: none;
     }

     .mobile-menu-toggle {
         display: flex;
     }

     .frame-552 {
         width: 100%;
         justify-content: space-between;
     }

     .search-component-set {
         flex-grow: 1;
         max-width: 300px;
     }
 }

 @media (max-width: 480px) {
     .header {
         padding: 15px;
     }

     .summer-sale-text {
         font-size: 10px;
         text-align: center;
     }

     .shop-now {
         font-size: 12px;
     }

     .search-component-set {
         padding: 5px 10px;
     }

     .what-are-you-looking-for {
         font-size: 10px;
     }
 }

 /* Mobile Menu */
 .mobile-menu {
     display: none;
     position: absolute;
     left: 0;
     width: 100%;
     background: white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     z-index: 1000;
     padding: 20px;
 }

 .mobile-menu.active {
     display: block;
 }

 .mobile-nav {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .mobile-nav a {
     color: #000000;
     text-decoration: none;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 16px;
     padding: 10px 0;
     border-bottom: 1px solid #f0f0f0;
     transition: color 0.3s ease;
 }

 .mobile-nav a:hover {
     color: #555;
 }


 .frame-930 {
     max-width: 1440px;
     margin: 0 auto;
     height: auto;
     position: relative;
     overflow: hidden;
     background-color: white;
     padding: 40px 0;
 }

 .container {
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding: 0 20px;
 }

 @media (min-width: 768px) {
     .container {
         flex-direction: row;
         padding: 0 40px;
     }
 }

 @media (min-width: 1024px) {
     .container {
         padding: 0 135px;
     }
 }

 .frame-768 {
     display: flex;
     flex-direction: column;
     gap: 16px;
     align-items: flex-start;
     justify-content: flex-start;
     width: 100%;
     padding: 10px 0;
 }

 @media (min-width: 768px) {
     .frame-768 {
         width: 30%;
     }
 }

 .frame-558,
 .frame-559 {
     display: flex;
     flex-direction: row;
     gap: 10px;
     align-items: center;
     justify-content: flex-start;
     width: 100%;
     position: relative;
 }

 @media (min-width: 768px) {

     .frame-558,
     .frame-559 {
         gap: 51px;
     }
 }

 .woman-s-fashion,
 .men-s-fashion,
 .electronics,
 .home-lifestyle,
 .medicine,
 .sports-outdoor,
 .baby-s-toys,
 .groceries-pets,
 .health-beauty {
     color: #000000;
     text-align: left;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     position: relative;
     cursor: pointer;
     transition: color 0.3s;
 }

 .woman-s-fashion:hover,
 .men-s-fashion:hover,
 .electronics:hover,
 .home-lifestyle:hover,
 .medicine:hover,
 .sports-outdoor:hover,
 .baby-s-toys:hover,
 .groceries-pets:hover,
 .health-beauty:hover {
     color: #db4444;
 }

 .drop-down,
 .drop-down2 {
     color: #000000;
     font-size: 14px;
     transition: transform 0.3s;
     cursor: pointer;
 }

 .frame-558:hover .drop-down,
 .frame-559:hover .drop-down2 {
     transform: rotate(180deg);
 }

 /* Dropdown styles */
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: white;
     min-width: 200px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 100;
     top: 100%;
     left: 0;
     margin-top: 5px;
     border-radius: 4px;
     padding: 10px 0;
 }

 .dropdown-content a {
     color: #000000;
     padding: 8px 16px;
     text-decoration: none;
     display: block;
     font-size: 14px;
     transition: background-color 0.3s;
 }

 .dropdown-content a:hover {
     background-color: #f5f5f5;
     color: #db4444;
 }

 .frame-558:hover .dropdown-content,
 .frame-559:hover .dropdown-content {
     display: block;
 }

 .slider-container {
     width: 100%;
     position: relative;
     overflow: hidden;
     border-radius: 8px;
 }

 @media (min-width: 768px) {
     .slider-container {
         width: 70%;
     }
 }

 .frame-560 {
     background: #000000;
     width: 100%;
     height: 200px;
     position: relative;
     overflow: hidden;
 }

 @media (min-width: 768px) {
     .frame-560 {
         height: 364px;
     }
 }

 .slider {
     display: flex;
     transition: transform 0.5s ease-in-out;
     height: 100%;
 }

 .slide {
     min-width: 100%;
     height: 100%;
     position: relative;
 }

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

 .slide-content {
     position: absolute;
     bottom: 20px;
     left: 20px;
     color: white;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 10px 15px;
     border-radius: 4px;
 }

 .slide-content h3 {
     margin-bottom: 5px;
     font-size: 18px;
 }

 .slide-content p {
     font-size: 14px;
 }

 .frame-883 {
     display: flex;
     flex-direction: row;
     gap: 12px;
     align-items: center;
     justify-content: center;
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
 }

 .ellipse-7,
 .ellipse-2,
 .ellipse-3,
 .ellipse-6 {
     background: #ffffff;
     border-radius: 50%;
     opacity: 0.5;
     width: 12px;
     height: 12px;
     cursor: pointer;
     transition: all 0.3s;
 }

 .ellipse-7.active,
 .ellipse-2.active,
 .ellipse-3.active,
 .ellipse-6.active {
     opacity: 1;
 }

 .group-1000005940 {
     position: relative;
     width: 14px;
     height: 14px;
     cursor: pointer;
 }

 .ellipse-4 {
     background: #db4444;
     border-radius: 50%;
     width: 10px;
     height: 10px;
     position: absolute;
     left: 2px;
     top: 2px;
 }

 .ellipse-5 {
     border-radius: 50%;
     border: 2px solid #ffffff;
     width: 14px;
     height: 14px;
     position: absolute;
     left: 0;
     top: 0;
 }

 .line-4 {
     border-top: 0.5px solid rgba(0, 0, 0, 0.3);
     width: 100%;
     margin: 20px 0;
 }

 @media (min-width: 768px) {
     .line-4 {
         width: 384px;
         margin: 0;
         position: absolute;
         left: 368px;
         top: 18px;
         transform: rotate(90deg);
     }
 }



 /* --- Today's special  Section ----  */

 .container-1 {
     max-width: 1200px;
     margin: 0 auto;
     padding: 40px 0;
 }

 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 40px;
     flex-wrap: wrap;
     gap: 20px;
 }

 .section-header-2 {
     display: flex;
     gap: 40px;
 }

 .section-title {
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .title-tag {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .red-rectangle {
     width: 20px;
     height: 40px;
     background: #db4444;
     border-radius: 4px;
 }

 .tag-text {
     color: #db4444;
     font-size: 16px;
     font-weight: 600;
 }

 .main-title {
     color: #000;
     font-size: 36px;
     font-weight: 600;
     letter-spacing: 0.04em;
 }

 .main-title-1 {
     color: #000;
     font-size: 20px;
     font-weight: 400;
     letter-spacing: 0.04em;
 }

 .countdown-timer {
     display: flex;
     gap: 20px;
     align-items: flex-end;
 }

 .timer-unit {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
 }

 .timer-value {
     font-size: 32px;
     font-weight: 700;
     letter-spacing: 0.04em;
 }

 .timer-label {
     font-size: 12px;
     font-weight: 500;
 }

 .timer-separator {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 8px;
 }

 .timer-dot {
     width: 4px;
     height: 4px;
     background: #e07575;
     border-radius: 50%;
 }

 .navigation-buttons {
     display: flex;
     gap: 8px;
 }

 .nav-btn {
     width: 46px;
     height: 46px;
     background: #f5f5f5;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.3s;
 }

 .nav-btn:hover {
     background: #e0e0e0;
 }

 .products-slider {
     position: relative;
     overflow: hidden;
     margin-bottom: 40px;
 }

 .products-container {
     display: flex;
     gap: 30px;
     transition: transform 0.5s ease;
     padding: 10px 5px;
 }

 .product-card {
     flex: 0 0 calc(25% - 22.5px);
     max-width: calc(25% - 22.5px);
     display: flex;
     flex-direction: column;
     gap: 16px;
     position: relative;
 }

 .product-image-container {
     background: #f5f5f5;
     border-radius: 4px;
     height: 250px;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .discount-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background: #db4444;
     color: #fafafa;
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 12px;
     z-index: 2;
 }

 .discount-badge-1 {
     position: absolute;
     top: 12px;
     left: 12px;
     background: #7bdb44;
     color: #fafafa;
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 12px;
     z-index: 2;
 }

 .product-actions {
     position: absolute;
     top: 12px;
     right: 12px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     z-index: 2;
 }

 .action-btn {
     width: 34px;
     height: 34px;
     background: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.3s;
 }

 .action-btn:hover {
     background: #f0f0f0;
 }

 .product-image {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     transition: transform 0.3s ease;
 }

 .product-info {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .product-name {
     font-size: 16px;
     font-weight: 500;
     color: #000;
 }

 .product-pricing {
     display: flex;
     gap: 12px;
     align-items: center;
 }

 .current-price {
     color: #db4444;
     font-size: 16px;
     font-weight: 500;
 }

 .original-price {
     color: #000;
     font-size: 16px;
     font-weight: 500;
     text-decoration: line-through;
     opacity: 0.5;
 }

 .product-rating {
     display: flex;
     gap: 8px;
     align-items: center;
 }

 .stars {
     display: flex;
     gap: 2px;
 }

 .star {
     color: #FFAD33;
 }

 .rating-count {
     font-size: 14px;
     font-weight: 600;
     opacity: 0.5;
 }

 .view-all-btn {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }

 .btn {
     background: #db4444;
     color: #fafafa;
     border: none;
     border-radius: 4px;
     padding: 16px 48px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: background 0.3s;
 }
 
 .btn-1{
    background: #fff;
    color: #000;
        border: 2px solid #000;
    border-radius: 4px;
     padding: 16px 48px;
     font-size: 16px;
     font-weight: 500;
      transition: background 0.3s;
 }

 .btn-1:hover{
    background:#db4444;
    color: #fff;
    border: 2px solid #db4444;
 }

 .btn:hover {
     background: #c23333;
 }

 /* Add to Cart Button Styles */
 .add-to-cart-btn {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #000;
     color: #fff;
     border: none;
     padding: 12px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transform: translateY(100%);
     transition: transform 0.3s ease;
     z-index: 3;
 }

 .product-card:hover .add-to-cart-btn {
     transform: translateY(0);
 }

 .product-card:hover .product-image {
     transform: scale(1.05);
 }

 /* Responsive styles */
 @media (max-width: 1200px) {
     .container-1 {
         padding: 40px 20px;
     }

     .product-card {
         flex: 0 0 calc(33.333% - 20px);
         max-width: calc(33.333% - 20px);
     }
 }

 @media (max-width: 992px) {
     .product-card {
         flex: 0 0 calc(50% - 15px);
         max-width: calc(50% - 15px);
     }

     .section-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .countdown-timer {
         margin-top: 20px;
     }
 }

 @media (max-width: 768px) {
     .product-card {
         flex: 0 0 100%;
         max-width: 100%;
     }

     .main-title {
         font-size: 28px;
     }

     .timer-value {
         font-size: 24px;
     }
 }

 @media (max-width: 576px) {
     .countdown-timer {
         gap: 10px;
     }

     .timer-value {
         font-size: 20px;
     }

     .timer-label {
         font-size: 10px;
     }

     .timer-separator {
         gap: 4px;
     }

     .nav-btn {
         width: 40px;
         height: 40px;
     }
 }

 /* ---- Categories section ---- */

 .frame-932 {
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
     overflow: hidden;
     padding: 40px 0;
 }

 .line-7 {
     border-style: solid;
     border-color: #000000;
     border-width: 0.5px 0 0 0;
     opacity: 0.3;
     width: 100%;
     height: 0px;
     margin-top: 70px;
 }

 .frame-730 {
     display: flex;
     flex-direction: column;
     gap: 60px;
     align-items: flex-start;
     justify-content: flex-start;
     width: 100%;
 }

 .frame-729 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-end;
     width: 100%;
     flex-wrap: wrap;
     gap: 20px;
 }

 .frame-624 {
     display: flex;
     flex-direction: column;
     gap: 20px;
     align-items: flex-start;
     justify-content: flex-start;
 }

 .frame-623 {
     display: flex;
     flex-direction: row;
     gap: 16px;
     align-items: center;
     justify-content: flex-start;
 }

 .rectangle-18 {
     flex-shrink: 0;
     width: 20px;
     height: 40px;
     position: relative;
 }

 .rectangle-17 {
     background: var(--secondary-2, #db4444);
     border-radius: 4px;
     width: 100%;
     height: 100%;
     position: absolute;
     right: 0%;
     left: 0%;
     bottom: 0%;
     top: 0%;
 }

 .categories {
     color: var(--secondary-2, #db4444);
     text-align: left;
     font-family: var(--title-16px-semibold-font-family, "Poppins-SemiBold", sans-serif);
     font-size: var(--title-16px-semibold-font-size, 16px);
     line-height: var(--title-16px-semibold-line-height, 20px);
     font-weight: var(--title-16px-semibold-font-weight, 600);
     position: relative;
 }

 .browse-by-category {
     color: var(--text2, #000000);
     text-align: left;
     font-family: var(--heading-36px-semibold-font-family, "Inter-SemiBold", sans-serif);
     font-size: var(--heading-36px-semibold-font-size, 36px);
     line-height: var(--heading-36px-semibold-line-height, 48px);
     letter-spacing: var(--heading-36px-semibold-letter-spacing, 0.04em);
     font-weight: var(--heading-36px-semibold-font-weight, 600);
     position: relative;
 }

 .frame-615 {
     display: flex;
     flex-direction: row;
     gap: 8px;
     align-items: flex-start;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
 }

 .fill-with-left-arrow,
 .fill-with-right-arrow {
     flex-shrink: 0;
     width: 46px;
     height: 46px;
     position: relative;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .fill-with-left-arrow:hover,
 .fill-with-right-arrow:hover {
     transform: scale(1.05);
 }

 .ellipse-15,
 .ellipse-16 {
     background: var(--secondary, #f5f5f5);
     border-radius: 50%;
     width: 100%;
     height: 100%;
     position: absolute;
     right: 0%;
     left: 0%;
     bottom: 0%;
     top: 0%;
     transition: all 0.3s ease;
 }

 .fill-with-left-arrow:hover .ellipse-15,
 .fill-with-right-arrow:hover .ellipse-16 {
     background: #e0e0e0;
 }

 .icons-arrow-left,
 .icons-arrow-right {
     width: 52.17%;
     height: 52.17%;
     position: absolute;
     right: 23.91%;
     left: 23.91%;
     bottom: 23.91%;
     top: 23.91%;
     color: #000;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
 }

 .slider-container {
     width: 100%;
     overflow: hidden;
     position: relative;
 }

 .frame-597 {
     display: flex;
     gap: 30px;
     width: max-content;
     transition: transform 0.5s ease;
 }

 .category-phone {
     border-radius: 4px;
     border-style: solid;
     border-color: rgba(0, 0, 0, 0.3);
     border-width: 1px;
     flex-shrink: 0;
     width: 170px;
     height: 145px;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }

 .category-phone:hover {
     background-color: #db4444;
     border-color: #db4444;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .category-phone:hover .phones,
 .category-phone:hover .computers,
 .category-phone:hover .smart-watch,
 .category-phone:hover .camera,
 .category-phone:hover .head-phones,
 .category-phone:hover .gaming,
 .category-phone:hover .tablets,
 .category-phone:hover .tv,
 .category-phone:hover .audio,
 .category-phone:hover .wearables,
 .category-phone:hover .printers,
 .category-phone:hover .accessories {
     color: white;
 }

 .category-phone:hover .category-icon {
     color: white;
     transform: scale(1.1);
 }

 .phones,
 .computers,
 .smart-watch,
 .camera,
 .head-phones,
 .gaming,
 .tablets,
 .tv,
 .audio,
 .wearables,
 .printers,
 .accessories {
     color: var(--text2, #000000);
     text-align: center;
     font-family: var(--title-16px-regular-font-family, "Poppins-Regular", sans-serif);
     font-size: var(--title-16px-regular-font-size, 16px);
     line-height: var(--title-16px-regular-line-height, 24px);
     font-weight: var(--title-16px-regular-font-weight, 400);
     margin-top: 10px;
     transition: all 0.3s ease;
 }

 .category-icon {
     font-size: 56px;
     color: #000;
     transition: all 0.3s ease;
     margin-bottom: 10px;
 }

 @media (max-width: 1200px) {
     .frame-932 {
         padding: 40px 20px;
     }
 }

 /* Media Queries for Responsiveness */
 @media (max-width: 768px) {
     .frame-729 {
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
     }

     .browse-by-category {
         font-size: 28px;
         line-height: 36px;
     }

     .category-phone {
         width: 140px;
     }
 }

 @media (max-width: 480px) {
     .frame-730 {
         gap: 40px;
     }

     .browse-by-category {
         font-size: 24px;
         line-height: 32px;
     }

     .category-phone {
         width: 120px;
         height: 120px;
     }

     .category-icon {
         font-size: 40px;
     }
 }

 /* Categories Post Section */

 .frame-933 {
     height: 553px;
     position: relative;
     overflow: hidden;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
 }

 .frame-600 {
     background: #000000;
     width: 100%;
     height: 500px;
     position: absolute;
     left: 0;
     top: 25px;
     overflow: hidden;
 }

 .ellipse-23 {
     background: #d9d9d9;
     border-radius: 50%;
     opacity: 0.3;
     width: 504px;
     height: 500px;
     position: absolute;
     left: 71%;
     top: 0px;
     filter: blur(100px);
     transform: translateX(-50%);
 }

 .enhance-your-music-experience {
     color: #fafafa;
     text-align: left;
     font-family: "Inter-SemiBold", sans-serif;
     font-size: 48px;
     line-height: 60px;
     letter-spacing: 0.04em;
     font-weight: 600;
     position: absolute;
     left: 56px;
     top: 121px;
     width: 443px;
     z-index: 2;
 }

 .frame-601 {
     display: flex;
     flex-direction: row;
     gap: 24px;
     align-items: flex-start;
     justify-content: flex-start;
     position: absolute;
     left: 56px;
     top: 273px;
     z-index: 2;
 }

 .flash-sell-timer {
     flex-shrink: 0;
     width: 62px;
     height: 62px;
     position: relative;
 }

 .ellipse-20,
 .ellipse-19,
 .ellipse-21,
 .ellipse-22 {
     background: #ffffff;
     border-radius: 50%;
     width: 100%;
     height: 100%;
     position: absolute;
     right: 0%;
     left: 0%;
     bottom: 0%;
     top: 0%;
 }

 .frame-583,
 .frame-580,
 .frame-584,
 .frame-585 {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     position: absolute;
     bottom: 22.58%;
     top: 22.58%;
 }

 .frame-583 {
     width: 51.61%;
     height: 54.84%;
     right: 24.19%;
     left: 24.19%;
 }

 .frame-580 {
     width: 45.16%;
     height: 54.84%;
     right: 27.42%;
     left: 27.42%;
 }

 .frame-584 {
     width: 67.74%;
     height: 54.84%;
     right: 16.13%;
     left: 16.13%;
 }

 .frame-585 {
     width: 77.42%;
     height: 54.84%;
     right: 11.29%;
     left: 11.29%;
 }

 .timer-number {
     color: #000000;
     text-align: left;
     font-family: "Poppins-SemiBold", sans-serif;
     font-size: 16px;
     line-height: 20px;
     font-weight: 600;
     position: relative;
 }

 .timer-label {
     margin: -4px 0 0 0;
     color: #000000;
     text-align: left;
     font-family: "Poppins-Regular", sans-serif;
     font-size: 11px;
     line-height: 18px;
     font-weight: 400;
     position: relative;
 }

 .hours {
     width: 32px;
 }

 .days {
     width: 28px;
 }

 .minutes {
     width: 43px;
 }

 .seconds {
     width: 48px;
 }

 .button {
     background: #00ff66;
     border-radius: 4px;
     padding: 16px 48px;
     display: flex;
     flex-direction: row;
     gap: 10px;
     align-items: center;
     justify-content: center;
     position: absolute;
     left: 56px;
     top: 375px;
     z-index: 2;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .button:hover {
     background: #00cc52;
     transform: translateY(-2px);
 }

 .view-all-products {
     color: #fafafa;
     text-align: left;
     font-family: "Poppins-Medium", sans-serif;
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
     position: relative;
 }

 .view-all-products a{
    color: #fafafa;
    text-decoration: none;
 }

 .categories-1 {
     color: #00ff66;
     text-align: left;
     font-family: "Poppins-SemiBold", sans-serif;
     font-size: 16px;
     line-height: 20px;
     font-weight: 600;
     position: absolute;
     left: 56px;
     top: 69px;
     z-index: 2;
 }

 .frame-694 {
     width: 600px;
     height: 420px;
     position: absolute;
     right: 0;
     top: 37px;
     overflow: hidden;
 }

 .jbl-boombox-2-hero-020-x-1-1-1 {
     width: 568px;
     height: 330px;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) scaleX(1);
     object-fit: cover;
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .frame-933 {
         height: 500px;
     }

     .frame-600 {
         height: 450px;
     }

     .ellipse-23 {
         width: 450px;
         height: 450px;
     }

     .enhance-your-music-experience {
         font-size: 42px;
         line-height: 52px;
         width: 400px;
         top: 100px;
     }

     .frame-601 {
         top: 250px;
     }

     .button {
         top: 340px;
     }

     .frame-694 {
         width: 500px;
         height: 350px;
     }

     .jbl-boombox-2-hero-020-x-1-1-1 {
         width: 480px;
         height: 280px;
     }
 }

 @media (max-width: 992px) {
     .frame-933 {
         height: 450px;
     }

     .frame-600 {
         height: 400px;
         top: 25px;
     }

     .ellipse-23 {
         width: 400px;
         height: 400px;
     }

     .enhance-your-music-experience {
         font-size: 36px;
         line-height: 46px;
         width: 350px;
         top: 90px;
         left: 40px;
     }

     .frame-601 {
         left: 40px;
         top: 220px;
     }

     .button {
         left: 40px;
         top: 310px;
         padding: 14px 40px;
     }

     .categories-1 {
         left: 40px;
         top: 50px;
     }

     .frame-694 {
         width: 400px;
         height: 300px;
         top: 50px;
     }

     .jbl-boombox-2-hero-020-x-1-1-1 {
         width: 380px;
         height: 240px;
     }
 }

 @media (max-width: 768px) {
     .frame-933 {
         height: 700px;
     }

     .frame-600 {
         height: 650px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         position: relative;
         top: 0;
         padding: 40px 20px;
     }

     .ellipse-23 {
         display: none;
     }

     .enhance-your-music-experience {
         position: relative;
         left: 0;
         top: 0;
         text-align: center;
         width: 100%;
         margin-bottom: 30px;
         font-size: 32px;
         line-height: 42px;
     }

     .frame-601 {
         position: relative;
         left: 0;
         top: 0;
         justify-content: center;
         margin-bottom: 30px;
     }

     .button {
         position: relative;
         left: 0;
         top: 0;
         margin-bottom: 20px;
     }

     .categories-1 {
         position: relative;
         left: 0;
         top: 0;
         margin-bottom: 20px;
         text-align: center;
         width: 100%;
     }

     .frame-694 {
         position: relative;
         width: 100%;
         height: 250px;
         top: 0;
         margin-top: 20px;
     }

     .jbl-boombox-2-hero-020-x-1-1-1 {
         width: 300px;
         height: 180px;
     }
 }

 @media (max-width: 576px) {
     .frame-933 {
         height: 650px;
     }

     .frame-600 {
         height: 600px;
         padding: 30px 15px;
     }

     .enhance-your-music-experience {
         font-size: 28px;
         line-height: 36px;
         margin-bottom: 25px;
     }

     .frame-601 {
         gap: 15px;
         margin-bottom: 25px;
     }

     .flash-sell-timer {
         width: 55px;
         height: 55px;
     }

     .timer-number {
         font-size: 14px;
     }

     .timer-label {
         font-size: 10px;
     }

     .button {
         padding: 12px 35px;
     }

     .view-all-products {
         font-size: 14px;
     }

     .frame-694 {
         height: 200px;
     }

     .jbl-boombox-2-hero-020-x-1-1-1 {
         width: 250px;
         height: 150px;
     }
 }

 @media (max-width: 400px) {
     .frame-933 {
         height: 600px;
     }

     .frame-600 {
         height: 550px;
     }

     .enhance-your-music-experience {
         font-size: 24px;
         line-height: 32px;
     }

     .frame-601 {
         gap: 10px;
     }

     .flash-sell-timer {
         width: 50px;
         height: 50px;
     }

     .button {
         padding: 10px 30px;
     }

     .frame-694 {
         height: 180px;
     }

     .jbl-boombox-2-hero-020-x-1-1-1 {
         width: 220px;
         height: 130px;
     }
 }


 /* ----- Featured Section ------ */

 .frame-934 {
     max-width: 1200px;
     margin: 0 auto;
     padding: 55px 20px;
 }

 .frame-740 {
     display: flex;
     flex-direction: column;
     gap: 60px;
 }

 .frame-622 {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .frame-619 {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .rectangle-18 {
     width: 20px;
     height: 40px;
     position: relative;
 }

 .rectangle-17 {
     background: #db4444;
     border-radius: 4px;
     width: 100%;
     height: 100%;
 }

  .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #db4444;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .cart-icon-container {
            position: relative;
            display: inline-block;
        }

 .featured {
     color: #db4444;
     font-weight: 600;
     font-size: 16px;
 }

 .new-arrival {
     color: #000000;
     font-weight: 600;
     font-size: 36px;
     letter-spacing: 0.04em;
 }

 .frame-739 {
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
 }

 .frame-684,
 .frame-685,
 .frame-686,
 .frame-687 {
     border-radius: 4px;
     overflow: hidden;
     position: relative;
     background: #000000;
     color: #fafafa;
 }

 .frame-684 {
     height: 600px;
 }

 .frame-685,
 .frame-686,
 .frame-687 {
     height: 284px;
 }

 .product-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: all 0.5s ease;
 }

 /* Hover effect for PlayStation 5 */
 .frame-684:hover .ps-5-image {
     transform: translate(-50%, -50%) scale(1.05);
     filter: brightness(1.1);
 }

 /* Hover effect for Women's Collection */
 .frame-685:hover .woman-image {
     transform: scale(1.1);
     filter: brightness(1.1);
 }

 /* Hover effect for Speakers */
 .frame-686:hover .speaker-image {
     transform: scale(1.1);
     filter: brightness(1.1);
 }

 .frame-686:hover .ellipse-24 {
     transform: scale(1.1);
     opacity: 0.5;
 }

 /* Hover effect for Perfume */
 .frame-687:hover .perfume-image {
     transform: scale(1.1);
     filter: brightness(1.1);
 }

 .frame-687:hover .ellipse-242 {
     transform: scale(1.1);
     opacity: 0.5;
 }

 .frame-693,
 .frame-692,
 .frame-691 {
     position: absolute;
     display: flex;
     flex-direction: column;
     gap: 16px;
     z-index: 2;
 }

 .frame-693 {
     left: 32px;
     bottom: 32px;
 }

 .frame-692 {
     left: 24px;
     bottom: 24px;
 }

 .frame-691 {
     left: 24px;
     bottom: 24px;
 }

 .frame-689,
 .frame-690 {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .frame-690 {
     gap: 8px;
 }

 .play-station-5,
 .women-s-collections,
 .speakers,
 .perfume {
     font-weight: 600;
     font-size: 24px;
     letter-spacing: 0.03em;
 }

 .black-and-white-version-of-the-ps-5-coming-out-on-sale,
 .featured-woman-collections-that-give-you-another-vibe,
 .amazon-wireless-speakers,
 .gucci-intense-oud-edp {
     font-size: 14px;
     line-height: 21px;
     max-width: 242px;
 }

 .frame-688 {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .shop-now-1 {
     font-weight: 500;
     font-size: 16px;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .shop-now-1:hover {
     color: #db4444;
 }

 .under-line,
 .under-line2,
 .under-line3,
 .under-line4 {
     width: 81px;
     height: 1px;
     background-color: #fafafa;
     transition: background-color 0.3s ease, width 0.3s ease;
 }

 .shop-now-1:hover+.under-line,
 .shop-now-1:hover+.under-line2,
 .shop-now-1:hover+.under-line3,
 .shop-now-1:hover+.under-line4 {
     background-color: #db4444;
     width: 100px;
 }

 .frame-738 {
     display: grid;
     grid-template-columns: 1fr;
     gap: 32px;
 }

 .frame-737 {
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
 }

 /* Image positioning adjustments */
 .ps-5-image {
     position: absolute;
     width: 100%;
     height: auto;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .woman-image {
     position: absolute;
     width: 100%;
     height: auto;
     opacity: 0.3;
     transition: transform 0.5s ease, opacity 0.5s ease;
 }

 .speaker-container,
 .perfume-container {
     position: relative;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .ellipse-24,
 .ellipse-242 {
     position: absolute;
     width: 100%;
     height: auto;
     opacity: 0.3;
     transition: transform 0.5s ease, opacity 0.5s ease;
 }

 .speaker-image,
 .perfume-image {
     position: relative;
     width: 100%;
     height: auto;
     z-index: 1;
     transition: transform 0.5s ease, filter 0.5s ease;
 }


 @media (max-width: 1200px) {
     .frame-934 {
         padding: 40px 20px;
     }

 }

 /* Responsive adjustments */
 @media (min-width: 768px) {
     .frame-739 {
         grid-template-columns: 1fr 1fr;
     }

     .frame-738 {
         grid-template-rows: 1fr 1fr;
     }

     .frame-737 {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (min-width: 1024px) {
     .frame-739 {
         grid-template-columns: 570px 1fr;
     }

     .frame-738 {
         grid-template-columns: 1fr;
         grid-template-rows: 284px 284px;
     }

     .frame-737 {
         grid-template-columns: 1fr 1fr;
     }

     .frame-684 {
         grid-row: span 2;
     }
 }

 @media (max-width: 480px) {
     .frame-934 {
         padding: 30px 15px;
     }

     .frame-740 {
         gap: 40px;
     }

     .new-arrival {
         font-size: 28px;
     }

     .frame-684 {
         height: 400px;
     }

     .frame-685,
     .frame-686,
     .frame-687 {
         height: 200px;
     }

     .play-station-5,
     .women-s-collections,
     .speakers,
     .perfume {
         font-size: 20px;
     }

     .black-and-white-version-of-the-ps-5-coming-out-on-sale,
     .featured-woman-collections-that-give-you-another-vibe,
     .amazon-wireless-speakers,
     .gucci-intense-oud-edp {
         font-size: 12px;
         max-width: 180px;
     }
 }

/* ----------- Footer Top Section ----------- */

 .frame-935 {
            max-width: 1200px;
     margin: 0 auto;
     padding: 40px 0px;
        }
        
        .frame-702 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 60px;
            align-items: flex-start;
        }
        
        .frame-701,
        .frame-7022,
        .frame-704 {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;
            min-width: 250px;
            max-width: 300px;
            gap: 24px;
        }
        
        .services {
            position: relative;
            width: 80px;
            height: 80px;
            margin-bottom: 24px;
        }
        
        .group-1000005938 {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        
        .ellipse-6 {
            background: #2f2e30;
            border-radius: 50%;
            opacity: 0.3;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        
        .ellipse-5 {
            background: #000000;
            border-radius: 50%;
            width: 72.5%;
            height: 72.5%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .icon-delivery,
        .icon-customer-service,
        .icon-secure {
            color: white;
            font-size: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .frame-695,
        .frame-696,
        .frame-697 {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
        }
        
        .free-and-fast-delivery,
        ._24-7-customer-service,
        .money-back-guarantee {
            color: #000000;
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
        }
        
        .free-delivery-for-all-orders-over-140,
        .friendly-24-7-customer-support,
        .we-reurn-money-within-30-days {
            color: #000000;
            font-size: 14px;
            font-weight: 400;
            line-height: 21px;
            max-width: 262px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 992px) {
            .frame-702 {
                gap: 40px;
            }
        }
        
        @media (max-width: 768px) {
            .frame-702 {
                flex-direction: column;
                align-items: center;
                gap: 50px;
            }
            
            .frame-701,
            .frame-7022,
            .frame-704 {
                max-width: 100%;
                width: 100%;
            }
            
            .free-delivery-for-all-orders-over-140,
            .friendly-24-7-customer-support,
            .we-reurn-money-within-30-days {
                max-width: 80%;
            }
        }
        
        @media (max-width: 480px) {
            .frame-935 {
                padding: 30px 15px;
            }
            
            .free-and-fast-delivery,
            ._24-7-customer-service,
            .money-back-guarantee {
                font-size: 18px;
                line-height: 24px;
            }
            
            .free-delivery-for-all-orders-over-140,
            .friendly-24-7-customer-support,
            .we-reurn-money-within-30-days {
                font-size: 13px;
                line-height: 18px;
                max-width: 90%;
            }
        }


        .footer {
            background: var(--button, #000000);
            position: relative;
            overflow: hidden;
            width: 100%;
            padding: 40px 0 20px;
        }
        
        .frame-643 {
            opacity: 0.4;
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: center;
            justify-content: flex-start;
            margin-top: 40px;
        }
        
        .under-line {
            opacity: 0.5;
            width: 90%;
            height: 1px;
            background-color: #ffffff;
            margin: 0 auto;
        }
        
        .frame-67 {
            opacity: 0.6;
            display: flex;
            flex-direction: row;
            gap: 12px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }
        
        .frame-66 {
            display: flex;
            flex-direction: row;
            gap: 6px;
            align-items: center;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .icon-copyright {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            position: relative;
            overflow: hidden;
            color: white;
        }
        
        .copyright-rimel-2022-all-right-reserved {
            color: var(--primary, #ffffff);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
        }
        
        .frame-743 {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: flex-start;
            justify-content: space-between;
            padding: 0 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-section {
            flex: 1;
            min-width: 200px;
            margin-bottom: 20px;
        }
        
        .frame-717 {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .frame-716 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .frame-715 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .logo {
            flex-shrink: 0;
            width: 118px;
            height: 24px;
            position: relative;
        }
        
        .exclusive-1 {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--heading-24px-bold-font-family, "Inter", sans-serif);
            font-size: var(--heading-24px-bold-font-size, 24px);
            line-height: var(--heading-24px-bold-line-height, 24px);
            letter-spacing: var(--heading-24px-bold-letter-spacing, 0.03em);
            font-weight: var(--heading-24px-bold-font-weight, 700);
            position: absolute;
            right: 0%;
            left: 0%;
            width: 100%;
            bottom: 0%;
            top: 0%;
            height: 100%;
        }
        
        .subscribe {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-20px-medium-font-family, "Poppins", sans-serif);
            font-size: var(--title-20px-medium-font-size, 20px);
            line-height: var(--title-20px-medium-line-height, 28px);
            font-weight: var(--title-20px-medium-font-weight, 500);
            position: relative;
        }
        
        .get-10-off-your-first-order {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
        }
        
        .send-mail {
            border-radius: 4px;
            border-style: solid;
            border-color: var(--text, #fafafa);
            border-width: 1.5px;
            padding: 12px 16px;
            display: flex;
            flex-direction: row;
            gap: 32px;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            width: 100%;
            max-width: 300px;
            position: relative;
        }
        
        .enter-your-email {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            opacity: 0.4;
            position: relative;
            flex: 1;
        }
        
        .icon-send {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            position: relative;
            color: white;
            cursor: pointer;
        }
        
        .frame-713 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .support {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-20px-medium-font-family, "Poppins", sans-serif);
            font-size: var(--title-20px-medium-font-size, 20px);
            line-height: var(--title-20px-medium-line-height, 28px);
            font-weight: var(--title-20px-medium-font-weight, 500);
            position: relative;
        }
        
        .frame-712 {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        ._111-bijoy-sarani-dhaka-dh-1515-bangladesh {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            width: 175px;
        }
        
        .exclusive-gmail-com {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
        }
        
        ._88015-88888-9999 {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
        }
        
        .frame-711 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .account {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-20px-medium-font-family, "Poppins", sans-serif);
            font-size: var(--title-20px-medium-font-size, 20px);
            line-height: var(--title-20px-medium-line-height, 28px);
            font-weight: var(--title-20px-medium-font-weight, 500);
            position: relative;
        }
        
        .frame-710 {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .my-account {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .login-register {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .cart {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .wishlist {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .shop {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .frame-709 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .quick-link {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-20px-medium-font-family, "Poppins", sans-serif);
            font-size: var(--title-20px-medium-font-size, 20px);
            line-height: var(--title-20px-medium-line-height, 28px);
            font-weight: var(--title-20px-medium-font-weight, 500);
            position: relative;
        }
        
        .frame-708 {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .privacy-policy {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .terms-of-use {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .faq {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .contact-1 {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
            line-height: var(--title-16px-regular-line-height, 24px);
            font-weight: var(--title-16px-regular-font-weight, 400);
            position: relative;
            cursor: pointer;
        }
        
        .frame-742 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .frame-721 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .download-app {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-20px-medium-font-family, "Poppins", sans-serif);
            font-size: var(--title-20px-medium-font-size, 20px);
            line-height: var(--title-20px-medium-line-height, 28px);
            font-weight: var(--title-20px-medium-font-weight, 500);
            position: relative;
        }
        
        .frame-720 {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .save-3-with-app-new-user-only {
            color: var(--text, #fafafa);
            text-align: left;
            font-family: var(--title-12px-medium-font-family, "Poppins", sans-serif);
            font-size: var(--title-12px-medium-font-size, 12px);
            line-height: var(--title-12px-medium-line-height, 18px);
            font-weight: var(--title-12px-medium-font-weight, 500);
            opacity: 0.7;
            position: relative;
        }
        
        .frame-719 {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .qr-code {
            background: #000000;
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            position: relative;
            overflow: hidden;
            border: 2.5px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }
        
        .frame-718 {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .google-play {
            flex-shrink: 0;
            width: 110px;
            height: 40px;
            position: relative;
            background-color: white;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
        }
        
        .app-store {
            background: #000000;
            flex-shrink: 0;
            width: 110px;
            height: 40px;
            position: relative;
            overflow: hidden;
            border: 0.6px solid white;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
        }
        
        .frame-741 {
            display: flex;
            flex-direction: row;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
        }
        
        .icon-facebook, .icon-twitter, .icon-instagram, .icon-linkedin {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            position: relative;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        
        /* Added styles for functionality */
        .footer-link {
            cursor: pointer;
            transition: opacity 0.3s;
        }
        
        .footer-link:hover {
            color: #db4444;
        }
        
        .email-input {
            background: transparent;
            border: none;
            outline: none;
            color: white;
            width: 100%;
            font-family: var(--title-16px-regular-font-family, "Poppins", sans-serif);
            font-size: var(--title-16px-regular-font-size, 16px);
        }
        
        .email-input::placeholder {
            color: var(--text, #fafafa);
            opacity: 0.4;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }

        .footer-divider {
            width: 90%;
            height: 1px;
            background-color: #ffffff;
            opacity: 0.5;
            margin: 40px auto 20px;
        }

        .copyright {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            gap: 6px;
            opacity: 0.6;
            font-size: 16px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .frame-743 {
                gap: 30px;
            }
            
            .footer-section {
                min-width: 180px;
            }
        }
        
        @media (max-width: 768px) {
            .frame-743 {
                gap: 20px;
                justify-content: center;
            }
            
            .footer-section {
                min-width: 160px;
            }
            
            .frame-719 {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        
        @media (max-width: 576px) {
            .frame-743 {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .footer-section {
                width: 100%;
                text-align: center;
                align-items: center;
            }

            
            .send-mail {
                max-width: 100%;
            }
        }

        /*-----------Login and Sign Up Page----------- */

        .frame-936 {
             max-width: 1200px;
     margin: 0 auto;
     padding: 40px 0;
        }

        .frame-760 {
            display: flex;
            flex-direction: row;
            gap: 50px;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .side-image {
            background: #cbe4e8;
            border-radius: 0px 4px 4px 0px;
            flex-shrink: 0;
            width: 50%;
            height: 600px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .side-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .frame-759 {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 50%;
            max-width: 400px;
        }

        .frame-753 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .create-an-account {
            color: #000000;
            text-align: left;
            font-family: "Inter", sans-serif;
            font-size: 36px;
            line-height: 30px;
            letter-spacing: 0.04em;
            font-weight: 500;
            position: relative;
        }

        .enter-your-details-below {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            position: relative;
        }

        .frame-758 {
            display: flex;
            flex-direction: column;
            gap: 30px;
            align-items: center;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .frame-757 {
            display: flex;
            flex-direction: column;
            gap: 30px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .frame-754, .frame-755, .frame-756 {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .input-label {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            opacity: 0.4;
            position: relative;
        }

        .input-field {
            width: 100%;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.5);
            padding: 15px 0;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            background: transparent;
            outline: none;
            transition: border-color 0.3s;
        }

        .input-field:focus {
            border-bottom: 1px solid #db4444;
        }

        .frame-752 {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .button-2 {
            background: #db4444;
            border-radius: 4px;
            padding: 16px;
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            width: 100%;
            cursor: pointer;
            transition: background-color 0.3s;
            border: none;
        }

        .button-2:hover {
            background: #c23333;
        }

        .view-all-products {
            color: #fafafa;
            text-align: center;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            position: relative;
        }

        .frame-751 {
            display: flex;
            flex-direction: column;
            gap: 22px;
            align-items: center;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .frame-751-1{
            display: flex;
            flex-direction: column;
            gap: 22px;
            align-items: end;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .google-s-ign-up {
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.4);
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            width: 100%;
            cursor: pointer;
            transition: background-color 0.3s;
            background: transparent;
        }

        .google-s-ign-up:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .frame-748 {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            width: 100%;
        }

        .icon-google {
            font-size: 24px;
            color: #000000;
        }

        .sign-up-with-google {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            position: relative;
        }

        .frame-750 {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        .already-have-account {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            opacity: 0.7;
            position: relative;
        }

        .frame-749 {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
            justify-content: flex-start;
            flex-shrink: 0;
            position: relative;
            cursor: pointer;
        }

        .log-in {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            opacity: 0.7;
            position: relative;
            text-decoration: none;
        }

        .log-in-1 {
            color: #DB4444;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            opacity: 0.7;
            position: relative;
            text-decoration: none;
        }

        .log-in-1:hover{
            color: #000;
        }

        .under-line4 {
            opacity: 0.5;
            flex-shrink: 0;
            width: 47px;
            height: 1px;
            background-color: #000000;
            position: relative;
        }

        /* Responsive styles */
        @media (max-width: 1024px) {
            .frame-760 {
                gap: 30px;
            }
            
            .side-image {
                height: 570px;
            }
        }

        @media (max-width: 768px) {
            .frame-760 {
                flex-direction: column;
                gap: 40px;
            }
            
            .side-image, .frame-759 {
                width: 100%;
                max-width: 500px;
            }
            
            .side-image {
                height: 300px;
                border-radius: 4px;
            }
        }

        @media (max-width: 480px) {
            .frame-936 {
                padding: 10px;
            }
            
            .create-an-account {
                font-size: 28px;
            }
            
            .frame-757 {
                gap: 30px;
            }
            
            .frame-758 {
                gap: 30px;
            }
            
            .frame-751 {
                gap: 24px;
            }
            
            .frame-750 {
                flex-direction: column;
                gap: 8px;
            }
        }

        /*----- about Us Page ----- */

        a {
            text-decoration: none;
        }

        .frame-940 {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            overflow-x: hidden;
        }

        /* Section 1: Story Section */
        .frame-937 {
            padding: 40px 0px ;
            position: relative;
            min-height: 736px;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .roadmap {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 40px;
        }

        .account {
            color: var(--text2);
            font-size: 14px;
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }

        .account:hover {
            opacity: 0.8;
        }

        .line-13 {
            width: 13px;
            height: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.5);
            transform: rotate(117deg);
        }

        .nothing {
            color: var(--text2);
            font-size: 14px;
        }

        .frame-869 {
            display: flex;
            flex-direction: column;
            gap: 40px;
            max-width: 525px;
        }

        .our-story {
            font-family: 'Inter', sans-serif;
            font-size: 54px;
            font-weight: 600;
            line-height: 64px;
            letter-spacing: 0.06em;
        }

        .frame-868 {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .frame-868 p {
            font-size: 16px;
            line-height: 26px;
        }

        .side-image {
            background: #eb7ea8;
            border-radius: 4px 0 0 4px;
            width: 100%;
            max-width: 618px;
            height: 580px;
            overflow: hidden;
            margin: 0 auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .side-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .side-image:hover img {
            transform: scale(1.05);
        }

        /* Section 2: Stats Section */
        .frame-938 {
            padding: 40px 0px;
            background-color: #fff;
        }

        .frame-891 {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }

        .stat-card {
            background: #ffffff;
            border-radius: 4px;
            width: 270px;
            height: 230px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            background: #db4444;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }

        .stat-card:hover .free-and-fast-delivery,
        .stat-card:hover .money-back-guarantee,
        .stat-card:hover .free-delivery-for-all-orders-over-140,
        .stat-card:hover .we-reurn-money-within-30-days {
            color: white;
        }

        .frame-870, .frame-871 {
            border: 1px solid rgba(0, 0, 0, 0.3);
        }

        .frame-701, .frame-704 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            text-align: center;
            z-index: 2;
        }

        .services {
            position: relative;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ellipse-6-1, .ellipse-62 {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            opacity: 0.3;
        }

        .ellipse-6-1 {
            background: #000;
        }

        .ellipse-62 {
            background: #666666;
        }

        .ellipse-5-1, .ellipse-52 {
            position: absolute;
            width: 72.5%;
            height: 72.5%;
            border-radius: 50%;
        }

        .ellipse-5-1 {
            background:#000;
        }

        .ellipse-52 {
            background: #000;
        }

        .icon-shop {
            position: absolute;
            width: 50%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

        .frame-695, .frame-697 {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .free-and-fast-delivery, .money-back-guarantee {
            font-family: 'Inter', sans-serif;
            font-size: 32px;
            font-weight: 700;
            line-height: 30px;
            letter-spacing: 0.04em;
            transition: color 0.3s ease;
        }

        .money-back-guarantee {
            color: #000;
        }

        .free-delivery-for-all-orders-over-140, .we-reurn-money-within-30-days {
            font-size: 16px;
            line-height: 24px;
            transition: color 0.3s ease;
        }

        .we-reurn-money-within-30-days {
            color: #000;
        }

        /* Section 3: Team Section */
        .frame-939 {
            padding: 40px 0px;
            background-color: #fff;
            position: relative;
        }

        .section-title-1 {
            font-family: 'Inter', sans-serif;
            font-size: 36px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 50px;
            letter-spacing: 0.04em;
        }

        .team-slider-container {
            position: relative;
            overflow: hidden;
            margin-bottom: 60px;
        }

        .team-slider {
            display: flex;
            transition: transform 0.5s ease;
        }

        .team-slide {
            min-width: 100%;
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            padding: 10px;
        }

        .team-member {
            display: flex;
            flex-direction: column;
            gap: 32px;
            max-width: 370px;
            width: 100%;
        }

        .member-image {
            background: var(--secondary);
            border-radius: 4px;
            width: 100%;
            height: 430px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .member-image:hover img {
            transform: scale(1.05);
        }

        .member-info {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .member-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .member-name {
            font-family: 'Inter', sans-serif;
            font-size: 32px;
            font-weight: 500;
            line-height: 30px;
            letter-spacing: 0.04em;
        }

        .member-position {
            font-size: 16px;
            line-height: 24px;
            color: var(--text-light);
        }

        .member-social {
            display: flex;
            gap: 16px;
        }

        .social-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            font-size: 18px;
            transition: all 0.3s ease;
        }

        .social-icon:hover {
            color: var(--secondary-2);
            transform: translateY(-3px);
        }

        /* Slider Navigation */
        .slider-nav {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 30px;
        }

        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #d9d9d9;
            opacity: 0.3;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider-dot.active {
            opacity: 1;
            background: #db4444;
            transform: scale(1.2);
        }

        .slider-arrows {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 20px;
            z-index: 10;
        }

        .slider-arrow {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider-arrow:hover {
            background: var(--secondary-2);
            color: white;
            transform: scale(1.1);
        }


        @media (max-width: 1200px){
            .frame-937, .frame-938, .frame-939 {
                padding: 40px 20px;
            }
        }
        /* Responsive Design */
        @media (min-width: 991px) {
            
            .frame-937 {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 60px;
            }
            
            .side-image {
                margin: 0;
            }
        }

        @media (max-width: 767px) {
            .roadmap{
                justify-content: center;
            }
            
            .frame-937 {
                justify-content: space-between;
                gap: 60px;
            }
            .our-story {
                font-size: 40px;
                line-height: 48px;
            }
            
            .stat-card {
                width: 100%;
                max-width: 300px;
            }
            
            .team-member {
                width: 100%;
            }
            
            .slider-arrows {
                padding: 0 10px;
            }
            
            .slider-arrow {
                width: 35px;
                height: 35px;
            }
            
            .section-title-1 {
                font-size: 28px;
            }
        }

        @media (max-width: 480px) {
            .our-story {
                font-size: 32px;
                line-height: 40px;
            }
            
            .free-and-fast-delivery, .money-back-guarantee {
                font-size: 24px;
            }
            
            .member-name {
                font-size: 24px;
            }
            
            .frame-938 {
                padding: 60px 20px;
            }
            
            .frame-939 {
                padding: 40px 20px;
            }
        }


        /*--------- Contact Us Page --------- */

        .frame-941 {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            padding: 40px 0px;
        }

        .roadmap {
            display: flex;
            flex-direction: row;
            gap: 12px;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 40px;
        }

        .account {
            color: #000000;
            text-align: left;
            font-family: "Poppins-Regular", sans-serif;
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
            opacity: 0.5;
            position: relative;
        }

        /* .line-13 {
            margin-top: -1px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.5);
            border-width: 1px 0 0 0;
            flex-shrink: 0;
            width: 13.19px;
            height: 0px;
            position: relative;
            transform-origin: 0 0;
            transform: rotate(117.051deg) scale(1, 1);
        } */

        .nothing {
            color: #000000;
            text-align: left;
            font-family: "Poppins-Regular", sans-serif;
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
            position: relative;
        }

        .contact-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }

        .frame-858 {
            background: #ffffff;
            border-radius: 4px;
            flex: 1;
            min-width: 300px;
            max-width: 400px;
            box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 40px 35px;
        }

        .frame-855 {
            background: #ffffff;
            border-radius: 4px;
            flex: 2;
            min-width: 300px;
            max-width: 800px;
            box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 40px 31px;
        }

        .frame-856 {
            display: flex;
            flex-direction: column;
            gap: 32px;
            align-items: flex-end;
            justify-content: flex-start;
        }

        .frame-852 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
        }

        .placebox-info {
            flex: 1;
            min-width: 200px;
            position: relative;
        }

        .input-field {
            background: #f5f5f5;
            border-radius: 4px;
            border: none;
            width: 100%;
            height: 50px;
            padding: 0 16px;
            font-family: "Poppins-Regular", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #000000;
        }

        .input-field::placeholder {
            opacity: 0.5;
        }

        .placebox-info2 {
            width: 100%;
            position: relative;
        }

        .textarea-field {
            background: #f5f5f5;
            border-radius: 4px;
            border: none;
            width: 100%;
            height: 207px;
            padding: 16px;
            font-family: "Poppins-Regular", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #000000;
            resize: vertical;
        }

        .textarea-field::placeholder {
            opacity: 0.5;
        }

        .button-2 {
            background: #db4444;
            border-radius: 4px;
            padding: 16px 48px;
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .button-2:hover {
            background: #c03939;
        }

        .view-all-products {
            color: #fafafa;
            text-align: left;
            font-family: "Poppins-Medium", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            position: relative;
        }

        .frame-863 {
            display: flex;
            flex-direction: column;
            gap: 32px;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .frame-861, .frame-862 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .frame-853, .frame-857 {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: center;
            justify-content: flex-start;
        }

        .icon-container {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #db4444;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fa-phone, .fa-envelope {
            color: #fff;
            font-size: 18px;
        }

        .call-to-us, .write-to-us {
            color: #000000;
            text-align: left;
            font-family: "Poppins-Medium", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
        }

        .frame-859, .frame-860 {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .we-are-available-24-7-7-days-a-week,
        .fill-out-our-form-and-we-will-contact-you-within-24-hours {
            color: #000000;
            text-align: left;
            font-family: "Poppins-Regular", sans-serif;
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
        }

        .phone-8801611112222,
        .emails-customer-exclusive-com,
        .emails-support-exclusive-com {
            color: #000000;
            text-align: left;
            font-family: "Poppins-Regular", sans-serif;
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
        }

        .under-line {
            opacity: 0.5;
            width: 100%;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        /* Responsive adjustments */
        @media (max-width:1200px){
            .frame-941{
                padding: 40px 20px;
            }
        }
        @media (max-width: 768px) {
            .frame-852 {
                flex-direction: column;
            }
            
            .placebox-info {
                width: 100%;
            }
            
            .contact-container {
                flex-direction: column;
            }
            
            .frame-858, .frame-855 {
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .frame-855, .frame-858 {
                padding: 20px 15px;
            }
            
            .button {
                width: 100%;
            }
        }

        /*---- cart Page ----- */

        .container-2 {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 0px;
        }

        .header-1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }

        .breadcrumb a {
            text-decoration: none;
            color: #666;
        }

        .breadcrumb .active {
            color: #000;
            font-weight: 500;
        }

        .breadcrumb i {
            font-size: 12px;
            color: #999;
        }

        .main-content-1 {
            display: flex;
            gap: 20px;
            margin: 30px 0;
        }

        /* Filter Sidebar */
        .filter-sidebar {
            flex: 0 0 270px;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            height: fit-content;
            position: sticky;
            top: 20px;
        }

        .filter-section {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .filter-section:last-child {
            border-bottom: none;
        }

        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .filter-title {
            font-size: 16px;
            font-weight: 600;
        }

        .reset-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 14px;
        }

        .filter-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .filter-option {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .filter-option input {
            display: none;
        }

        .custom-checkbox {
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .custom-checkbox.checked {
            background-color: #db4444;
            border-color: #db4444;
        }

        .custom-checkbox.checked::after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: white;
            font-size: 10px;
        }

        .filter-option label {
            flex: 1;
            cursor: pointer;
            font-size: 14px;
        }

        .filter-count {
            color: #666;
            font-size: 14px;
        }

        .color-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .color-option {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
        }

        .color-option.selected {
            border-color: #333;
            transform: scale(1.1);
        }

        /* Products Grid */
        .products-grid-1 {
            flex: 1;
        }

        .products-row-1 {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
            margin-bottom: 40px;
        }

        .product-card-1 {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .product-card-1:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .product-image-1 {
            position: relative;
            height: 200px;
            background-color: #f5f5f5;
            overflow: hidden;
        }

        .product-image-1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .product-card-1:hover .product-image-1 img {
            transform: scale(1.1);
        }

        .product-badge-1 {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #db4444;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .product-actions-1 {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .action-btn-1 {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .action-btn-1:hover {
            background: #db4444;
            color: white;
        }


        .add-to-cart-btn-1 {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #000;
     color: #fff;
     border: none;
     padding: 12px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transform: translateY(100%);
     transition: transform 0.3s ease;
     z-index: 3;
 }

 .product-card-1:hover .add-to-cart-btn-1 {
     transform: translateY(0);
 }


        .product-info-1 {
            padding: 15px;
        }

        .product-title-1 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .product-price-1 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .current-price-1 {
            color: #db4444;
            font-weight: 500;
        }

        .original-price-1 {
            color: #999;
            text-decoration: line-through;
            font-size: 14px;
        }

        .product-rating-1 {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .stars-1 {
            display: flex;
            gap: 2px;
        }

        .star-1 {
            color: #ffc107;
            font-size: 14px;
        }

        .rating-count-1 {
            color: #666;
            font-size: 14px;
        }

        /* Responsive Design */
        @media (max-width:1200px ){
            .container-2{
                padding: 40px 20px;
            }
        }

        @media (max-width: 1024px) {
            .main-content-1 {
                flex-direction: column;
            }
            
            .filter-sidebar {
                position: static;
                width: 100%;
            }
            
            .products-row-1 {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .products-row-1 {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 15px;
            }
            
            .product-image-1 {
                height: 150px;
            }
            
            .product-info-1 {
                padding: 10px;
            }
            
            .filter-sidebar {
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            .products-row-1 {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .header-1 {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }

        /*-------------- product Details-------------- */

        .frame-944 {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 40px 0px;
}

.roadmap {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.account, .nothing, .nothing2 {
    color: #000000;
    text-align: left;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    position: relative;
}

.account, .nothing {
    opacity: 0.5;
}

.line-13, .line-16 {
    border-style: solid;
    border-color: #000000;
    border-width: 1px 0 0 0;
    opacity: 0.5;
    width: 13.19px;
    height: 0px;
    transform: rotate(117.051deg) scale(1, 1);
}

.product-container-1 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width:1200px ) {
    .frame-944{
        padding: 40px 20px;
    }
    .product-details-1{
        padding: 0;
    }
    
}

@media (min-width: 992px) {
    .product-container-1 {
        flex-direction: row;
    }
    
}

.product-gallery-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 768px) {
    .product-gallery-1 {
        flex-direction: row;
    }
}

.thumbnail-images-1 {
    display: flex;
    flex-direction: row;
    gap: 16px;
    order: 2;
    overflow-x: auto;
    padding-bottom: 10px;
}

@media (min-width: 768px) {
    .thumbnail-images-1 {
        flex-direction: column;
        order: 1;
        width: 120px;
        overflow-x: visible;
    }
}

.thumbnail-1 {
    background: #f5f5f5;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .thumbnail-1 {
        width: 100%;
        height: 120px;
    }
}

.thumbnail-1:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.thumbnail-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-image-container-1 {
    flex: 1;
    order: 1;
    position: relative;
}

@media (min-width: 768px) {
    .main-image-container-1 {
        order: 2;
    }
}

.main-image-1 {
    background: #f5f5f5;
    border-radius: 4px;
    width: 100%;
    height: 528px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.main-image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.main-image-1:hover img {
    transform: scale(1.02);
}

.zoom-icon-1 {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-image-container-1:hover .zoom-icon-1 {
    opacity: 1;
}

.product-details-1 {
    flex: 1;
    padding: 0 20px;
}

.product-title-2 {
    color: #000000;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-bottom: 10px;
}

.product-price-2 {
    color: #000000;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 15px;
}

.rating-stock-1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

@media (min-width: 576px) {
    .rating-stock-1 {
        flex-direction: row;
        align-items: center;
    }
}

.rating-1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars-2 {
    color: #FFD700;
}

.reviews-1 {
    color: #000000;
    opacity: 0.5;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

.stock-info-1 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.divider-1 {
    width: 16px;
    height: 0;
    border-top: 1px solid #000000;
    opacity: 0.5;
    transform: rotate(90deg);
}

.in-stock-1 {
    color: #00ff66;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    opacity: 0.6;
}

.product-description-1 {
    margin-bottom: 20px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

.color-options-1 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

@media (min-width: 576px) {
    .color-options-1 {
        flex-direction: row;
        align-items: center;
    }
}

.color-title-1 {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.03em;
    font-weight: 400;
}

.color-selector-1 {
    display: flex;
    gap: 8px;
    align-items: center;
}

.color-option {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.color-option.selected {
    border: 2px solid #000000;
}

.color-option.blue {
    background-color: #a0bce0;
}

.color-option.red {
    background-color: #e07575;
}

.size-options-1 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

@media (min-width: 576px) {
    .size-options-1 {
        flex-direction: row;
        align-items: center;
    }
}

.size-title-1 {
    color: #000000;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.03em;
    font-weight: 400;
}

.size-selector {
    display: flex;
    gap: 16px;
}

.size-option {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.size-option:hover {
    background-color: #f0f0f0;
}

.size-option.selected {
    background: #db4444;
    color: #fafafa;
    border-color: #db4444;
}

.divider-line {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 20px 0;
}

.purchase-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .purchase-options {
        flex-direction: row;
        align-items: center;
    }
}

.quantity-selector {
    display: flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    width: 160px;
    height: 44px;
}

.quantity-btn {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quantity-btn:hover {
    background-color: #f5f5f5;
}

.quantity-btn.minus {
    border-radius: 4px 0 0 4px;
}

.quantity-display {
    width: 80px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.quantity-btn.plus {
    border-radius: 0 4px 4px 0;
    background: #db4444;
    color: white;
    border: 1px solid #db4444;
}

.quantity-btn.plus:hover {
    background: #c03939;
}

.action-buttons {
    display: flex;
    gap: 16px;
}

.buy-now-btn {
    background: #db4444;
    border-radius: 4px;
    padding: 10px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fafafa;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.buy-now-btn:hover {
    background: #c03939;
    transform: translateY(-2px);
}

.wishlist-btn {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.wishlist-btn:hover {
    background-color: #f5f5f5;
    color: #db4444;
}

.shipping-info {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 24px 16px;
    margin-bottom: 30px;
}

.shipping-item {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 32px;
}

.shipping-item:last-child {
    margin-bottom: 0;
}

.shipping-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #db4444;
    font-size: 20px;
}

.shipping-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shipping-title {
    color: #000000;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.shipping-description {
    color: #000000;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}

.shipping-description a {
    text-decoration: underline;
    color: inherit;
}

.divider-shipping {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 16px 0;
}

.product-features {
    margin-top: 30px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.features-title {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    margin-bottom: 15px;
}

.features-list {
    list-style-type: none;
}

.features-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.features-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #db4444;
}

/* Image Pop-up Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
    animation: zoomIn 0.3s;
}

@keyframes zoomIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: #db4444;
}

.modal-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
}

.nav-btn-1 {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.nav-btn-1:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.modal-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px;
}

.modal-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.modal-thumbnail.active {
    opacity: 1;
    border: 2px solid #db4444;
}

.modal-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --------------- cart Page  -----------------*/

.frame-945 {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            padding: 40px 0px;
        }

        .frame-807 {
            display: flex;
            flex-direction: column;
            gap: 80px;
            align-items: flex-start;
            justify-content: flex-start;
            margin-top: 30px;
        }

        .frame-805 {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
        }

        .frame-803 {
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
        }

        .cart-main-section {
            background: #ffffff;
            border-radius: 4px;
            width: 100%;
            height: 72px;
            position: relative;
            box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .frame-793 {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
            justify-content: space-between;
            padding: 24px 40px;
            width: 100%;
        }

        .product, .price, .quantity, .subtotal {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            position: relative;
        }
        .table-view{
            width: 100%;
        }

        .cart-section {
            background: #ffffff;
            border-radius: 4px;
            width: 100%;
            min-height: 102px;
            position: relative;
            box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 20px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .cart-section .price-info {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
        }

        .quantity2 {
            border-radius: 4px;
            border: 1.5px solid rgba(0, 0, 0, 0.4);
            width: 72px;
            height: 44px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .frame-791, .frame-7912 {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0 12px;
        }

        ._01, ._02 {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            position: relative;
        }

        .frame-792 {
            display: flex;
            flex-direction: column;
            gap: 0px;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .drop-up-small, .drop-up-small2, .drop-down-small, .drop-down-small2 {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .monitor-cart-small, .gamepad-cart-small {
            width: 54px;
            height: 54px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .g-27-cq-4-500-x-500-1, .g-92-2-500-x-500-1 {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        .lcd-monitor {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
        }

        .icon-cancel {
            width: 24px;
            height: 24px;
            cursor: pointer;
            color: #db4444;
        }

        .frame-804 {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
            flex-wrap: wrap;
        }

        .button-4 {
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            padding: 16px 48px;
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .button-4:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .view-all-products {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
        }

        .frame-806 {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
            flex-wrap: wrap;
        }

        .frame-801 {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: flex-end;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .frame-798 {
            border-radius: 4px;
            border: 1px solid #000000;
            flex-shrink: 0;
            width: 300px;
            height: 56px;
            position: relative;
            overflow: hidden;
        }

        .coupon-code {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            opacity: 0.5;
            position: absolute;
            left: 24px;
            top: 50%;
            transform: translateY(-50%);
        }

        .button2 {
            background: #db4444;
            border-radius: 4px;
            padding: 16px 48px;
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .button2:hover {
            background: #c03939;
        }

        .view-all-products2 {
            color: #fafafa;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
        }

        .frame-800 {
            border-radius: 4px;
            border: 1.5px solid #000000;
            flex-shrink: 0;
            width: 470px;
            min-height: 324px;
            position: relative;
            overflow: hidden;
            padding: 32px 24px;
        }

        .cart-total {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 20px;
            line-height: 28px;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .frame-796, .frame-795, .frame-794 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 16px;
        }

        ._1750, .free {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
        }

        .button3 {
            background: #db4444;
            border-radius: 4px;
            padding: 16px 48px;
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
        }

        .button3:hover {
            background: #c03939;
        }

        .under-line, .under-line2 {
            opacity: 0.4;
            width: 100%;
            height: 1px;
            background-color: #000000;
            margin: 20px 0;
        }

        .roadmap {
            display: flex;
            flex-direction: row;
            gap: 12px;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 30px;
        }

        .account {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
            opacity: 0.5;
        }

        .line-13 {
            border-top: 1px solid #000000;
            opacity: 0.5;
            width: 13.19px;
            transform: rotate(117.051deg);
        }

        .nothing {
            color: #000000;
            text-align: left;
            font-family: "Poppins", sans-serif;
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
        }

        .total-price {
            font-weight: 600;
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .frame-793 {
                gap: 10px;
                padding: 24px 20px;
            }
            
            .frame-806 {
                gap: 30px;
            }
            
            .frame-800 {
                width: 100%;
                max-width: 470px;
            }
        }

        @media (max-width: 992px) {
            .frame-807 {
                gap: 60px;
                margin-top: 80px;
            }
            
            .frame-804 {
                justify-content: center;
            }
            
            .frame-806 {
                flex-direction: column;
                align-items: center;
            }
            
            .frame-801 {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .frame-807 {
                gap: 40px;
                margin-top: 60px;
            }
            
            .cart-section {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }
            
            .frame-793 {
                flex-wrap: wrap;
                gap: 15px;
            }
            
            .product, .price, .quantity, .subtotal {
                flex: 1 1 45%;
            }
            
            .button, .button2 {
                padding: 12px 24px;
            }
            
            .frame-798 {
                width: 100%;
                max-width: 300px;
            }
        }

        @media (max-width: 576px) {
            .frame-807 {
                gap: 30px;
                margin-top: 40px;
            }
            
            .frame-803 {
                gap: 30px;
            }
            
            .frame-804 {
                flex-direction: column;
                align-items: center;
            }
            
            .cart-main-section {
                height: auto;
                padding: 15px 0;
            }
            
            .frame-793 {
                flex-direction: column;
                gap: 10px;
            }
            
            .product, .price, .quantity, .subtotal {
                width: 100%;
                text-align: center;
            }
            
            .button, .button2, .button3 {
                width: 100%;
                max-width: 300px;
            }
            
            .frame-800 {
                padding: 20px 15px;
            }
        }

        @media (max-width: 400px) {
            .frame-801 {
                flex-direction: column;
                align-items: center;
            }
            
            .frame-798 {
                width: 100%;
            }
        }
        

        /* ------------ Check Out Page -------------- */

        .frame-946 {
            max-width: 1200px;
            margin: 0 auto;
            padding: 45px 20px;
            position: relative;
        }
        
        .frame-753 {
            margin-bottom: 24px;
        }
        
        .billing-details {
            font-size: 36px;
            font-weight: 500;
            letter-spacing: 0.04em;
            margin-bottom: 24px;
        }
        
        .frame-830 {
            margin-bottom: 32px;
        }
        
        .frame-829 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-label {
            font-size: 16px;
            opacity: 0.4;
        }
        
        .required {
            color: #db4444;
        }
        
        .form-input {
            background: #f5f5f5;
            border-radius: 4px;
            border: none;
            height: 50px;
            padding: 0 16px;
            font-size: 16px;
            font-family: 'Poppins', sans-serif;
        }
        
        .save-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .icon-checkbox {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .icon-checkbox.checked {
            background-color: #000;
            color: white;
        }
        
        .save-info-text {
            font-size: 16px;
        }
        
        .frame-836 {
            background-color: #f9f9f9;
            padding: 32px;
            border-radius: 8px;
        }
        
        .cart-items {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 32px;
        }
        
        .cart-item {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        
        .item-image {
            width: 54px;
            height: 54px;
            background-color: #f5f5f5;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .item-image i {
            font-size: 24px;
            color: #666;
        }
        
        .item-details {
            display: flex;
            justify-content: space-between;
            flex-grow: 1;
        }
        
        .item-name {
            font-size: 16px;
        }
        
        .item-price {
            font-size: 16px;
        }
        
        .order-summary {
            margin-bottom: 32px;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .summary-line {
            height: 1px;
            background-color: rgba(0, 0, 0, 0.2);
            margin: 16px 0;
        }
        
        .payment-methods {
            margin-bottom: 32px;
        }
        
        .payment-option {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .radio-button {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1.5px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .radio-button.selected .inner-circle {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #000;
        }
        
        .payment-icons {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }
        
        .payment-icon {
            width: 42px;
            height: 28px;
            background-color: #f5f5f5;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .payment-icon i {
            font-size: 18px;
            color: #333;
        }
        
        .coupon-section {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .coupon-input {
            flex-grow: 1;
            border: 1px solid #000;
            border-radius: 4px;
            height: 56px;
            padding: 0 24px;
            font-size: 16px;
            font-family: 'Poppins', sans-serif;
        }
        
        .coupon-input::placeholder {
            opacity: 0.5;
        }
        
        .button-5 {
            background: #db4444;
            color: #fafafa;
            border: none;
            border-radius: 4px;
            padding: 16px 48px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
            transition: background-color 0.3s;
        }
        
        .button-5:hover {
            background: #c23333;
        }
        
        .place-order-btn {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        

        /* Responsive styles */
        @media (min-width: 768px) {
            .frame-946 {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 40px;
                padding: 45px 20px;
            }
            
            .frame-830 {
                grid-column: 1;
            }
            
            .frame-836 {
                grid-column: 2;
                margin-top: 78px;
            }
        }
        
        @media (max-width: 767px) {
            .cart-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .item-details {
                width: 100%;
            }
            
            .coupon-section {
                flex-direction: column;
            }
            
            .payment-option {
                flex-wrap: wrap;
            }
            
            .payment-icons {
                margin-left: 40px;
                margin-top: 8px;
            }
        }
        
        @media (max-width: 480px) {
            .billing-details {
                font-size: 28px;
            }
            
            .frame-836 {
                padding: 20px;
            }
            
            .button-5 {
                padding: 14px 32px;
            }
        }

        /* product Offes Banner */

        .promo-banner {
            width: 100%;
            max-width: 1440px;
            height: 500px;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .banner-overlay {
                position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding: 0 60px;
        }
        
        .banner-content {
            max-width: 500px;
            color: white;
            align-items: center;
    justify-items: center;
        }
        
        .badge {
            background: #db4444;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 500;
            margin-left: 35%;
        }
        
        .badge i {
            font-size: 16px;
        }
        
        .sale-title {
            font-size: 48px;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 15px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .product-description {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .shop-button {
            background: #db4444;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(219, 68, 68, 0.3);
                margin-left: 35%;
        }
        
        .shop-button:hover {
            background: #c03939;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(219, 68, 68, 0.4);
        }
        
        /* Responsive styles */
        @media (max-width: 1200px) {
            .promo-banner {
                height: 450px;
            }
            
            .sale-title {
                font-size: 42px;
            }
        }
        
        @media (max-width: 992px) {
            .promo-banner {
                height: 400px;
            }
            
            .banner-overlay {
                padding: 0 40px;
            }
            
            .sale-title {
                font-size: 36px;
            }
            
            .product-description {
                font-size: 16px;
            }
        }
        
        @media (max-width: 768px) {
            .promo-banner {
                height: 350px;
            }
            
            .banner-overlay {
                padding: 0 30px;
            }
            
            .sale-title {
                font-size: 32px;
            }
            
            .product-description {
                font-size: 15px;
            }
            
            .badge, .shop-button {
                padding: 8px 16px;
                font-size: 13px;
            }
        }
        
        @media (max-width: 576px) {
            .promo-banner {
                height: 300px;
            }
            
            .banner-overlay {
                padding: 0 20px;
                justify-content: flex-start;
                padding-top: 30px;
            }
            
            .sale-title {
                font-size: 28px;
            }
            
            .product-description {
                font-size: 14px;
                margin-bottom: 20px;
            }
            
            .badge {
                margin-bottom: 15px;
            }
        }
        
        @media (max-width: 400px) {
            .promo-banner {
                height: 280px;
            }
            
            .sale-title {
                font-size: 24px;
            }
            
            .product-description {
                font-size: 13px;
            }
        }


/* -------------- My Account---------- */


.frame-948 {
            max-width: 1440px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }

        .roadmap {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        
@media (min-width: 1024px) {
    .container-6 {
        display: flex;
        gap: 40px;
    }
}

@media (min-width: 1024px) {
    .container-6{
        padding: 0 0px;
    }
}
@media (min-width: 768px) {
    .container-6 {
        flex-direction: row;
    }
}



        .nothing {
            color: #000000;
        }

        .welcome-md-rimel {
            text-align: right;
            margin-bottom: 20px;
        }

        .welcome-md-rimel-span {
            color: #000000;
        }

        .welcome-md-rimel-span2 {
            color: #db4444;
        }

        .sidebar {
            width: 100%;
            margin-bottom: 30px;
        }

        .sidebar-section {
            margin-bottom: 20px;
        }

        .sidebar-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .sidebar-menu {
            padding-left: 20px;
        }

        .sidebar-item {
            font-size: 16px;
            margin-bottom: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-item.active {
            color: #db4444;
        }

        .sidebar-item:not(.active) {
            opacity: 0.5;
        }

        .profile-container {
            background: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.05);
            padding: 30px;
            width: 100%;
        }

        .edit-your-profile {
            color: #db4444;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 30px;
        }

        .form-row {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 30px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        .form-label {
            font-size: 16px;
        }

        .input-container {
            position: relative;
            width: 100%;
        }

        .place-to-info-box {
            background: #f5f5f5;
            border-radius: 4px;
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 16px;
        }

        .md {
            color: #000000;
            opacity: 0.5;
        }

        .password-section {
            margin-bottom: 30px;
        }

        .password-title {
            font-size: 16px;
            margin-bottom: 15px;
        }

        .password-inputs {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 32px;
            align-items: center;
            margin-top: 40px;
        }

        .cancel {
            color: #000000;
            cursor: pointer;
        }

        .button-6 {
            background: #db4444;
            border-radius: 4px;
            padding: 16px 48px;
            color: #fafafa;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Input field styles */
        input {
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
            outline: none;
            font-size: 16px;
            color: #000000;
        }

        input::placeholder {
            color: #000000;
            opacity: 0.5;
        }

        .error-message {
            color: #db4444;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }

        .success-message {
            color: #4CAF50;
            font-size: 14px;
            margin-top: 10px;
            display: none;
        }

        /* Responsive styles */
        @media (min-width: 768px) {
            .frame-948 {
                padding: 40px;
            }
            
            .form-row {
                flex-direction: row;
            }
            
            /* .form-group {
                width: calc(50% - 25px);
            } */
        }

        @media (min-width: 1024px) {
            .container {
                display: flex;
                gap: 40px;
            }
            
            .sidebar {
                width: 250px;
                margin-bottom: 0;
            }
            
            .profile-container {
                flex: 1;
            }
        }

        @media (min-width: 1200px) {
            .frame-948 {
                padding: 40px 135px;
            }
        }