:root {
            --porto-black: #0e0e10;
            --porto-dark-bg: #111114;
            --porto-orange: #ff5b22;
            --porto-white: #ffffff;
        }
         .paddingcat{
            height:170px;
        }
        /* The homepage navbar is fixed and overlays the hero. Avoid a separate
           spacer/margin here, which created a white gap after scrolling. */
        #heroSlider{
            margin-top: 0;
        }

        body {
            background-color: var(--porto-black);
            color: var(--porto-white);
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
        }

        /* --- Header Navigation Styling --- */
        .navbar {
            background-color: rgba(14, 14, 16, 0.95);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1px;
        }
        .nav-link {
            color: var(--porto-white) !important;
            text-transform: uppercase;
        }
        .nav-link:hover {
            color: rgba(201, 174, 68, 0.94) !important;
        }
        .navbar-utility a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 0.7rem;
        }

        /* --- Main Hero Canvas Area --- */
        .hero-container {
            min-height: 85vh;
            background: radial-gradient(circle at 65% 50%, #202026 0%, var(--porto-black) 60%);
            position: relative;
            display: flex;
            align-items: center;
        }

        /* Hero Text Formatting */
        .season-text {
            font-size: 2.2rem;
            font-weight: 300;
            letter-spacing: 1px;
            color: #e1e1e1;
        }
        .discount-title {
            font-size: 5.5rem;
            font-weight: 800;
            line-height: 0.9;
            text-transform: uppercase;
            letter-spacing: -2px;
        }
        .discount-title span {
            font-size: 2rem;
            font-weight: 700;
            display: inline-block;
            vertical-align: top;
            margin-top: 10px;
            line-height: 1;
        }
        .price-tag {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #999;
        }
        .price-tag span {
            color: var(--porto-orange);
            font-size: 1.4rem;
        }

        /* Action Button */
        .btn-porto-shop {
            background-color: var(--porto-white);
            color: var(--porto-black);
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 0;
            letter-spacing: 3px;
            font-size: 0.85rem;
            padding: 16px 45px;
            transition: all 0.3s ease;
            border: none;
        }
        .btn-porto-shop:hover {
            background-color: var(--porto-orange);
            color: var(--porto-white);
        }

        /* --- Smooth Floating Shoe Animation --- */
        .showcase-image-wrapper {
            position: relative;
            z-index: 2;
        }
        
        .floating-shoe {
            width: 100%;
            max-width: 680px;
            height: auto;
            display: block;
            /* Pointing our animation variables here */
            animation: smoothBobbing 4s ease-in-out infinite;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.7));
        }

        @keyframes smoothBobbing {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px); /* Adjust this for more/less shaking vertical lift */
            }
            100% {
                transform: translateY(0px);
            }
        }

        /* --- Thumbnails Box Bottom Right --- */
        .thumbnail-deck {
            position: absolute;
            bottom: 40px;
            right: 10%;
            display: flex;
            gap: 15px;
            z-index: 10;
        }
        .thumb-box {
            width: 80px;
            height: 60px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }
        .thumb-box.active, .thumb-box:hover {
            border-color: var(--porto-white);
        }
        .thumb-box i {
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.6);
        }
        .thumb-box.active i {
            color: var(--porto-white);
        }
           :root {
            --porto-text-main: #222529;
            --porto-text-muted: #777777;
            --porto-light-gray: #f4f4f4;
            --porto-border: #e7e7e7;
            --porto-star-gold: #ffb300;
        }

        body {
            background-color: #ffffff;
            color: var(--porto-text-main);
            font-family: 'Montserrat', sans-serif;
            letter-spacing: 0.2px;
        }

        /* --- Sidebar Navigation & Filters --- */
        .filter-title {
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--porto-text-main);
            margin-bottom: 25px;
        }

        .filter-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .filter-item {
            margin-bottom: 18px;
            display: flex;
            align-items: center;
        }

        .filter-link {
            color: var(--porto-text-main);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: color 0.2s ease;
        }

        .filter-link:hover {
            color: #0088cc;
        }

        /* --- Minimalist Product Card Matrix --- */
        /* .product-card-porto {
            background: #ffffff;
            border: none;
            border-radius: 0;
            margin-bottom: 30px;
            position: relative;
            transition: all 0.3s ease;
        } */

        .product-image-box {
            background-color: var(--porto-light-gray);
            /* aspect-ratio: 1/1; */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            /* overflow: hidden; */
            /* padding: 30px; */
            transition: background-color 0.3s ease;
        }

        .product-image-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Interactive actions hover state configuration layers */
        .porto-wishlist-btn {
            position: absolute;
            top: 15px;
            right: -40px; /* Initially hidden offscreen */
            background: #ffffff;
            color: var(--porto-text-main);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .porto-wishlist-btn:hover {
            background-color: #222529;
            color: #ffffff;
        }

        /* Reveal configuration triggers on item cards */
        .product-card-porto:hover .porto-wishlist-btn {
            right: 15px;
        }
        
        .product-card-porto:hover .product-image-box img {
            transform: scale(1.06);
        }

        /* Card Textual Meta Fields */
        .product-meta-category {
            font-size: 0.65rem;
            text-transform: uppercase;
            color: var(--porto-text-muted);
            letter-spacing: 0.5px;
            margin-top: 15px;
            margin-bottom: 4px;
            display: block;
        }

        .product-meta-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--porto-text-main);
            text-decoration: none;
            display: block;
            margin-bottom: 6px;
            line-height: 1.4;
            transition: color 0.2s ease;
        }

        .product-meta-title:hover {
            color: #0088cc;
        }

        /* Star Rating Framework Component */
        .porto-rating-stars {
            color: #cccccc;
            font-size: 0.72rem;
            margin-bottom: 8px;
            display: flex;
            gap: 2px;
        }

        .porto-rating-stars .bi-star-fill.active {
            color: var(--porto-star-gold);
        }

        .product-meta-price {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--porto-text-main);
            margin: 0;
        }

        /* --- Scroll Back To Top Button Floating Anchor --- */
        .scroll-top-anchor {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: #43494e;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 1.1rem;
            z-index: 999;
            transition: background-color 0.2s ease;
        }
        .scroll-top-anchor:hover {
            background-color: #222529;
            color: #ffffff;
        }
       


        .dropdown-item {
  position: relative; /* Acts as the anchor point for the absolute dropdown */
  display: block;
}

/* Parent Category Link */

.nav-link .arrow {
  font-size: 8px;
  margin-left: 6px;
  opacity: 0.8;
}

/* Hidden Dropdown Base State */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 760px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 30px;
  border-radius: 0 0 3px 3px;
  
  /* Smooth Hover Transitions */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 999;
}

/* White Triangle Pointer at Top */
.mega-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 45px;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  transform: rotate(45deg);
}

/* Hover Action to Display Dropdown */
.dropdown-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Internal Layout Grid */
.dropdown-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.grid-column {
  flex: 1;
}

/* Headers (Variation 1 & 2) */
.grid-column h3 {
  font-size: 13px;
  color: #22252a;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}

/* Link Lists styling */
.grid-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.grid-column ul li {
  margin-bottom: 12px;
}

.grid-column ul li a {
  color: #777777;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: inline-block;
  transition: color 0.15s, transform 0.15s;
}

/* Subtle modern slide effect on hover */
.grid-column ul li a:hover {
  color: #000000;
  transform: translateX(3px);
}

/* Right Side Promo Display Card */
.promo-section {
  flex: 1.3;
  background-color: #f4f4f4;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 25px;
  min-height: 250px;
}

.promo-text {
  position: relative;
  z-index: 2;
  max-width: 55%;
}

.promo-text h2 {
  font-size: 22px;
  color: #22252a;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 15px;
}

.promo-text .orange-text {
  color: #ee5b24; /* Matches image's action color */
  font-size: 34px;
}

.promo-text .rotated-off {
  font-size: 11px;
  display: inline-block;
  transform: rotate(-90deg) translate(-8px, -8px);
  font-weight: 700;
}

.shop-now-btn {
  display: inline-block;
  background-color: #22252a;
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  padding: 9px 18px;
  letter-spacing: 0.5px;
  transition: background-color 0.2s;
}

.shop-now-btn:hover {
  background-color: #ee5b24;
}

.promo-image {
  position: absolute;
  right: -15px;
  bottom: 0;
  height: 95%;
  object-fit: contain;
  z-index: 1;
}

@media screen and (max-width: 768px) {
    
  
  /* 1. Allow the menu container to wrap or stack if needed */
  .nav-menu {
    display: block;
    width: 100%;
  }

  /* 2. Turn off absolute positioning so it pushes content down instead of overlapping */
  .mega-dropdown {
    position: relative;
    top: 0;
    width: 100% !important; /* Forces the dropdown to match the screen width */
    max-width: 100%;
    box-shadow: none; /* Shadow looks messy on flat mobile screens */
    padding: 15px;
    
    /* Optional: If you want it hidden on mobile until clicked, 
       keep these. Otherwise, remove them to keep it expanded */
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none; 
  }

  /* Show the dropdown on hover for mobile/tablet touch (or click) */
  /* .dropdown-item:hover .mega-dropdown {
    display: block;
    transform: none;
  } */

  /* 3. Hide the little top arrow indicator since it won't align nicely anymore */
  .mega-dropdown::before {
    display: none;
  }

  /* 4. Change Grid from horizontal Flex to a single vertical column */
  .dropdown-grid {
    flex-direction: column;
    gap: 25px;
  }

  .grid-column {
    width: 100%;
  }

  /* 5. Make the side promo banner stack nicely at the bottom */
  .promo-section {
    min-height: auto;
    padding: 20px;
    justify-content: space-between;
  }

  .promo-text {
    max-width: 60%;
  }

  .promo-image {
    position: relative;
    right: 0;
    height: 120px; /* Constrain the image size so it doesn't break the layout */
    object-fit: contain;
  }
}

/* Parent menu item anchor point */
.dropdown-item {
  position: relative;
  display: inline-block;
}

/* New standard narrow dropdown styling */
.standard-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px; /* Controls the narrow width of the dropdown */
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  margin: 0;
  list-style: none;
  border-radius: 4px;
  
  /* Hidden by default with smooth fade-in */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 999;
}

/* Show dropdown on hover */
.dropdown-item:hover .standard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Individual list item styling */
.standard-dropdown li {
  width: 100%;
}

.standard-dropdown li a {
  display: block;
  padding: 10px 20px;
  color: #777777;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.15s, color 0.15s;
}

/* Hover state for single links */
.standard-dropdown li a:hover {
  background-color: #f4f4f4;
  color: #000000;
}



/* slider css start */

        /* Desktop Height Profile */
        .full-screen-slider {
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }

        /* Typography Customizations & Scaling */
        .brand-font {
            letter-spacing: 1px;
            color: #e0e0e0;
            font-size: 1.1rem;
        }

        .fw-black {
            font-weight: 900;
        }

        .line-height-1 {
            line-height: 0.9;
        }

        .tracking-tight {
            letter-spacing: -2px;
        }

        .tracking-wider {
            letter-spacing: 2px;
        }

        .text-orange {
            color: #e65c23;
        }

        /* Shop Now Button styling */
        .btn-shop-now {
            font-size: 0.85rem;
            transition: all 0.3s ease;
        }

        .btn-shop-now:hover {
            background-color: #e65c23;
            border-color: #e65c23;
            color: #fff;
        }

        /* Fluid Image Container */
        .slider-img {
            max-height: 65vh;
            width: auto;
            object-fit: contain;
            z-index: 2;
            position: relative;
            animation: floatImage 4s ease-in-out infinite;
            will-change: transform;
        }

        /* Background Blurred Pentagons / Shapes */
        .blur-shape {
            position: absolute;
            background: rgba(255, 255, 255, 0.05);
            filter: blur(20px);
            border-radius: 30%;
            z-index: 1;
        }

        .shape-1 {
            width: 60px;
            height: 60px;
            top: 15%;
            left: 70%;
        }

        .shape-2 {
            width: 80px;
            height: 80px;
            bottom: 10%;
            left: 45%;
            opacity: 0.4;
        }

        /* Custom Thumbnail Navigation Positioning */
        .custom-thumbnails {
            position: absolute;
            right: 5%;
            bottom: 5%;
            left: auto;
            margin: 0;
            flex-direction: row;
            gap: 15px;
            z-index: 15;
        }

        .custom-thumbnails button {
            width: 70px !important;
            height: 50px !important;
            text-indent: 0 !important;
            opacity: 0.5;
            transition: opacity 0.3s ease, border-color 0.3s ease;
            border: 1px solid #444 !important;
            background: none;
            padding: 0;
            overflow: hidden;
        }

        .custom-thumbnails button img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .custom-thumbnails button.active {
            opacity: 1;
            border: 2px solid #fff !important;
        }

        /* Custom Fade Transitions */
        .carousel-fade .carousel-item {
            opacity: 0;
            transition-property: opacity, transform;
            transition-duration: 0.8s;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        .carousel-fade .carousel-item.active {
            opacity: 1;
        }

        /* Smooth Floating Animation */
        @keyframes floatImage {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
            100% { transform: translateY(0px); }
        }

        .carousel-item:not(.active) .slider-img {
            animation-play-state: paused;
        }

        /* ==========================================================================
           CRITICAL RESPONSIVENESS (Media Queries)
           ========================================================================== */
        
        /* Tablets and Mobile Devices (Portrait up to Landscape) */
        @media (max-width: 991.98px) {
            .display-1 {
                font-size: 4rem; /* Downscaled main discount header */
            }
            .slider-img {
                max-height: 45vh; /* Prevents image from hogging space on medium screens */
            }
        }

        /* Small Mobile Devices (Phones) */
        @media (max-width: 767.98px) {
            .carousel-inner, .carousel-item {
                height: auto !important;
            }
            .display-1 {
                font-size: 3.2rem;
            }
            .brand-font {
                font-size: 0.95rem;
            }
            .slider-img {
                max-height: 35vh;
                margin-bottom: 30px;
            }
            /* Centered Thumbnail Navigation at the bottom of the phone screen */
            .custom-thumbnails {
                right: 50%;
                transform: translateX(50%);
                bottom: 25px;
            }
            .custom-thumbnails button {
                width: 60px !important;
                height: 42px !important;
            }
        }

/* slider css end */

/* ==========================================================================
   1. DESKTOP VIEW HOVER FIX (Large Screens - min-width: 1200px)
   ========================================================================== */
/* --- Global Overrides & Cleanup --- */
.dropdown-item {
    position: relative;
    display: block;
}

/* Force block bootstrap standard caret on all screens to remove dual icons */
.dropdown-toggle::after {
    display: none !important;
}

/* Custom Navigation Arrow Configuration */
.nav-link .arrow {
    font-size: 8px;
    margin-left: 6px;
    opacity: 0.8;
    display: inline-block;
    transition: transform 0.3s ease; /* Smooth rotation transition effect */
}

/* Target element rotation framework on layout active triggers */
.dropdown.show .nav-link .arrow,
.dropdown-item.show .nav-link .arrow {
    transform: rotate(180deg); /* Flips the arrow upwards on click */
}

/* Hidden Dropdown Base Control State */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 760px;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 30px;
    border-radius: 0 0 3px 3px;
    display: none; 
    z-index: 999;
}

/* Toggle displays strictly combined with Bootstrap's core action handlers */
.dropdown-item.show .mega-dropdown,
.dropdown.show .mega-dropdown {
    display: block !important;
}

/* White Triangle Pointer at Top */
.mega-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 45px;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    transform: rotate(45deg);
}

/* Internal Layout Grid */
.dropdown-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.grid-column {
    flex: 1;
}

.grid-column h3 {
    font-size: 13px;
    color: #22252a;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

.grid-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grid-column ul li {
    margin-bottom: 12px;
}

.grid-column ul li a {
    color: #777777;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-block;
    transition: color 0.15s, transform 0.15s;
}

.grid-column ul li a:hover {
    color: #000000;
    transform: translateX(3px);
}

/* Right Side Promo Display Card */
.promo-section {
    flex: 1.3;
    background-color: #f4f4f4;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding: 25px;
    min-height: 250px;
}

.promo-text {
    position: relative;
    z-index: 2;
    max-width: 55%;
}

.promo-text h2 {
    font-size: 22px;
    color: #22252a;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 15px;
}

.promo-text .orange-text {
    color: #ee5b24;
    font-size: 34px;
}

.promo-text .rotated-off {
    font-size: 11px;
    display: inline-block;
    transform: rotate(-90deg) translate(-8px, -8px);
    font-weight: 700;
}

.shop-now-btn {
    display: inline-block;
    background-color: #22252a;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 18px;
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
}

.shop-now-btn:hover {
    background-color: #ee5b24;
}

.promo-image {
    position: absolute;
    right: -15px;
    bottom: 0;
    height: 95%;
    object-fit: contain;
    z-index: 1;
}

/* Responsive Viewports Framework Control (max-width: 1200px) */
@media screen and (max-width: 1200px) {
    .mega-dropdown {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        padding: 15px !important;
    }
    
    .mega-dropdown::before {
        display: none !important;
    }

    .dropdown-grid {
        flex-direction: column !important;
        gap: 25px !important;
    }

    .grid-column {
        width: 100% !important;
    }

    .promo-section {
        min-height: auto !important;
        padding: 20px !important;
        justify-content: space-between !important;
    }

    .promo-text {
        max-width: 60% !important;
    }

    .promo-image {
        position: relative !important;
        right: 0 !important;
        height: 120px !important;
        object-fit: contain !important;
    }

    .standard-to-mega {
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    
}

/* Desktop Presentation Viewport Limits (min-width: 1200px Only) */
@media screen and (min-width: 1200px) {
    .standard-to-mega {
        width: 280px !important;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 8px !important;
        padding: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    }

    .standard-to-mega ul li a {
        display: block;
        padding: 8px 0;
        color: #777777;
        text-decoration: none;
        font-size: 13px;
        transition: all 0.3s ease;
    }

    .standard-to-mega ul li a:hover {
        color: #000000 !important;
        padding-left: 5px;
    }
}

   .arrow {
      display: inline-block;
      transition: transform 0.3s ease; /* Smooth rotation speed */
      font-size: 0.8rem;
    }

    /* ONLY flips when Bootstrap applies the '.show' class on click */
    .custom-dropdown-btn.show .arrow {
      transform: rotate(180deg);
    }
      .standard-to-mega .grid-column h3 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        color: rgba(82, 83, 83, 0.4);
        margin-bottom: 15px;
        border-left: 2px solid #ff7300;
        padding-left: 8px;
    }

    /* EXTRA BOX BOOST */
 .full-screen-slider {
            height: 80vh;
            min-height: 500px;
        }
        
        .slide-item .animate-step {
            opacity: 0;
        }
        
        .carousel-item.active .animate-step {
            opacity: 1;
        }

        .scroll-animate-card {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        .scroll-animate-card.animated-in {
            opacity: 1;
            transform: translateY(0);
        }

        .product-card-porto {
            background: #fff;
            border: 1px solid #e7e7e7;
            padding: 5px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .product-card-porto:hover {
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            transform: translateY(-5px);
        }

        .product-image-box {
            background-color: white;
            /* height: 200px; */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            /* overflow: hidden; */
            margin-bottom: 15px;
        }

        .product-image-box i {
            transition: transform 0.5s ease;
        }

        .product-card-porto:hover .product-image-box i {
            transform: scale(1.15);
        }

        .blur-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            z-index: 1;
            opacity: 0.15;
        }
        .shape-1 { width: 200px; height: 200px; background: #0088cc; top: 10%; left: 20%; }
        .shape-2 { width: 150px; height: 150px; background: #ff7300; bottom: 10%; right: 20%; }
        .slider-img { position: relative; z-index: 2; }

        /* --- Ultra Boost Banner Section Styles --- */
        .porto-banner-section {
            background-color: #0e0e10;
            min-height: 500px;
            color: #ffffff;
            position: relative;
            overflow: hidden;
            padding: 80px 0;
            display: flex;
            align-items: center;
        }

        .porto-banner-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%);
            pointer-events: none;
        }

        .scroll-trigger-element {
            opacity: 0;
        }

        .main-product-display {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .main-product-img {
            width: 100%;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0px 25px 35px rgba(0,0,0,0.8));
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: rotate(-7deg);
        }

        .float-animation {
            animation: floatSneaker 4s ease-in-out infinite alternate;
        }

        @keyframes floatSneaker {
            0% { transform: translateY(0) rotate(-6deg); }
            100% { transform: translateY(-15px) rotate(-8deg); }
        }

        .img-fade-effect {
            opacity: 0;
            transform: scale(0.95) rotate(0deg) !important;
        }

        .banner-product-title {
            font-size: 3.5rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            line-height: 1;
        }

        .color-swatch-container {
            display: flex;
            gap: 12px;
            margin-bottom: 35px;
            flex-wrap: wrap;
        }

        .swatch-item {
            width: 80px;
            height: 80px;
            background-color: #ffffff;
            border: 2px solid transparent;
            cursor: pointer;
            padding: 4px;
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .swatch-item img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .swatch-item:hover, .swatch-item.active {
            border-color: #ffffff;
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(255,255,255,0.15);
        }

        .btn-porto-shop {
            background-color: #ffffff;
            color: #0e0e10;
            border: none;
            border-radius: 0;
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 15px 50px;
            transition: all 0.3s ease;
        }

        .btn-porto-shop:hover {
            background-color: #e2e2e2;
            letter-spacing: 4px;
        }

        /* Responsive Setup Rules */
        @media (max-width: 991.98px) {
            .banner-product-title { font-size: 2.8rem; }
            .swatch-item { width: 70px; height: 70px; }
        }

        @media (max-width: 767.98px) {
            .porto-banner-section { padding: 50px 0; text-align: center; }
            .banner-product-title { font-size: 2.3rem; margin-top: 30px; }
            .color-swatch-container { justify-content: center; gap: 8px; }
            .swatch-item { width: 65px; height: 65px; }
            .main-product-display { max-width: 320px; }
        } 
        /* category dropdown */
        .mobile-categories-menu{
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
    pointer-events: none;
    border-radius: 12px;
    overflow: hidden;
}

.mobile-categories-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-categories-item{
    padding: 12px 18px;
    transition: all .3s ease;
}

.mobile-categories-item:hover{
    background: #f8f9fa;
    padding-left: 25px;
}
.mobile-categories-dropdown .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;

    display: none;
    margin-top: 10px;
    border-radius: 12px;
}

.mobile-categories-dropdown .dropdown-menu.show {
    display: block;
    animation: slideDown .3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* card quick view */
/* Card aur Wrapper ko position relative dena zaroori hai hover line ke liye */
.pv-card-container {
    position: relative;
}

.pv-img-wrapper {
    position: relative;
    overflow: hidden;
}

/* Desktop Hover Overlay Line/Bar */
.pv-desktop-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1c1d1f; /* Screenshot jesa dark background */
    color: #ffffff;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(100%);
    z-index: 2;
}

/* Desktop Hover Trigger */
@media (min-width: 992px) {
    .pv-img-wrapper:hover .pv-desktop-overlay {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Fixed Button Styling */
@media (max-width: 991.98px) {
    .pv-mobile-action-btn {
        font-size: 12px;
        padding: 9px;
        border-radius: 4px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
}



/* ======================================================= */
/* Isolated Scope Layout & Smooth Zoom System Controls     */
/* ======================================================= */

/* Image Frame Wrapper Layer */
.md-zm-img-container {
    position: relative;
    overflow: hidden; /* Bahar nikalte hue zoom area ko wrap karne ke liye */
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

/* Base Image Node properties for Smooth scaling */
.md-zm-target {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
    display: inline-block;
    will-change: transform;
}

/* 1. Laptop/Desktop Hover Mode Integration */
@media (min-width: 992px) {
    .md-zm-img-container:hover .md-zm-target {
        transform: scale(1.5); /* 1.5x scaling zoom aspect change */
        cursor: zoom-in;
    }
}

/* 2. Mobile/Small Screen Touch Responsive Finger Zoom Integration */
@media (max-width: 991.98px) {
    .md-zm-img-container:active .md-zm-target {
        transform: scale(1.4); /* Finger placement holding scale trigger */
    }
}

/* Gallery Thumbnails active item borders layout */
.md-zm-thumb {
    transition: all 0.2s ease-in-out;
    opacity: 0.6;
}
.md-zm-thumb:hover, 
.md-zm-thumb-active {
    border-color: #000000 !important;
    opacity: 1;
}

/* Variation Buttons Layout style overrides */
.md-zm-size-btn {
    border-radius: 3px !important;
    font-weight: 500;
}
.md-zm-size-btn:hover {
    border-color: #000000 !important;
    color: #000000 !important;
}

/* Footer Utility Circular Elements */
.md-zm-social-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: #555555 !important;
    border-color: #dddddd !important;
    background-color: #ffffff;
    transition: all 0.2s ease;
}
.md-zm-social-icon:hover {
    background-color: #000000;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Add to Wishlist link text hover states */
.md-zm-wishlist-link {
    color: #222222 !important;
    transition: opacity 0.2s ease;
}
.md-zm-wishlist-link:hover {
    opacity: 0.7;
}

/* Add To Cart Button layout focus fixes */
.md-zm-cart-action-btn:hover {
    background-color: #1c1d1f !important;
}
@media (max-width: 780.98px) {
.paddingcatindex{
    display: none;
}

}
@media (max-width: 767.98px) {
  .carousel-indicators.custom-thumbnails {
    position: absolute;
    bottom: 10px;
    margin: 0;
    padding: 0 15px;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto; /* Swipeable thumbnails */
    max-width: 100%;
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }

  .carousel-indicators.custom-thumbnails::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }

  .carousel-indicators.custom-thumbnails button {
    width: 45px !important;
    height: 45px !important;
    flex-shrink: 0;
    border-radius: 8px !important;
    overflow: hidden;
    border: 2px solid transparent !important;
    opacity: 0.6;
    padding: 0 !important;
    background: none;
  }

  .carousel-indicators.custom-thumbnails button img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-indicators.custom-thumbnails button.active {
    opacity: 1;
    border-color: #ff6600 !important; /* Active image border */
    transform: scale(1.05);
  }
}
.carouselsize{
    height: 550px;
    
}

/* Container Box */
.lux-main-img-box {
  background-color: #f8f9fa !important; /* Soft neutral backdrop for 1:1 products */
  cursor: crosshair;
}

.img-zoom-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Image Smooth Scaling & Transition */
.product-zoom-img {
  transition: transform 0.2s ease-out;
  transform-origin: center center;
  pointer-events: none; /* Cursor tracking improve karne ke liye */
}

/* Thumbnails Amazon Vibe */
.lux-thumb {
  background: #fff;
  border: 1.5px solid #e0e0e0 !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.lux-thumb:hover {
  border-color: #f57224 !important; /* Daraz Orange Accent */
}

.lux-thumb.active {
  border-color: #f57224 !important; /* Active Outline */
  box-shadow: 0 0 0 1px #f57224;
}
       .heightdiv{
            height:140px;
        }



        .quantity-selector {
            max-width: 120px;
        }
        .quantity-input {
            max-width: 50px;
            background-color: #fff !important;
        }
        .cart-item img {
            object-fit: cover;
            max-height: 100px;
            width: 100%;
        }
        .cart-item {
            transition: all 0.3s ease-out;
        }
        .fade-out {
            opacity: 0;
            transform: scale(0.9);
        }

/* Card Container */
.sale-card-square {
    background: #ffffff;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #f0f0f0 !important;
}

.sale-card-square:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
}

/* 1:1 Aspect Ratio Box Solution */
.sale-img-square-wrapper {
    aspect-ratio: 1 / 1; /* Strictly enforces 1:1 ratio */
    width: 100%;
    position: relative;
}

.sale-product-img {
    object-fit: cover; /* Change to 'contain' if products have white background padding */
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sale-card-square:hover .sale-product-img {
    transform: scale(1.06);
}

/* Floating Discount Badge */
.sale-badge-floating {
    background: #dc3545;
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

/* Typography & Labels */
.sale-category {
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.sale-product-title {
    color: #111827;
    font-size: 0.95rem;
}

.sale-price {
    font-weight: 800;
}

.original-price {
    font-size: 0.8rem;
}

/* Button Customization */
.sale-btn-action {
    background-color: #111827;
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.sale-btn-action:hover {
    background-color: #dc3545;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(220, 53, 69, 0.25);
}

.sale-btn-action i {
    transition: transform 0.3s ease;
}

.sale-btn-action:hover i {
    transform: translateX(4px);
}


/* Exactly 2 lines truncation with Ellipsis (...) */
.text-ellipsis-2, 
.product-meta-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word; /* lambe words ko ache se break karne ke liye */
}


/* Filter Item list row layout */
.filter-item {
    display: flex;
    align-items: center; /* Ya 'align-items: flex-start;' agar text 2 lines ka ho toh top align rakhna ho */
    gap: 10px;          /* Box aur Text ke darmiyan space */
    margin-bottom: 12px;
}

/* Checkbox ka fixed size set karein taake stretch na ho */
.filter-checkbox {
    width: 18px;            /* Dynamic change nahi hoga */
    height: 18px;           /* Dynamic change nahi hoga */
    min-width: 18px;        /* Prevent shrinking (is se size same rahega) */
    min-height: 18px;       /* Prevent shrinking */
    flex-shrink: 0;         /* Flex container me squeeze hone se rokega */
    
    border: 1px solid #ccc; /* Checkbox border */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Active State styling (Black background with white tick) */
.filter-item.active .filter-checkbox {
    background-color: #000;
    border-color: #000;
}

.filter-item.active .filter-checkbox::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
@media (max-width: 767.98px) {
.paddingdiv{
    height: 200px;
    background-color: #212529;
}
}

@media (min-width: 767.98px) {
.paddingdiv{
    
    height: 100px;
    background-color: #212529;
}
}