@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&family=Playfair+Display:wght@600;700&display=swap');


*
{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    /*font-family: 'Montserrat', sans-serif;*/
    /*font-family: "Inter", sans-serif;*/
    font-family: "Outfit", sans-serif;
}

body, html {
  overflow-x: hidden;
  background-color: var(--lightbeige);
}

.container-fluid {
    padding: 0;
    margin: 0;
  }

:root
{
    --swiper-theme-color: #000; /* Changes navigation arrows, autoplay progress stroke, etc. */
    /*--royalgreen : #0b3d2e;*/
    --royalgreen : #000000;
    --royalgold : #c0a24b;
    --lightbeige : #e9e9e9;
    --mediumbeige : #dadada;
    --muted : #999999;
    --lightmuted : #c1c1c1;
    --color1 : #000000;
    --color2 : #ffffff;
    --color3 : grey;
    --color4 : #D32F2F;
    --color5 :  #1976D2;
    --color6 : #F5F5F5;
    --color7 : #388E3C;
    --color8 : #fd7e14;
    --color9 : #09a311;
    --color10 : #c7c8c9;

    /* New Color Set Below Start */
    --color11 : #ff9800;
    --color12 : #e68900;

    --color13 : #ff4081;
    --color14 : #e6006d;

    --color15 : #007bff;
    --color16 : #0056b3;

    --color17 : #28a745;
    --color18 : #218838;

    --color19 : #ff5722;
    --color20 : #e64a19;

    --color21 : #6c757d;
    --color22 : #5a6268;

    --color23 : #ffe2d8;
    --color24 : #cde4fc;
    --color25 : #ffeeee;

    --color26 : #aa1c1c;
    --color27 : #FFD700;
    --color28 : #f79cba;
    --color29 : #8B0000;
    --color30 : #ffd812;
    --color31 : #1c1b17;
    /* New Color Set Below End */
}

.n-header-main
{
    position : fixed;
    /*border-bottom: 2px solid var(--color6);*/
    box-shadow: 0 5px 35px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Text Color Start */
.n-text-color-1
{
    color: var(--color1) !important;
}

.n-text-color-2
{
    color: var(--color2) !important;
}

.n-text-color-3
{
    color: var(--color3);
}

.n-text-color-4
{
    color: var(--color4);
}

.n-text-color-5
{
    color: var(--color7);
}

.n-text-color-9
{
    color: var(--color9);
}

.n-text-color-20
{
    color: var(--color20);
}

.n-text-color-16
{
    color: var(--color16);
}

.n-text-color-29
{
    color: var(--color29);
}

.n-text-color-royalgreen
{
    color: var(--royalgreen);
}

.n-text-color-royalgold
{
    color: var(--royalgold);
}

.n-text-color-lightbeige
{
    color: var(--lightbeige);
}

.n-text-color-muted
{
    color: var(--muted);
}

.n-text-color-lightmuted
{
    color: var(--lightmuted);
}

.n-text-color-mediumbeige
{
    color: var(--mediumbeige);
}
/* Text Color End */

/* Paragraph Tag or p tag Start */
.n-p-1
{
    margin-top: 5px;
    margin-bottom: 5px;
}

.n-p-2
{
    font-size: 12px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
}

.n-p-3
{
    font-size: 12px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
}

.n-p-4
{
    font-size: 15px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
    word-spacing: 1px;
    line-height: 20px;
}

.n-p-4 span
{
    font-size: 13px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
    word-spacing: 1px;
    line-height: 25px;
    text-decoration: line-through;
}

.n-p-5
{
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 600;
}

.n-p-6
{
    font-size: 17px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 600;
}

.n-p-7
{
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 600;
}

.n-p-8
{
    font-size: 11px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 600;
}

.n-p-9
{
    font-size: 19px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
    word-spacing: 1px;
    line-height: 20px;
}

.n-p-9 span
{
    font-size: 12px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
    word-spacing: 1px;
    line-height: 25px;
    text-decoration: line-through;
}

.n-p-10
{
    font-size: 14px;  /* Smaller font size for mobile */
    margin-top: 5px;
    margin-bottom: 5px;
    word-spacing: 1px;  
}
/* Paragraph Tag or p tag End */

/* Font Weight Start */
.n-text-weight-1
{
    font-weight: 600;
}

.n-text-weight-2
{
    font-weight: bold;
}
/* Font Weight End */

/* Slider Arrow Start */
.n-prev-1
{
    position: absolute;
    top: 35%; /* Adjusts the distance from the top */
    left: 1%; /* Adjusts the distance from the right */
    /* transform: translate(-50%, -50%); */
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.8); /* Grey background with 50% opacity */
    padding: 10px;
}

.n-prev-icon-1
{
    width: 30px;
    height: 30px;
    background-size: 100%;
}

.n-next-1
{
    position: absolute;
    top: 35%; /* Adjusts the distance from the top */
    right: 1%; /* Adjusts the distance from the right */
    /* transform: translate(-50%, -50%); */
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.8); /* Grey background with 50% opacity */
    padding: 10px;
}

.n-next-icon-1
{
    width: 15px;
    height: 15px;
    background-size: 100%;
}
/* Slider Arrow End */

.input-group-btn
{
    background-color: #000;
    border-radius: 10px;
}

.input-group-btn i
{
    color: #fff;
}

/* Bootstrap Indicator Slider Start */
/* Set the background color of all indicators to grey */
.carousel-indicators button {
    background-color: grey !important; /* Grey background for inactive indicators */
    border-radius: 50%; /* Makes the indicators circular */
    width: 10px !important; /* Set the size of the indicator */
    height: 10px !important; /* Ensure height equals width to make the button circular */
    opacity: 0.7; /* Slight transparency for inactive buttons */
    padding: 0; /* Remove any padding */
}

/* Set the background color of the active indicator to black */
.carousel-indicators .active {
    background-color: black !important; /* Black background for the active indicator */
    opacity: 1; /* No transparency for the active button */
}

/* Bootstrap Indicator Slider End */

/* Animation Start */
.blink-animation
{
    animation: blink 0.4s infinite alternate;
}

@keyframes blink
{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes smooth-glow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.n-blur-effect
{
    background-color:#ccc;
    filter:blur(2px);
    text-decoration:line-through;
}

/* Animation End */

/* Button Start */
.n-submit-btn-1
{
    border: none;
    background-color: var(--color1);
    color: #ffffff;
    font-size: 14px;
    padding: 15px 30px;
    border-radius: 30px;
}

.n-btn-2
{
    border: none;
    border: 1px solid var(--royalgreen);
    background-color: transparent;
    color: var(--royalgreen);
    text-decoration : none;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 15px;
    /*border-radius: 5px;*/
}

.n-btn-2:hover
{
    background-color: var(--color5);
    color: #ffffff;
    transition: 0.6s;
}

.n-btn-3
{
    border: none;
    background-color: var(--color1);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 15px 30px;
}

.n-btn-3:hover
{
    background-color: var(--color3);
    color: #ffffff;
    transition: 0.6s;
}

.n-btn-4
{
    border: none;
    background-color: var(--color5);
    width: 100%;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
}

.n-btn-4 input
{
    background-color: transparent;
    border: none;
    color: #ffffff;
}

.n-btn-5
{
    border: 1px solid var(--color18);
    background-color: var(--color17);
    width: 100%;
    color: #ffffff;
    padding: 5px 20px;
    width: fit-content;
    font-size: 12px;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    text-decoration: none;
}

.n-btn-5:hover
{
    background-color: var(--color18);
    color: #ffffff;
}

.n-btn-6
{
    border: 1px solid var(--color22);
    background-color: var(--color21);
    width: 100%;
    color: #ffffff;
    padding: 5px 20px;
    width: fit-content;
    font-size: 12px;
    font-weight: 600;
    transition: 0.3s ease-in-out
}

.n-btn-6:hover
{
    background-color: var(--color22);
}

.n-btn-7
{
    border: 1px solid var(--color30);
    background-color: var(--color30);
    width: 100%;
    color: #000000;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    text-decoration : none !important;
}

.n-btn-7:hover
{
    background-color: var(--color27);
}

.n-btn-8
{
    border: 1px solid var(--color20);
    background-color: var(--color19);
    width: 100%;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease-in-out
}

.n-btn-8:hover
{
    background-color: var(--color20);
}

.n-btn-9
{
    /*border: 1px solid var(--color1);*/
    /*background-color: var(--color2);*/
    background-color: rgba(0, 0, 0, 0.08);
    width: 100%;
    color: #000000;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 14px;
    text-align: center;
    width: fit-content;
    font-weight: 500;
    transition: 0.3s ease-in-out;
    /*border-radius: 25px;*/
}

.n-btn-9:hover
{
    color: #000000;
    background-color: var(--color10);   
}

.n-btn-10
{
    border: 2px solid var(--royalgreen) !important;
    background-color: transparent;
    color: var(--royalgreen);
    border: 1px solid black;
    padding: 0px 5px;
}

.n-btn-10:hover i
{
    /*transition : 0.4s;*/
    color: var(--color4) !important; 
}

.n-btn-11
{
    border: none;
    background-color: transparent;
}

.n-btn-12
{
    border: none;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid var(--color2);
    padding: 5px;
    text-decoration: none;
}

.n-btn-12:hover
{
    transition : 0.4s;
    color: var(--color2); 
}
/* Button End */

/* Mode of Payment Box Start */
.payment-mode-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.payment-option {
    position: relative;
    cursor: pointer;
    /*border: 2px solid transparent;*/
    padding: 15px 25px;
    font-weight: 600;
    font-size: 14px;
    color: #444;
    background: transparent;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
    max-width: 300px;
    box-shadow: inset 0 0 0 1px #ccc;
}

.payment-option:hover {
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: inset 0 0 0 2px #bbb;
}

.payment-option input[type="radio"] {
    display: none;
}

.payment-option .radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #aaa;
    display: inline-block;
    margin-bottom: 10px;
    vertical-align: middle;
    position: relative;
    background-color: transparent;
    transition: all 0.3s ease;
}

.payment-option.selected {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.20);
    color: #2e7d32;
    box-shadow: inset 0 0 0 2px #4caf50;
}

.payment-option.selected .radio-circle {
    border-color: #2e7d32;
    background-color: #4caf50;
}
/* Mode of Payment Box End */

/* Input or Form Start */
.n-input-field-1
{
    height: 45px;
    padding: 15px 30px ;
    border-radius: 0px;
}

.n-input-field-2
{
    height: 50px;
    padding: 15px 10px ;
    border-radius: 0px;
}

.n-form-col
{
    margin-bottom: 25px;
}
/* Input or Form End */

/* Random CSS Start */
.d-flex 
{
    display: flex;
    width: 100%; /* Ensure the div takes up the full width */
}

.n-justify-between
{
    justify-content: space-between; /* Distribute items at the edges */
    width: 100%;
}
/* Random CSS End */

/* Add to cart and wishlist fixed button Start */
.fixed-buttons
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0px 10px 10px;
    background-color: #fff;
    box-shadow: 0 -1px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Ensures it's on top */
}

.fixed-buttons .btn
{
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    font-size: 16px;
}

/* Optional styling for buttons */
.btn-cart
{
    background-color: var(--color18) !important;
    border: 2px solid var(--color18);
    color: var(--lightbeige);
}

.btn-cart:hover
{
    background-color: var(--color17);
    border: 2px solid var(--color17);
    color: #ffffff;
}

.btn-wishlist
{
    background-color: var(--color19);
    border: 2px solid var(--color19);
    color: #ffffff;
}

.btn-wishlist:hover
{
    background-color: var(--color20);
    border: 2px solid var(--color20);
}
/* Add to cart and wishlist fixed button End */

/* Spacer Start */
.n-spacer-1
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.n-spacer-2
{
    margin-top: 50px;
    margin-bottom: 50px;
}

.n-spacer-3
{
    margin-top: 60px;
    margin-bottom: 60px;
}

.n-spacer-4
{
    margin-top: 5px;
    margin-bottom: 5px;
}

.n-spacer-5
{
    margin-top: 30px;
    margin-bottom: 30px;
}

.n-spacer-6
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.n-spacer-7
{
    margin-top: 30px;
    margin-bottom: 30px;
}

.n-spacer-8
{
    margin-top: 49px;
    margin-bottom: 49px;
}

.n-spacer-9
{
    margin-top: 70px;
    margin-bottom: 70px;
}
/* Spacer End */

/* Product Slider Start */
/* .n-horizontal-product-slider-1
{
    width: 305px;
} */

.n-horizontal-product-slider-container
{
    display: flex;  /* Arrange items in a row */
    flex-wrap: nowrap;  /* Prevent items from wrapping to the next line */
    overflow-x: auto;  /* Enable horizontal scrolling */
    gap: 10px;  /* Add space between each product */
    -webkit-overflow-scrolling: touch;  /* Enable smooth scrolling for touch devices */
}

.n-horizontal-product-slider-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.n-horizontal-product-slider-1
{
    display: flex;
    flex-direction: column;  /* Arrange image and text vertically inside each item */
    min-width: 260px;  /* Ensure each item has a minimum width */
}

.n-category-slider-2
{
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 15px;
    overflow: scroll;
}

.n-category-slider-2::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
/* Product Slider End */

/* Breadcrumb Start */
.n-breadcrumb-1 nav ol li
{
    font-size: 12px;
}

.n-breadcrumb-1 nav ol li a
{
   text-decoration: none;
   color: #000000;
}
/* Breadcrumb End */

/* Sidebar Bg Image Start */
.n-sidebar-bg-image-1
{
    /* background-image: url('https://i.pinimg.com/736x/2a/41/35/2a41350060e9b7c9f88254220072a1c3.jpg'); */
    /* background-image: url('https://t3.ftcdn.net/jpg/01/41/84/88/360_F_141848864_fOE5gFSTLaEZlp76k7C8n3OXf14cwxkR.jpg'); */
    /*background-image: url('https://img.freepik.com/free-photo/gray-wall-textures-background_74190-2715.jpg');*/
    /*background-image: url('https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA1L3RwMjUzLWJhY2tncm91bmQtMDQteC1oLWpvYjE2MzEuanBn.jpg');*/
    background-color: #f9f4f2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Sidebar Bg Image End */

/* Background Image Start */
.n-bg-image-1
{
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('https://plus.unsplash.com/premium_photo-1718913936342-eaafff98834b?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dCUyMHNoaXJ0fGVufDB8fDB8fHww');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 50px;
}

.n-bg-image-2
{
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://thumbs.dreamstime.com/b/retro-fold-white-cotton-t-shirt-clothes-mock-up-template-gray-cement-background-concept-retail-dress-shop-backdrop-blank-139918216.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Background Image End */

/* Padding Start */
.n-padding-1
{
    padding-left: 70px;
    padding-right: 70px;
}

.n-padding-2
{
    padding-top: 70px;
    padding-bottom: 70px;
}

.n-padding-3
{
    padding: 0px;
}

.n-padding-4
{
    padding-top: 20px;
    padding-bottom: 20px;
}

.n-padding-5
{
    padding: 5px
}

.n-padding-6
{
    padding-top: 20px;
    padding-bottom: 20px;
}

.n-padding-7
{
    padding: 20px 30px;
}

.n-padding-8
{
    padding-left : 50px;
    padding-right : 50px;
}
/* Padding End */

/* Images Start */
.n-img-1
{
    /*padding: 5px;*/
    /*border: 1px solid var(--color3);*/
    /*border-radius: 35px;*/
}

.n-img-2
{
    
}
/* Images End */

/* A Tag Start */
.n-a-1
{
    font-size: 11px;
    color: var(--color1);
    margin-right: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-decoration: none;
}

.n-a-1 span
{
    color: var(--color4);
    text-decoration: line-through;
}

.n-a-2
{
    background-color: var(--color19);
    border: 2px solid var(--color19);
    color: #ffffff;
    font-size: 14px;
    padding: 15px 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.n-a-2:hover
{
    color: #ffffff;
    background-color: var(--color20);
    border: 2px solid var(--color20);
}

.n-a-3
{
    background-color: var(--color18);
    border: 2px solid var(--color18);
    color: var(--lightbeige);
    font-size: 14px;
    font-weight: 500;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.n-a-3:hover
{
    background-color: var(--color17);
    border: 2px solid var(--color17);
    color: #ffffff;
}

.n-a-4 i
{
    font-size: 24px;
    color: var(--color1);
    margin-right: 15px;
}

.n-a-4 i:hover
{
    color: var(--color4);
}

.n-a-5
{
    text-decoration: none;
    color : #000000;
    font-size: 14px;  /* Smaller font size for mobile */
    margin-top: 10px;
    margin-bottom: 10px;
}

.n-a-5:hover
{
    color: #000000;
}

.n-a-6
{
    text-decoration: none;
    color : #ffffff;
}

.n-a-6:hover
{
    color : #ffffff;
}

.n-a-7
{
    text-decoration: none;
    color : #000000;
    font-size: 16px;  /* Smaller font size for mobile */
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

.n-a-7:hover
{
    color: #000000;
}

.n-a-8
{
    background-color: var(--color11);
    border: 2px solid var(--color12);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.n-a-8:hover
{
    color: #ffffff;
    background-color: var(--color12);
}
/* A Tag End */

/* Header Badge Count Start */
.count-badge
{
    position: absolute;
    top: -5px; /* Move the badge slightly above the text */
    right: -10px; /* Position the badge at the top-right of the text */
    background-color: #FF0000; /* Red background for the badge */
    color: white; /* White text for visibility */
    padding: 2px 4px; /* Padding for the badge */
    font-size: 8px; /* Smaller font for the badge */
    border-radius: 50%; /* Round the corners to make it circular */
    font-weight: bold;
}

.n-badge-1
{
    background-color: var(--royalgreen);
    padding: 5px 10px;
    font-size: 11px;
}

.n-badge-5
{
    background-color: var(--color26);
    padding: 5px 10px;
    color: #000000;
    font-size: 12px;
    border-radius: 25px;
}

.n-badge-conatiner-2
{
    position: absolute;
    /*top: 0px;*/
    /*left: 0px;*/
    bottom: -16px; 
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center; /* Centers the heart icon inside the container */
    align-items: center; /* Vertically centers the heart icon */
    z-index: 10; /* Ensures it appears above the image */   
}

.n-badge-2
{
    background-color: var(--royalgreen);
    padding: 7px 14px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    /*width: fit-content;*/
    /*border-radius: 25px 25px 0px 0px;*/
}

.n-badge-3
{
    background-color: var(--color27);
    padding: 5px 10px;
    color: #ffffff;
    font-size: 11px;
}

.n-badge-4
{
    background-color: var(--royalgreen);
    padding: 5px 10px;
    color: var(--lightbeige);
    font-size: 11px;
}
/* Header Badge Count End */

/* Header Icon Start */
.n-header-icon-1 li
{
    margin-left: 30px !important;
}

.n-header-icon-1 li i
{
    font-size: 20px;
}
/* Header Icon End */

/* Margin Start */
.n-margin-1
{
    margin-bottom: 25px;
}

.n-margin-2
{
    margin: 0px 0px 35px;
}

.n-margin-3
{
    margin-right: 40px;
}

.n-margin-4
{
    margin: 0px;
}
/* Margin End */

/* Box Start */
.n-box-1
{
    border: 1px dotted var(--color1);
    width: fit-content;
    margin: 0px auto 0px;
    padding: 10px 20px;
}

.n-box-2
{
    border: 1px solid var(--color2);
    padding: 10px 20px 40px;
}

.n-box-3
{
    /* height: 50vh;
    overflow: scroll; */
    padding: 0px 20px;
}

.n-box-4
{
    border: 1px solid var(--color3);
    padding: 20px;
    margin-bottom: 30px;
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
}

.n-box-5
{
    border: 1px solid var(--color10);
    padding: 20px;
    margin-bottom: 30px;
}

.n-box-6
{
    padding: 0px 7px;
}

.n-box-7
{
    background-color: #000000;
    padding: 10px 20px;
}

.n-box-8
{
    border: 1px solid var(--color10);
    /*padding: 20px;*/
    margin-bottom: 30px;
}

.n-box-9
{
    position: relative;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    padding: 12px 20px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    background-color: #c6f7d7; /* Fallback light greenish */
    margin-bottom : 30px;
}

.n-box-9::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #81c784, #558b2f, #ffca28); /* Darker green → olive → soft orange */
    background-size: 300% 100%;
    z-index: -1;
    animation: smooth-glow 2s ease-in-out infinite;
    opacity: 0.7;
}

.n-box-10
{
    position: relative;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    padding: 12px 20px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    background-color: #ffebee; /* Fallback light red */
    margin-bottom: 30px;
}

.n-box-10::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff5252, #ff7043, #ffcc80); /* Soft red -> orange -> soft peach */
    background-size: 300% 100%;
    z-index: -1;
    animation: smooth-glow 2s ease-in-out infinite;
    opacity: 0.7;
}

.n-box-11
{
    background-color: var(--color7);
    padding: 10px 20px;
}

.n-box-12
{
    padding: 10px;
    text-align: center;
}

.n-inside-box-12
{
    border: 1px solid grey;
    padding: 10px;
    border-radius: 25px;
}
/* Box End */

/* Heading Tag Start */
.n-h2-1
{
    font-size: 32px;
    font-weight: bold;
    word-spacing: 1px;
}

.n-h2-2
{
    font-size: 18px;
    font-weight: bold;
    word-spacing: 1px;
    background: linear-gradient(to bottom, rgb(0 0 0 / 96%), rgba(11, 10, 8, 1));
    width: fit-content;
    margin: auto;
    padding: 15px 45px;
    color: #ffd800;
    border-radius: 0px 0px 25px 25px;
    /*font-family: 'Akira Expanded', sans-serif !important;*/
    text-transform: uppercase;
    letter-spacing: 1px;
}

.n-h3-1
{
    font-size: 14px;
}

.n-h4-1
{
    font-size: 25px;
    font-weight: bold;
    word-spacing: 1px;
}

.n-h5-1
{
    font-size: 30px;
    font-weight: bold;
}

.n-h6-1
{
    font-size: 16px;
    font-weight: bold;
}

.n-h6-2
{
    font-size: 14px;
    font-weight: bold;
}

.n-h6-3
{
    font-size: 18px;
    font-weight: bold;
}
/* Heading Tag End */

/* Size Box Start */
.n-size-selector 
{
    display: flex;
    flex-wrap: wrap; /* Ensures wrapping on smaller screens */
    justify-content: center; /* Centers items */
    gap: 10px; /* Adds even spacing between buttons */
    padding: 10px;
}

.n-size-selector input 
{
    display: none; /* Hide default radio button */
}

.n-size-selector label 
{
    width: 50px; /* Square shape */
    height: 50px; /* Ensures uniform square */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    border: 1px solid var(--royalgreen);
    color: var(--royalgreen);
    cursor: pointer;
    transition: all 0.3s ease;
}

.n-size-selector label:hover
{
    background-color: var(--color10);
    transition: 0.4s;
}

.n-size-selector input:checked + label 
{
    background-color: var(--royalgreen);
    color: var(--lightbeige);
    /*border-color: black;*/
}

/* Responsive Fix */
@media (max-width: 576px) 
{
    .n-size-selector 
    {
        gap: 10px !important; /* Adjust spacing for small screens */
    }
    .n-size-selector label 
    {
        width: 40px; /* Slightly bigger touch area on mobile */
        height: 40px;
        font-size: 14px;
    }
}
/* Size Box End */

/* Footer Content Start */
.n-footer-content-1
{
    margin-bottom: 30px;
}
/* Footer Content End */

/* Mobile-specific Styles */
@media (max-width: 767px)
{
    /*.payment-option .radio-circle*/
    /*{*/
    /*    margin-right: 0px;*/
    /*    margin-bottom: 10px;*/
    /*}*/
    /* Paragraph Tag or p tag Start */
    .n-p-1
    {
        font-size: 12px;  /* Smaller font size for mobile */
    }
    
    .n-badge-1
    {
        background-color: var(--royalgreen);
        padding: 3px 8px;
        font-size: 10px;
    }

    .desktop-version
    {
        display: none !important;
    }

    .n-centerlised-content-2
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    /* Paragraph Tag or p tag End */

    .n-h2-1
    {
        font-size: 28px;
    }

    .n-h4-1
    {
        font-size: 22px;
    }

    .n-text-align-center-2
    {
        text-align: left;
        justify-content:unset !important;
    }
    
    .n-p-4
    {
        font-size: 13px;  /* Smaller font size for mobile */
        margin-top: 3px;
        margin-bottom: 3px;
        word-spacing: 1px;
        /*line-height: 10px;*/
    }

    .n-p-9
    {
        font-size: 16px;  /* Smaller font size for mobile */
        margin-top: 5px;
        margin-bottom: 5px;
        word-spacing: 1px;
        line-height: 20px;
    }

    .n-p-9 span
    {
        font-size: 12px;  /* Smaller font size for mobile */
        margin-top: 5px;
        margin-bottom: 5px;
        word-spacing: 1px;
        line-height: 25px;
        text-decoration: line-through;
    }
    
    .n-padding-8
    {
        padding-right: 30px;
        padding-left: 30px;
    }
    
    .n-p-10
    {
        font-size: 13px;  /* Smaller font size for mobile */
    }
    
    .n-p-11
    {
        font-size: 20px;  /* Smaller font size for mobile */
        margin-top: 5px;
        margin-bottom: 5px;
        word-spacing: 1px;
        line-height: 25px;
    }
    
    .n-p-11 span
    {
        font-size: 13px;  /* Smaller font size for mobile */
        margin-top: 5px;
        margin-bottom: 5px;
        word-spacing: 1px;
        line-height: 25px;
        text-decoration: line-through;
    }
}

/* Tablet-specific Styles */
@media (min-width: 768px) and (max-width: 1024px)
{
    /* Paragraph Tag or p tag Start */
    .n-p-1
    {
        font-size: 13px;  /* Adjust font size for tablets */
    }

    .desktop-version
    {
        display: none !important;
    }

    .n-centerlised-content-2
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    /* Paragraph Tag or p tag End */
}

/* Small Desktop Styles */
@media (min-width: 1025px) and (max-width: 1280px)
{
    /* Paragraph Tag or p tag Start */
    .n-p-1
    {
        font-size: 14px;  /* Default size for small desktop */
    }

    .mobile-tablet-version
    {
        display: none;
    }
     /* Paragraph Tag or p tag End */
}

/* Large Desktop Styles */
@media (min-width: 1281px)
{
    /* Paragraph Tag or p tag Start */
    .n-p-1
    {
        font-size: 16px;  /* Larger font size for large desktops */
    }

    .mobile-tablet-version
    {
        display: none;
    }
     /* Paragraph Tag or p tag End */
}

/* Background Color Start*/
.n-bg-color-1
{
    background-color: var(--color1);
}

.n-bg-color-2
{
    background-color: var(--color4);
}

.n-bg-color-3
{
    background-color: var(--color5);
}

.n-bg-color-4
{
    background-color: var(--color6) !important;
}

.n-bg-color-5
{
    background-color: var(--color8);
}

.n-bg-color-6
{
    background-color: var(--color7);
}

.n-bg-color-7
{
    background-color: var(--color3);
}

.n-bg-color-8
{
    background-color: var(--color2);
}

.n-bg-color-11
{
    background-color: var(--color11);
}

.n-bg-color-12
{
    background-color: var(--color12);
}

.n-bg-color-13
{
    background-color: var(--color13);
}

.n-bg-color-14
{
    background-color: var(--color14);
}

.n-bg-color-15
{
    background-color: var(--color15);
}

.n-bg-color-19
{
    background-color: var(--color19);
}

.n-bg-color-20
{
    background-color: var(--color20);
}

.n-bg-color-23
{
    background-color: var(--color23);
}

.n-bg-color-24
{
    background-color: var(--color24);
}

.n-bg-color-25
{
    background-color: var(--color25);
}

.n-bg-color-26
{
    background-color: var(--color26);
}

.n-bg-color-27
{
    background-color: var(--color27);
}

.n-bg-color-28
{
    background-color: var(--color28);
}

.n-bg-color-30
{
    background-color: var(--color30);
}

.n-bg-color-31
{
    background-color: var(--color31);
}

.n-bg-color-royalgreen
{
    background-color: var(--royalgreen);
}

.n-bg-color-royalgold
{
    background-color: var(--royalgold);
}

.n-bg-color-lightbeige
{
    background-color: var(--lightbeige);
}

.n-bg-color-muted
{
    background-color: var(--muted);
}

.n-bg-color-lightmuted
{
    background-color: var(--lightmuted);
}

.n-bg-color-mediumbeige
{
    background-color: var(--mediumbeige);
}

.n-bg-gradient-color-1
{
    /*background: linear-gradient(135deg, #e0e0e0, #b0b0b0, #3a3a3a);*/
    background: linear-gradient(135deg, #000000, #737272, #000000);
    /*background: linear-gradient(135deg, #f2f2f2, #d6d6d6, #a9a9a9);*/
}
/* Background Color End*/

/* Text Type Start */
/* .text-muted
{

} */
/* Text Type End */

/* Wishlist heart icon image Start */
/* Parent container for the image */
.n-image-container {
    position: relative; /* This makes it the reference point for positioning the heart icon */
}

/* Container for the wishlist icon with a grey background and 50% opacity */
.n-wishlist-icon-container
{
    position: absolute;
    top: 10px; /* Adjusts the distance from the top */
    left: 10px; /* Adjusts the distance from the right */
    background-color: rgba(0, 0, 0, 0.62);
    padding: 5px;
    border-radius: 50%; /* Makes the background round */
    display: flex;
    justify-content: center; /* Centers the heart icon inside the container */
    align-items: center; /* Vertically centers the heart icon */
    width: 40px; /* Set the width of the background circle */
    height: 40px; /* Set the height of the background circle */
    z-index: 10; /* Ensures it appears above the image */
}

.n-cart-icon-container
{
    position: absolute;
    top: 10px; /* Adjusts the distance from the top */
    right: 10px; /* Adjusts the distance from the right */
    /*background-color: rgba(0, 0, 0, 0.5);*/
    padding: 5px;
    border-radius: 50%; /* Makes the background round */
    display: flex;
    justify-content: center; /* Centers the heart icon inside the container */
    align-items: center; /* Vertically centers the heart icon */
    width: 50px; /* Set the width of the background circle */
    height: 50px; /* Set the height of the background circle */
    z-index: 10; /* Ensures it appears above the image */
}

/* Heart icon inside the container */
.n-wishlist-icon
{
    color: white; /* White color for the heart icon */
    font-size: 15px; /* Size of the heart icon */
    cursor: pointer; /* Changes cursor to pointer when hovering */
}

/* Optional: Add hover effect to the heart icon container */
.n-wishlist-icon-container:hover
{
    background-color: rgb(0, 0, 0); /* Darken the background on hover */
}

.n-cart-icon-container:hover
{
    background-color: rgba(0, 0, 0, 0.7); /* Darken the background on hover */
}

/* Wishlist heart icon image End */

/* Ul and OL List Start */
.n-ul-1
{
    list-style-type: none;
    padding-left: 0px;
}

.n-ul-1 li
{
    margin-top: 8px;
    margin-bottom: 8px;
}

.n-ul-1 li a
{
    text-decoration: none;
    font-size: 12px;
    color: var(--lightbeige);
}

.n-ul-2
{
    text-decoration: none;
    list-style-type: none;
}

.n-ul-2 li
{
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    word-spacing: 1px;
    line-height: 25px;
}

.n-ul-3 a li
{
    font-weight: bold !important;
}
/* Ul and OL List End */

/* Dropdown Start */
.n-cart-page-dropdown
{
    background-color: var(--color6);
    /* padding: 5px 30px; */
    font-size: 12px;
    border: none;
    border-radius: 0px;
    font-weight: 500;
}
/* Dropdown End */
.n-header-row-1
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.n-header-row-2
{
    margin-top: 15px;
    margin-bottom: 15px;
}

.n-inline-list
{
    list-style-type: none;
    display: flex;
}

.n-inline-list ul
{
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.n-inline-list li
{
    display: inline-block;
    margin-left: 8px;
    text-decoration: none;
    font-size: 12px;
    margin-right: 5px;
}



.n-inline-list a{
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
}

.n-inline-list li:first-child
{
    margin-left: 0;
}

.n-text-align-justify
{
    text-align: justify;
}

.n-text-align-center
{
    text-align: center;
    justify-content: center;
}

.n-text-align-center-2
{
    text-align: center;
    justify-content: center;
}

.n-text-align-left
{
    text-align: left;
}

.n-text-align-right
{
    text-align: right;
    justify-content: flex-end;
}

.n-text-align-right-2
{
    text-align: right;
    justify-content: right;
}

.n-header-logo
{
    height: 30px;
}

.n-centerlised-text
{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.n-col-margin-padding
{
    margin: 0px;
    padding: 0px;
}

.n-col-margin-padding-2
{
    margin: 0px;
    padding: 0px;
    border-left: 10px solid transparent;    
    border-bottom: 10px solid transparent;    
}

/*.n-col-image-1*/
/*{*/
/*    overflow-x: scroll;*/
/*    white-space: nowrap;*/
/*}*/

/*.n-col-image-1::-webkit-scrollbar*/
/*{*/
/*    width: 2px;      */
/*    height: 4px;*/
/*}*/

/*.n-col-image-1::-webkit-scrollbar-track*/
/*{*/
/*    background: rgb(255, 255, 255);*/
/*}*/

/*.n-col-image-1::-webkit-scrollbar-thumb {*/
/*    background: #d1d1d1;*/
/*    border-radius: 10px;*/
/*}*/

.n-centerlised-content-1
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* My New Extra Code CSS Start */

.n-product-listing-content-1
{
    margin-top: -100px;
    padding: 110px 0px 0px;
    /*border-radius: 0px 0px 35px 35px;*/
    /*box-shadow: 0px 5px 10px #cbcbcb73;*/
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
}

.swiper-pagination-bullet {
  background-color: #fff !important;
}

.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
}

.autoplay-progress span {
  color: #fff;
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: #fff;
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

/* Icon Start*/
.n-icon-1
{
    position: absolute;
    top: 12%;
    left: -30px;
    width: 130px;
    height: auto;
}

.n-icon-2
{
    position: absolute;
    top: 12%;
    right: -30px;
    width: 130px;
    height: auto;
}

.n-icon-4
{
    position: absolute;
    bottom: -8%;
    left: -12px;
    width: 130px;
    height: auto;
}

.n-icon-5
{
    position: absolute;
    top: -15%;
    right: -8px;
    width: 100px;
    height: auto;
}

.n-icon-6
{
    position: absolute;
    top: -35%;
    left: -8px;
    width: 80px;
    height: auto;
    z-index: 4 !important;
}

/*.n-icon-7*/
/*{*/
/*    position: absolute;*/
/*    bottom: -28%;*/
/*    left: 0%;*/
/*    z-index: 2;*/
/*}*/

.n-icon-3
{
    width: 50px;
}
/* Icon End */

/* Arrow Start */
.n-bottom-arrow 
{
    width: 0;
    height: 0;
    margin: auto;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ffd800; /* Triangle pointing down */
}

.n-top-line-bottom-arrow
{
    height: 5px;
    background-color: #ffd800;
    width: 100%;
    margin-bottom: -5px;
    z-index: 1 !important;
}

/* Arrow End */

/* My New Extra Code CSS End */

/* Bottom Line Start */

.n-bottom-line-1 
{
    background-color: var(--royalgold);
    width: 100px;
    height: 3px;
    margin: 0 auto;
}

/*Bottom Line End*/

/*Random Start*/

.accordion-button 
{
    cursor: pointer;
    background-color: var(--mediumbeige) !important;
    color: var(--royalgreen) !important;
}

.accordion-body
{
    /*background-color: var(--lightbeige) !important;*/
}

.common-background {
    /* 1. Set Background Image and Height */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('../images/bg/black-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 30vh;
    
    /* 2. Position Content at the Bottom Center */
    display: flex;
    align-items: flex-end; /* Pushes content to the bottom */
    justify-content: center; /* Centers content horizontally */
    padding-bottom: 30px; /* Adjust this to change distance from bottom edge */
    
    /* Ensure it spans full width */
    width: 100%;
}

.common-background p {
    /* 3. Apply the Premium Gradient from before */
    background: linear-gradient(to bottom, #E0E0E0 0%, #808080 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    /* 4. Streetwear Typography */
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px)
{
    .common-background {
    /* 1. Set Background Image and Height */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('../images/bg/black-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 20vh;
    
    /* 2. Position Content at the Bottom Center */
    display: flex;
    align-items: flex-end; /* Pushes content to the bottom */
    justify-content: center; /* Centers content horizontally */
    padding-bottom: 30px; /* Adjust this to change distance from bottom edge */
    
    /* Ensure it spans full width */
    width: 100%;
}
}


/*Random Ends*/