/*
    Theme Name: Freecoder
    Version: 1.0.3
    Author: Saha Alam
    Author uri: www.youtube.com/@freecoderbd
    Description: this is a e-commerce theme. every part is responsive. this theme work all of devices. you can try
    this theme for your website. thank you.
*/
/*-----------------------------------*\
  #index.css
\*-----------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Foldit:wght@100..900&family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&display=swap');

@font-face{
    font-family: DancingScript-Medium;
    src: url(font/DancingScript-Medium.ttf), format(truetype), 
        url(font/DancingScript-Medium.eot), format(eot), 
        url(font/DancingScript-Medium.woff), format(woff),
        url(font/DancingScript-Medium.svg), format(svg)
    ; 
}
@font-face{
    font-family: HooglyMJ;
    src: url(font/HooglyMJ.ttf), format(truetype), 

    ; 
}
/**
 * copyright 2022 Freecoder BD
 */
 


/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/
:root{

    /**
     * color
     */

    --primary-color: #240046;
    --fs-color-primary: #240046;
    --fs-color-secondary: #ff6f43;
    --fs-color-success: #6bd425;
    --fs-color-alert: #ff1616;
    --fs-experimental-link-color: #240046;
    --fs-experimental-link-color-hover: #ff6f43;

    --gold-1:hsl(48, 89%, 50%);
  --gold-crayola: hsl(38, 61%, 73%);
  --orangeRed: hsl(11, 89%, 50%);
  --quick-silver: hsla(0, 0%, 65%, 1);
  --davys-grey: hsla(30, 3%, 34%, 1);
  --smoky-black-1: hsla(40, 12%, 5%, 1);
  --smoky-black-2: hsla(30, 8%, 5%, 1);
  --smoky-black-3: hsla(0, 3%, 7%, 1);
  --eerie-black-1: hsla(210, 4%, 9%, 1);
  --eerie-black-2: hsla(210, 4%, 11%, 1);
  --eerie-black-3: hsla(180, 2%, 8%, 1);
  --eerie-black-4: hsla(0, 0%, 13%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --white-alpha-20: hsla(0, 0%, 100%, 0.2);
  --white-alpha-10: hsla(0, 0%, 100%, 0.1);
  --white-alpha-80: hsla(0, 0%, 100%, 0.8);
  --black: hsla(0, 0%, 0%, 1);
  --black-alpha-80: hsla(0, 0%, 0%, 0.8);
  --black-alpha-50: hsla(0, 0%, 0%, 0.5);
  --black-alpha-15: hsla(0, 0%, 0%, 0.15);
  --pink: hsla(0, 100%, 89%, 1);
  --pink-alpha-15: hsla(0, 100%, 89%, 0.15);
  --pink-alpha-50: hsla(0, 100%, 89%, 0.5);
  --pink-alpha-80: hsla(0, 100%, 89%, 0.8);
  --plum: hsla(327, 71%, 80%, 1);
  --plum-alpha-10: hsla(327, 71%, 80%, 0.10);
  --plum-alpha-15: hsla(327, 71%, 80%, 0.15);
  --plum-alpha-50: hsla(327, 71%, 80%, 0.5);
  --plum-alpha-80: hsla(327, 71%, 80%, 0.8);
  --color-brand-primary: #fd384f;
  --color-brand-disable: #ffb5bb;
  --color-brand-bg: #ffe6e7;
  --color-brand-bg-1-1: #ffeeee;
  --color-function-4-1: #ce7039;
  --color-function-4-2: #f4dacc;
  --color-function-4-13: #fff2eb;
  --color-grey-1: #f5f5f5;
  --color-grey-2: #ebebeb;
  --color-grey-3: #ccc;
  --color-grey-6: #757575;
  --color-grey-10: #191919;
  --color-success-primary: #096;
  --color-success-primary-2: #74e195;
  --color-success-secondary: #d7e8df;
  --color-success-bg: #eefaf6;
  --color-notification-primary: #3170ee;
  --color-notification-secondary: #cadcfe;
  --color-notification-bg: #ebf1ff;
  --color-warning-primary: #f50;
  --color-warning-secondary: #ffddc9;
  --color-warning-bg: #fff1eb;
  --color-function-1-1: #096;
  --color-function-1-2: #d7e8df;
  --color-function-1-3: #eefaf6;
  --color-function-2-1: #3170ee;
  --color-function-2-2: #cadcfe;
  --color-function-2-13: #ebf1ff;
  --color-function-3-1: #f50;
  --color-function-3-2: #ffddc9;
  --color-function-3-3: #fff1eb;
  --color-mask-black-1: rgba(0,0,0,0.04);
  --color-mask-black-2: rgba(0,0,0,0.1);
  --color-mask-black-3: rgba(0,0,0,0.2);
  --color-mask-black-4: rgba(0,0,0,0.5);
  --color-mask-black-5: rgba(0,0,0,0.8);
  --color-mask-white-1: hsla(0,0%,100%,0.04);
  --color-mask-white-2: hsla(0,0%,100%,0.1);
  --color-mask-white-3: hsla(0,0%,100%,0.2);
  --color-mask-white-4: hsla(0,0%,100%,0.5);
  --color-mask-white-5: hsla(0,0%,100%,0.8);
  --color-black: #000;
  --color-white: #fff;
  --color-Transparent: transparent;
  
  /**
   *Gradient color
   */
  
   --loading-text-gradient: linear-gradient(90deg, transparent 0% 16.66%, var(--smoky-black-3) 33.33% 50%,  transparent 66.66% 75%);
  --gradient-1: linear-gradient(to top,hsla(0, 0%, 0%, 0.9),hsla(0, 0%, 0%, 0.7),transparent);
  
  
  /**
   *Typography
   */ 
  
  /**
   *Font family
   */
   --fontFamily-forum: 'Forum', cursive;
   --fontFamily-dm_sans: 'DM Sans', sans-serif;
  
   /* font-size */
  
   --fontSize-display-1: calc(1.3rem + 6.7vw);
   --fontSize-headline-1: calc(2rem + 2.5vw);
   --fontSize-headline-2: calc(1.3rem + 2.4vw);
   --fontSize-title-1: calc(1.6rem + 1.2vw);
   --fontSize-title-2: 2.2rem;
   --fontSize-title-3: 2.1rem;
   --fontSize-title-4: calc(1.6rem + 1.2vw);
   --fontSize-body-1: 2.4rem;
   --fontSize-body-2: 1.6rem;
   --fontSize-body-3: 1.8rem;
   --fontSize-body-4: 1.6rem;
   --fontSize-label-1: 1.4rem;
   --fontSize-label-2: 1.2rem;
  
   /* Font-weight */
  
   --weight-regular: 400;
  --weight-bold: 700;
  
  /* line-height*/
  
  
  --lineHeight-1: 1em;
  --lineHeight-2: 1.2em;
  --lineHeight-3: 1.5em;
  --lineHeight-4: 1.6em;
  --lineHeight-5: 1.85em;
  --lineHeight-6: 1.4em;
  
  /* Letter-spacing */
  
  --letterSpacing-1: 0.15em;
  --letterSpacing-2: 0.4em;
  --letterSpacing-3: 0.2em;
  --letterSpacing-4: 0.3em;
  --letterSpacing-5: 3px;
  
  /* spacing */
  
  --section-space: 70px;
  
  /**
   *Shahow
   */
  
   --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);
   --shadow-2: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.35);
   --shadow-3: 0px 0px 5px 0px #072904;
   --shadow-4: 0px 0px 2px 0px #000000;
   --shadow-5: 0px 0px 5px -0.5px #000000;
   --shadow-green: 0px 0px 10px 0px hsla(92, 100%, 26%, 0.864);
    /**
   *Border-radius
   */
  --border-half: 0.5px solid;
  --border-1px: 1px solid;
  --border-2px: 2px solid;

   /**
   *Border-radius
   */
  
   --radius-24: 24px;
  --radius-circle: 50%;
  
  /**
   *Transition
   */
  
   --transition-1: 250ms ease;
  --transition-2: 500ms ease;
  --transition-3: 1000ms ease;
  
  }
  
  
  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/
  
  *,
  *::before,
  *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  a,
  img,
  data,
  span,
  input,
  button, 
  ion-icon,
  textarea {
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  img {
    height: auto;
  }
  
  input,
  button,
  select,
  textarea {
    background: none;
    border: none;
    font: inherit;
  }
   input,
   select,
   textarea {
    width: 100%;
    outline: none;
   }
  
   button{ cursor: pointer;}
   address{ font-style: normal;}
   html{
    font-size: 10px;
    scroll-behavior: smooth;
  }
  body{
    background-color: var(--white-alpha-20);
    color: var(--black-alpha-50);
    font-family: var(--fontFamily-dm_sans);
    font-size: var(--fontSize-body-4);
    font-weight: var(--weight-regular);
  }
  /*
    Header start hear
  */
  .main-header{
    width: 100%;
    height: 100%;
    position: sticky;
    top: 0;
    z-index: 99999;
    background-color: var(--white);
    box-shadow: var(--shadow-2);
  }
  .second-header{
    width: 98%;
    height: 100%;
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding: 5px 0 0 0;
  }

/* main logo design */
.main-logo img{
    cursor:pointer;
    width: 200px;
    margin-left: 50px;
  }

/* search section design */
.search-box{
    width: 40%;
    height: auto;
    border-radius:25px;
    transition:  all ease-in 200ms;
    &:hover{
        box-shadow: var(--shadow-4);
    }
  }
  .search-box .site-search {
    
  }
.search-box form{
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 25px;
    border: var(--border-1px)var(--fs-experimental-link-color-hover);

}
.search-box form input[type="search"]{
    position: relative;
    padding:2px 10px 2px 20px;
    border-radius:25px;
    font-size: 15px;
    background-color: var(--white-alpha-10);
    color: var(--black);
    width:100%;
}
.search-icon {
    background-color: var(--color-warning-bg);
    font-size: 30px;
    cursor: pointer;
    padding: 4.8px 8px;
    border-radius:0 25px  25px 0;
    color: var(--black);
}

/* ------------ core look ------------ */
    
.search‑box   { background:none; border:0; padding:.4rem; cursor:pointer; }
  .search‑icon   { display:none; }      /* desktop: hide icon */


/* ------------ overlay ------------ */
.search‑overlay{
  position:fixed; inset:0; background:#fff; z-index:1000;
  transform:translateY(-100%); transition:transform .25s ease;
  display:flex; flex-direction:column; align-items:center;
  padding:1rem;
}
.search‑overlay.open{                      /* toggled via JS */
  transform:translateY(0);
}
.overlay‑inner    { width:100%; max-width:600px; display:flex; }
.overlay‑field    { flex:1 1 auto; padding:.65rem 1rem; font-size:1.05rem;
                    border:1px solid #ccc; border-radius:4px; }
.overlay‑close    { background:none; border:0; font-size:2rem;
                    line-height:1; margin-left:.5rem; cursor:pointer; }





/* login singup design */
.log-menu ul{
    display: flex;
    list-style-type: none;
}
.log-menu ul li{
    margin-right: 10px;
}
.log-menu ul li a{
    background-color: var();
    color: var(--fs-color-primary);
    padding: 3px 10px;
    border: var(--border-1px);
    border-radius: 20px;
    transition: var(--transition-2);
    &:hover{
        box-shadow: var(--shadow-4);
        color: var(--color-brand-primary);
        background-color: var(--white-alpha-80);
        border: var(--border-1px)var(--color-brand-primary);
    }
}

/*
    profile start
*/
.user-info{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.user-info img{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: 0 5px 0 0;
}
.user-info p{
    font-size: 12px;
    color: var(--fs-color-primary);
    transition: var(--transition-1);
    &:hover{
        color: var(--color-brand-primary);
    }
}
.profile-logo{
    cursor:pointer;
    color: var(--fs-color-primary);
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    transition: var(--transition-1);
    &:hover{
        color: var(--color-brand-primary);
    }
}
.profile-logo h3{
    font-size: 15px;
}
.profile-icon{
    margin-right: 7px;
}

.profile-sub-menu{
    z-index: 99999999999999;
    width: 10%;
    margin: 5px 0 0 10px;
    position: absolute;
    background-color: var(--white);
    border-radius:8px;
    box-shadow: var(--shadow-2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s;
}
.profile-sub-menu.open-menu{
    max-height: 400px;
}
.profile-sub-menu ul{
    list-style: none;

}
.profile-sub-menu ul li{
    margin: 15px 0 0 0;
}
.profile-sub-menu ul li a{  
    display: flex;
    align-items: center; 
    font-size: 12px;
    padding:5px 20px 10px;
    color:var(--black-alpha-50);
    transition: var(--transition-1);
    &:hover{
        margin: 0 0 0 5px;
        color: var(--color-brand-primary);
    }
 }
 .profile-sub-menu ul li a{
    flex-grow: 1;
    margin: 0 10px 0 0 ;
 }
 .profile-sub-menu ul li a i{
    margin: 0 10px 0 0;
 }

 .toggle-menu

 /* shopping-cart */
.cart .shopping-cart{
    padding: 10px;
    margin-right: 25px;
    color: var(--fs-color-primary);
    cursor: pointer;
    transition: var(--transition-1);
    &:hover{
        color: var(--color-brand-primary);
    }
}

 .cart-icon {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 18px;
            cursor: pointer;
        }

        .cart-count {
            background: red;
            color: white;
            font-size: 12px;
            border-radius: 50%;
            padding: 3px 7px;
            position: absolute;
            top: -10px;
            right: -10px;
        }
.cart_menu{
    list-style-type: none;
}
.cart-wrapper .cart-count{
    top: 0;
    right:0;
    margin: 10px 10px 0 0;
    padding: 3px 5px;
    font-size: 10px;
    user-select: none;
}    
#floating-cart {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}
#floating-cart .cart-contents {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
}
.cart-count {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    margin-left: 8px;
}


/*
    Second layer start
*/

.second-lay{
    margin: 0px 0 0 80px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Categories-menu ul{
    list-style: none;
    width: 250px;
    position: relative;
    &:hover .scrollbar{
        margin-top: -34px;
        z-index: 999999;
    }
}
.Categories-menu ul li{
    position: relative;
}
.Categories-menu ul li a{
    display: flex;
    align-items: center;
    color: var(--fs-color-primary);
    background-color: var(--gold-1);
    font-size: 15px;
    margin: 0 0 0 5px;
    padding: 8px 20px;
    border-radius: 25px;
    
}
.Categories-menu ul li a p{
    flex-grow: 1;
}
.Categories-menu ul li a span{
    font-size: 30px;
    position:absolute;
    margin: -25px 0 0 180px ;
    
}
.main_categories a .first-span{
    top: 6px;
}

.all-categories{
    margin: 0 8px 0 0;
}
/*
    menu design start
*/
.scrollbar{
    display: flex;
    width: 250px;
    list-style: none;
    margin-top: -9999999px;
    height: 550px;
    position:absolute;
    background-color: var(--white);
    box-shadow: var(--shadow-2);
    border-radius: 17px;
    max-width: 560px;
    overflow:hidden;
    transition: margin-top .18s ease;
}
.scrollbar.show{ margin-top: -34px; z-index: 999999; } /* the slide‑down */
.scroll-inner{
  max-height:550px;
  overflow-y: scroll;     
  overflow-x: hidden;         /* both scroll bars generated */
  /* clip-path:inset(0 0 0 0);    clips only the bars themselves */
}
/* optional – hide scrollbar track on WebKit (aesthetic) */
/* .scroll-inner::-webkit-scrollbar{ width:6px; }
.scroll-inner::-webkit-scrollbar-track{ background:transparent; } */

.scrollbar ul li{
    position: relative;
    &:hover .sub-menu-div{
        top: 200px;
    }
}
.scrollbar ul li:first-child{
    align-items: center;
    margin: 0;
    padding: 5px 0;
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 99;
    color: var(--black);
    &:hover{
        color: var(--black);
    }
}

.scrollbar ul li a img{
    padding: 7px 0 0px;
    color: var(--black-alpha-50);
}
.scrollbar ul li a{
    padding: 5px 20px;
    font-size: 15px;
    background-color: #ffffff;
    &:hover{
        color: var(--color-brand-primary);
    }
}

.sub-categories{}
.scrollbar ul li{
    position: relative;
    padding: 4px 0;
}
.scrollbar ul li a{
    display: flex;
    align-items:first center;
    
    
}
.scrollbar ul li a p{
    
}
.scrollbar ul li a i{margin: 0 8px 0 0;font-size: 15px;color: var(--black-alpha-50);}
.scrollbar ul li a i.fa-caret-down{margin: 0 8px 0 70px;font-size: 15px;color: var(--black-alpha-50);}
.scrollbar ul li a span{font-size: 28px; margin: 19px 0 0 180px ;color: var(--black);}
.scrollbar ul li a i img{color: var(--black-alpha-80);}
/*
    Drop Down start
*/
/* ① generic reset so nested <p> & icons line up nicely */
/* =====================================================
   FLY‑OUT SUBMENU  ( *** FIXED *** )
===================================================== */
/* 1. generic reset so nested <p> & icons line up nicely */
.sub-categories li a{
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* 2. each first‑level item anchors its own panel */
.has-sub{ position: relative; }

/* 3. panel itself */
/* ===== fly‑out panel – hidden by default ===== */
.has-sub > .sub-menu{
    display: none;          /* <‑‑‑ hides completely */
    position: absolute;
    top: 0;
    left: 80%;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    padding: .75rem 0;
    list-style: none;
    z-index: 9999999;
}

/* ===== show it on hover / keyboard focus ===== */
@media (hover:hover){
  .has-sub:hover        > .sub-menu{
      display: block;    /* <‑‑‑ makes it appear */
  }
}


/* 5. submenu items tidy */
.sub-menu li a{
  display: block;
  padding: .45rem 1rem;
  font-size: .92rem;
  white-space: nowrap;
  color: inherit;
}
.sub-menu li a:hover{ background:#f7f7f7; }

/* 6. mobile accordion behaviour */
@media (max-width:767px){
  .has-sub > .sub-menu{
    position: static;
    transform: none;
    opacity: 1; visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .has-sub.open > .sub-menu{ max-height: 1000px; }
}

/* 7. make sure nothing clips the fly‑out */
.sub-categories,
.sub-categories li{ overflow: visible!important; }
/*
*   All Drop Down menu hover effect
*/
/*
*   Main Navigation menu start here
*/
.main-nav-menu{
    flex-grow: 1;
}
.main-nav-menu ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 80px 0 40px;
    padding: 8px 20px;
    background-color: var(--color-brand-bg);
    border-radius: 8px;
}
.main-nav-menu ul li{}
.main-nav-menu ul li a{
    color: var(--color-brand-primary);
    &:hover{
        color: var(--color-success-primary);
        
    }
}

/*
*  Main Sections start here
*/
.our-services{
    padding-bottom:2px ;
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.our-services h2{
    text-align: center;
    margin: 0 20px 0 20px;
    font-family: "EB Garamond", serif;
    font-weight: 500;
    font-size: 17px;
  font-style: normal;
    color: var(--color-function-1-1);
}
.all-services{
    flex-grow: 1;
    width: 130px;
}
.our-services .icon img{
    margin: 0 auto;
    width: 25px;
    height: 25px;
}
.our-services .icon-text{
    font-size: 11px;
    text-align: center;
    color: var(--black);
}
.our-services p{
    font-size: 8px;
    text-align: center;
    color: var(--black);

}

/*
*  All offer start here
*/

.offer-wrap{
    padding: 10px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.all-offer{
height: 270px;
}
.all-offer-login{
    height: 200px;
}
.offer-1{
    width: 18%;
}
 .offer-1 .singup{
    width: 200px;
    height: 140px;
    background-color: var(--pink-alpha-15);
    border-radius: 25px;
    padding: 15px;
    margin: 10px 0 16px 0;
    box-shadow: var(--shadow-2);
} 
.singup ul{
    margin: 7px 0 0 0;
    list-style: none;
    display: flex;
    justify-content: center;
}
.singup ul li{
    padding: 0 5px;
}
.singup ul li a{
    padding: 6px 15px;
    font-size:12px;
    background-color: var;
    border-radius: 25px;
    transition: var(--transition-1);
}
.singup .social-icons li a:hover{
    margin-top: 3px;
}
.singup ul li .color-1{
    color: var(--white);
    background-color: var(--black);
    transition: var(--transition-1);
    &:hover{
        color: var(--white-alpha-80);
        box-shadow: var(--shadow-2);
    }
}
.singup ul li .color-2{
    color: var(--black);
    background-color: var(--white);
    border: var(--border-1px)var(--black);
    transition: var(--transition-1);
    &:hover{
        color: var(--black-alpha-80);
        box-shadow: var(--shadow-2);
        background-color: var(--white-alpha-20);
}
}
.singup ul li a img{
    width: 30px;
    height: 30px;
}
.offer-1 p{
    margin: 12px 0 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}
.singup .social-icons{
    margin: 13px 0 0 0;
}
.social-icons li{}
.singup .social-icons li a{
    padding: 2px 3px;
}
.offer{
    margin: 0 0 16px 0;
    cursor: pointer;
    width: 200px;
    height: 55px;
    background-color: var(--color-function-3-3);
    border-radius: 25px;
    box-shadow: var(--shadow-2);
    transition: all ease-in-out 200ms;
    &:hover{
        padding: 2px 0 0 0 ;
    }
}
.offer h3{
    padding:6px 0;
    color: var(--orangeRed);
    text-align: center;
}
.offer h5{
    margin: 0 0 10px 0;
    text-align: center;
}



/*
* all slider style start here
*/

.slider{

    width: 79%;
    height: 250px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadow-2);
}
.list{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    width:max-content;
    transition: 1s;
}
.item a{
    height: 100%;
    object-fit: cover;
    border-radius: 10px;

}
.item img{
    width: 1000px;
    /* max-width: 1000vw; */
    height: 100%;
    object-fit: cover;
    border-radius: 10px;

}
.buttons{
    position: absolute;
    top: 35%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buttons button{
    width: 30px;
    height: 60px;
    border-radius: 25px;
    color: #ffffff;
    border: none;
    background-color: #81818132;
    font-weight: bold;
}
.dots{
    position: absolute;
    bottom: 10px;
    width: 100%;
    left: 0;
    color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;

}
.dots li{
    list-style: none;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    margin: 10px;
    border-radius:10px;
    transition: 1s;
}
.dots li.active{
    width: 20px;
}
.item p{
    text-align: center;
    color: red;

}
.item p del{
    color: gray;
}
.slick-next, .slick-prev-default{
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
border: none;
outline: 0;
transition: all .4s ease-in-out;
overflow: hidden;
}



/* categories menu slider */

.category-slider-wrapper {
  width: auto;
  overflow: hidden;
  margin: 0 76px 0 270px;
}
.category-slider-wrapper-login{
     width:auto;
  overflow: hidden;
  margin: 0 76px 0 60px;
}

.category-slider {
  display: flex;
  align-items: center;
  padding: 0 5px;
  white-space: nowrap;
  animation: scrollLeft 50s linear infinite;
}

.category-item {
  flex: 0 0 auto;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  user-select: none;
}

.category-item ul{
    list-style-type:none;
}
.category-item ul
.category-item ul li {
    text-decoration: none;
}
.category-item ul li a img{
    width: 100px;
    height: auto;
    object-fit: contain;
    border-radius: 100%;
    margin: 0 20px;
}


/* Animation Keyframes */
@keyframes scrollLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
  
}
/*
* all slider style end here
*/



/************
 ************content section start here 
 ************/
.content{
    width: 100%;
    margin: 0 auto;
}
.content-wrapper{
    width: 95%;
    margin: 0 auto;
    padding: 5px;
    
}
/* 
#  ---> main product design start here
*/




/* 
#  ---> footer section start here
*/
.main-footer{
    width: 100%;
}
.footer-wrapper{
    width: 95%;
    margin: 0 auto;
    padding: 5px 5px 20px 5px;
    
}
.main-footer-menu h2{
    font-size: 17px;
    display: inline-block;
    color: var(--color-function-3-1);
    cursor: default;
}
.main-footer-menu{
    background-color: var(--color-function-2-13);
    display: flex;
    justify-content: center;
    height: auto;
    padding: 30px;
    border-radius: 25px;
    box-shadow: var(--shadow-2);
}
.main-footer-menu-section{
    margin-left: 40px;
    display: flex;
    justify-content: center;
    height: auto;
    border-radius: 25px;
}

.main-footer-menu .item1{

}
.main-footer-menu .item1 ul{
    width: 430px;
    
}
.main-footer-menu .item1 ul li{
    display: inline-block;
}
.main-footer-menu .item1 ul li a{
    width: 160px;
}
.main-footer-menu-section .item2 {
    width: 130px;   
}
.main-footer-menu-section .item3{
    width: 150px;   
}
.main-footer-menu-section .item4 {
    width: 200px;   
}
.footer-menu ul{
    list-style: none;
    padding: 10px 0 0 0 ;
}
.footer-menu{

}
.footer-menu ul li a{
    padding: 0 0 5px 0;
    font-size: 12.3px;
    transition:  all ease-in-out 100ms;
    &:hover{
        font-weight: bold;
        color: var(--color-function-3-1);
    }
}
.main-footer-menu .item5 ul li a img{
    width: 100px;
    margin: 0 auto;
}
.main-footer-menu .item4 {
    text-align: center;
}
.main-footer-menu .item4 ul li{
    display: inline-block;
}
.main-footer-menu .item4 i{
    color: var(--color-function-2-1);
    font-size: 3rem;
    width: 40px;
    transition:  all ease-in-out 300ms;
    &:hover{
        color: var(--color-brand-primary);
    }

}

.pay-copyright-section{
    margin: -160px 0 0 620px;
    position: absolute;
    display: flex;
    align-items: center;

}
.pay-copyright-section ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 300px;
}
.pay-copyright-section ul li {
    padding: 10px;
}
.pay-copyright-section ul li img{
    width: 80px;
    height: 30px;
}
.copyright{
    padding: 20px;
    text-align: center;
    margin: 20px 0 0 60px;
    width: 250px;
    font-size: 15px;
    color: var(--color-warning-primary);
}


/* mobile menu */
div.mobile-menu-wrapper{
    display: none;
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    z-index: 999999999999999;
    background-color: var(--white);
    box-shadow: var(--shadow-2);
}
div.mobile-menu-wrapper ul.mobile-menu{
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #010213c7;
    padding: 0 10px;
}
div.mobile-menu-wrapper ul.mobile-menu li{
    
}
div.mobile-menu-wrapper ul.mobile-menu li a{
    padding: 10px 15px;
}
div.mobile-menu-wrapper ul.mobile-menu li a i{
    font-size: 20px;
    color: #ffffff;

}