.header {
            position: relative;
            z-index: 1000;
            background-color: #f3e8d3;
        }


        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            width: 40px;
            height: 40px;
            color: #B87216;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 20px;
            font-family: "Alfa Slab One", serif;
            
        }

        .nav-menu {
            display: flex;
            gap: 25px;
            align-items: center;
        }

        .nav-link {
            text-decoration: none;
             color: #B87216;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .nav-link:hover {
            color: #b46a08;
        }

        .dropdown {
            cursor: pointer;
        }

        .user-actions {
            display: flex;
            gap: 20px;
            align-items: center;
        }
@media (min-width:1024px) {
            .logo {
            width: 40px;
            height: 40px;
            color: #B87216;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            
            margin-left: 30px;
            font-size: 20px;
            font-family: "Alfa Slab One", serif;
            
        }          
        }

    @media (max-width:480px) {
            .logo {
            width: 40px;
            height: 40px;
            color: #B87216;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-left: 50px;
            font-size: 20px;
            font-family: "Alfa Slab One", serif;
            
        }          
        }
    














/* ===== HERO SECTION STYLES ===== */
.hero-section{
    background-color: #F7F2EA;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
} 

.hero-text {
    flex: 1;
    max-width: 600px;
}

.tag {
    display: inline-block;
    background: #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 10px;
    border: 1px solid #eee;
}

.headline {
    font-size: 100px;
    font-weight: bold;
    font-style: italic;
    line-height: 1;
    color: #000;
    margin-bottom: 5px;
}

.headline span {
    display: block;
}

.subtext {
    font-size: 16px;
    color: #555;
   
    font-weight:300;
}

.price-action {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.special-price {
    font-size: 20px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.price {
    font-size: 2rem;
    font-weight: bolder;
    color: #000;
}

.add-to-cart {
    background: #000;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.add-to-cart:hover {
    background: #333;
    transform: scale(1.05);
}

/* ===== HERO IMAGE SLIDER ===== */
.hero-image-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 500px;
    height: 500px;
    
}

.image-slider {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.8s ease-in-out;
    display: block;
}

.hero-image.active {
    opacity: 1;
    transform: translateX(0);
}

.hero-image.exiting {
    opacity: 0;
    transform: translateX(-100%);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-section {
            background: #F7F2EA;
            padding: 20px 10px;
            position: relative;
            overflow: hidden;
            justify-content: flex-start;
            
    }
    
    .hero-container {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .headline {
        font-size: 48px;
    }

    .hero-image-wrapper {
        order: 2;
        margin-top: 20px;
        width: 100%;
        height: 300px;
       
       
    }

    .image-slider {
        max-width: 100%;
        height: 100%;
    }

    .price {
        font-size: 24px;
    }

    .add-to-cart {
        padding: 10px 20px;
        font-size: 14px;
    }
    .subtext{
        font-size: 0.94rem;
    }
    
}

@media (max-width: 480px) {
    .hero-container {
    gap: 30px;
}
    .hero-section {
        padding: 20px 15px;
    }

    .headline {
        font-size: 40px;
    }

    .hero-image-wrapper {
        height: 250px;
        max-width: 350px;
    }

    .price {
        font-size: 20px;
    }

    .add-to-cartt {
        padding: 8px 16px;
        font-size: 12px;
    }

   
}

/* Tablet specific fixes */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-image-wrapper {
        height: 500px;
        min-width: 400px;
    }

    .hero-container {
        gap: 40px;
    }
}

/* ===== HERO SECTION STYLES ===== */


.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.hero-text {
  flex: 1;
  max-width: 500px;
}

/* ===== HERO IMAGE SLIDER ===== */
.hero-image-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 500px;
  /* REMOVE fixed height here - let it be flexible */
  min-height: 400px; /* Use min-height instead */
}

.image-slider {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 400px; /* Set height on the slider instead */
  overflow: hidden;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: block;
}

.hero-image.active {
  opacity: 1;
}

/* ===== MOBILE & TABLET RESPONSIVE FIXES ===== */
@media (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    text-align: left;
    gap: 40px;
  }
  
  .hero-image-wrapper {
    order: 2;
    min-width: auto;
    width: 100%;
    min-height: 300px; /* Flexible height for tablets */
    max-width: 500px;
    margin: 0 auto;
  }
  
  .image-slider {
    height: 350px; /* Adjust slider height for tablet */
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-container {
    gap: 30px;
  }

  .hero-image-wrapper {
    min-height: 250px; /* Smaller for mobile */
    max-width: 400px;
  }
  
  .image-slider {
    height: 300px; /* Adjust slider height for mobile */
  }
}

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

  .hero-image-wrapper {
    min-height: 200px; /* Smallest for very small screens */
    max-width: 320px;
  }
  
  .image-slider {
    height: 250px; /* Smallest slider height */
  }
}

/* ===== HERO TEXT ENTRANCE ANIMATIONS ===== */
.hero-text {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.tag {
    opacity: 0;
    transform: translateX(-30px);
    animation: fadeInLeft 0.6s ease-out 0.5s forwards;
}

.headline span {
    opacity: 0;
    transform: translateY(40px);
    display: flex;
    flex-direction: column;
}

.headline span:nth-child(1) {
    animation: fadeInUp 0.8s ease-out 0.7s forwards;
}

.headline span:nth-child(2) {
    animation: fadeInUp 0.8s ease-out 0.9s forwards;
}

.headline span:nth-child(3) {
    animation: fadeInUp 0.8s ease-out 1.1s forwards;
}

.subtext {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 1.3s forwards;
}

.price-action {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 1.5s forwards;
}

/* ===== HERO IMAGE SLIDE ANIMATIONS ===== */
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateX(100px);
    /* Start from right */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.hero-image.active {
    opacity: 1;
    transform: translateX(0);
    /* Slide to normal position */
}

.hero-image.exiting {
    opacity: 0;
    transform: translateX(-100px);
    /* Slide out to left */
}

/* Initial image entrance animation */
.hero-image.entering {
    animation: slideInFromRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutToLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100px);
    }
}


/* ===== PRICE-ACTION — Roefix Uganda (Primary: #EAAD51) ===== */
.price-action {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 0.8s ease-out 1.5s forwards;
}

/* Special Offer Badge – Subtle but noticeable */
.price-action .special-offer-badge {
  display: flex;
  align-items: center;
  background: #fffaf2; /* Very light amber tint */
  color: #b46b0b; /* Deepened #EAAD51 for contrast */
  padding: 6px 16px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid #ffe9c9;
  box-shadow: 0 2px 5px rgba(234, 173, 81, 0.15);
}

.price-action .badge-icon {
  margin-right: 6px;
  font-size: 1.1em;
}

/* Price Display */
.price-action .price-display {
  display: flex;
  flex-direction: column;
  min-width: 110px;
}

.price-action .price-label {
  font-size: 0.95rem;
  color: #6b7280; /* Neutral gray */
  margin-bottom: 4px;
  font-weight: 500;
}

.price-action .price-amount {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  font-weight: 800;
  color: #1a2b3c; /* Deep navy for high contrast */
  line-height: 1;
}

/* CTA Group – Primary Color Focus */
.price-action .cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.price-action .btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EAAD51, #D48A3F); /* Rich gold-to-caramel gradient */
  color: #1A2B3C; /* Deep navy for excellent contrast */
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(234, 173, 81, 0.35);
  min-width: 200px;
  max-width: fit-content; /* ← Ensures it never stretches */
  text-align: center;
  letter-spacing: 0.4px;
  font-family: inherit;
}

.price-action .btn-call:hover {
  background: linear-gradient(135deg, #D48A3F, #C17830); /* Deeper hover gradient */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234, 173, 81, 0.5);
}

.price-action .btn-call:focus {
  outline: 2px solid rgba(234, 173, 81, 0.6);
  outline-offset: 2px;
}

.price-action .btn-icon {
  margin-right: 8px;
  font-size: 1.25em;
  line-height: 1;
}



.price-action .trust-note {
  font-size: 0.84rem;
  color: #8a95a1;
  white-space: nowrap;
  margin-top: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .price-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
  }

  .price-action .price-display {
    align-items: flex-start;
  }

  .price-action .cta-group {
    width: 100%;
    align-items:normal;
  }

  .price-action .btn-call {
    width: 100%;
    justify-content: center;
  }

  .price-action .trust-note {
    text-align: left;
    /* Optional: keep or remove based on design */
  }
}

/* Animation (safe to include — only affects this block if class matches) */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== ONLY AFFECTS .price-action CHILDREN — SAFE & SCOPED ===== */


/* ===== ENTRANCE ANIMATION FOR FIRST IMAGE ===== */
.hero-image-wrapper {
    opacity: 0;
    transform: translateX(50px);
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}
     
         /* ===== MOBILE & TABLET RESPONSIVE FIXES ===== */
         @media (max-width: 1024px) {
             .hero-container {
                 flex-direction: column;
                 /* Keep text aligned to the left — remove 'text-align: center' */
                 text-align: left;
                 gap: 40px;
             }
    
             .hero-image-wrapper {
                 order: 2;
                 min-width: auto;
                 width: 100%;
                 min-height: 300px;
                 max-width: 500px;
                 
             }
    
             .image-slider {
                 height: 350px;
                 max-width: 100%;
             }
         }
    
         @media (max-width: 768px) {
             .hero-container {
                 gap: 30px;
             }
    
             .hero-image-wrapper {
                 min-height: 250px;
                 max-width: 400px;
             }
    
             .image-slider {
                 height: 300px;
             }
         }
    
         @media (max-width: 480px) {
             .hero-section {
                 padding: 20px 10px;
             }
    
             .hero-image-wrapper {
                 min-height: 200px;
                 max-width: 320px;
             }
    
             .image-slider {
                 height: 250px;
             }
             .price-action .btn-call {
                padding: 10px 12px;
                border-radius: 50px;
                font-size: .9rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 4px 14px rgba(234, 173, 81, 0.35);
                min-width: 140px;
                font-family: inherit;
             }
             
         }
     
     
     
     
     
     
     
     
     
     
     
     /* Hide elements initially */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            /* Default: slide up */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        /* When visible, animate in */
        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Optional: override per animation type */
        .animate-on-scroll[data-animation="slide-left"].visible {
            transform: translateX(0);
        }

        .animate-on-scroll[data-animation="slide-left"] {
            transform: translateX(-50px);
        }

        .animate-on-scroll[data-animation="zoom-in"].visible {
            transform: scale(1);
        }

        .animate-on-scroll[data-animation="zoom-in"] {
            transform: scale(0.9);
            opacity: 0;
        }
        


    

/*ART PIECES*/
 /*FEATURED PRODUCTS*/
 /* ===== SECTION ANIMATION ===== */
 .featured-products {
     opacity: 0;
     transform: translateX(-100px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 .featured-products.visible {
     opacity: 1;
     transform: translateX(0);
 }

 /* ===== HEADER ===== */
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #B177DA;
     height: 50px;
     margin: 0 auto;
     padding-right: 10px;
     width: 98%;
     border-radius: 5px 5px 0 0;
 }

 .section-header h1 {
     color: #fff;
     font-size: 1.5rem;
     margin-left: 10px;
     letter-spacing: 0.5px;
     padding-bottom: 12px;

 }

 .view-all {
     position: relative;
     margin-left: 10px;
     font-weight: 600;
     text-decoration: none;
     color: #fff;

 }

 .view-all:hover {
     text-decoration: underline;
 }

 .view-all::before {
     content: "→";
     font-size: 0.9rem;
 }

 /* ===== PRODUCT GRID ===== */
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 25px;
     padding: 0 2%;
 }

 .product-card {
     background: #fafafa;
     overflow: hidden;
     transition: all 0.1s ease;
     position: relative;
 }

 .product-card:hover {

     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 /* ===== SALE BADGE ===== */
 .sale-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgb(221, 33, 133);
     color: #fff;
     font-size: 0.75rem;
     font-weight: bold;
     padding: 4px 8px;
     border-radius: 3px;
     z-index: 2;
 }

 /* ===== SHOE IMAGE CONTAINER ===== */
 .shoe-image-containerr {
     width: 100%;
     height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f8f8f8;
     overflow: hidden;
 }

 .shoe-imagee {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .shoe-imagee:hover {
     transform: scale(1.05);
 }

 /* ===== PRODUCT INFO ===== */
 .product-info {
     padding: 8px 5px;
 }

 .category {
     font-size: 0.7rem;
     text-transform: uppercase;
     color: #777;
     margin-bottom: 3px;
 }

 .product-title {
     font-size: .8rem;
     font-weight: 200;
     margin-bottom: 3px;
 }

 .price {
     font-size: .9rem;
     font-weight: 700;
     margin-bottom: 3px;
 }

 .original-price {
     text-decoration: line-through;
     color: #b3b2b2;
     font-size: 0.7rem;
     margin-right: 5px;
     font-weight: 500;
 }

 .discounted-price {
     color: #000;
 }

 
 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
     .section-header h1 {
         font-size: 2.2rem;
     }

     .product-grid {
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }

     .shoe-image-container {
         height: 120px;
     }

     .section-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: #eaad51;
         height: 40px;
         margin: 0 auto;
         padding-right: 10px;
         width: 98%;
         border-radius: 5px 5px 0 0;
     }

     .section-header h1 {
         color: #fff;
         font-size: 1.2rem;
         margin-left: 10px;
         letter-spacing: 0.5px;
         padding-bottom: 10px;

     }

     .view-all {
         padding-top: 5px;
         font-size: .7rem;
         margin-left: 10px;
         font-weight: 200;
         text-decoration: none;
         color: #fff;

     }

     .view-all::before {
         content: "→";
         font-size: 0.5rem;
     }
 }

 @media (max-width: 480px) {
     .section-header h1 {
         font-size: 1rem;
     }

     .product-grid {

         grid-template-columns: repeat(2, 1fr)
     }

     .size-btn {
         width: 25px;
         height: 25px;
         font-size: 0.6rem;
     }

     .product-title {
         font-size: .6rem;
         font-weight: 200;
         margin-bottom: 3px;
     }

     .price {
         font-size: .6rem;
         font-weight: 500;
         margin-bottom: 3px;
     }

     .original-price {
         text-decoration: line-through;
         color: #b3b2b2;
         font-size: 0.6rem;
         margin-right: 5px;
         font-weight: 500;
     }

     .section-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: #eaad51;
         height: 40px;
         margin: 0 auto;
         padding-right: 10px;
         width: 98%;
         border-radius: 5px 5px 0 0;
     }

     .section-header h1 {
         color: #fff;
         font-size: 1.2rem;
         margin-left: 10px;
         letter-spacing: 0.5px;
         padding-bottom: 5px;

     }

     .view-all {
         padding-top: 10px;
         font-size: .7rem;
         margin-left: 10px;
         font-weight: 200;
         text-decoration: none;
         color: #fff;

     }

     .view-all::before {
         content: "→";
         font-size: 0.5rem;
     }
 }