/* ------------------------------------------------- */
                                     /* HEADER */
                    /* -------------------------------------------- */
                    #badge
                    {
                        position: absolute;
                        background-color: rgb(225, 36, 36);
                        color: white;
                        border-radius: 50%;
                        padding: 5px 8px;
                        font-size: 14px;
                        top: 10px;
                        right:158px;
                    }
                    #container
                    {
                        background-color: white;
                        margin: auto;
                        text-align: center;
                        width: 100%;
                        display: grid;
                        grid-gap: 10px;
                        grid-template-columns: 1.5fr 1.5fr 5fr 1fr;
                        font-family: 'Lato', sans-serif;
                        z-index: 1;
                        justify-content: space-between;
                        align-items: center;
                        padding: 15px 40px;
                        box-sizing: border-box;
                        position: fixed;
                        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 2px 6px 2px rgba(60, 64, 67, 0.149); 
                    }
                    #shopName 
                    {
                        font-size: 40px; 
                        font-family: 'poppins', sans-serif;
                    }
                    #shopName a
                    {
                        text-decoration: none;
                        color: rgb(29, 29, 29);
                    }
                    #shopName > b
                    {
                        font-weight: 900;
                        font: black;
                    }
                    
                    #collection
                    {
                        font-weight: bold;
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: 15px;
                    }
                    #collection a
                    {
                        text-decoration: none;
                        color: rgb(29, 29, 29);
                    }
                    #clothing a:hover
                    {
                        color: #46d754;
                    }
                    
                    .search
                    {
                        padding: 14px;
                        /* color: gray; */
                        color: rgb(29, 29, 29);
                        min-width: 25px;
                        text-align: center;
                        position: absolute;
                    }
                    
                    .addedToCart
                    {
                        font-size: 1.5em;
                        margin-right: 25px;
                    }
                    #user
                    {
                        display: flex;
                        /* float: right; */
                        align-items: center;
                    }
                    
                    .userIcon
                    {
                        font-size: 30px;
                    }
                    #input 
                    {
                        width: 35em;
                        height: 3em;
                        padding: 2px 50px;
                        background-color: rgb(241, 241, 241);
                        border: none;
                        border-radius: 5px;
                    }
                    #input::placeholder
                    {
                        font-weight: bold;
                    }
                    #input:focus
                    {
                        outline: none;
                    }
                    #user a
                    {
                        color: rgb(29, 29, 29)
                    }
                    
                    /* ----------------------------- MEDIA QUERY --------------------------- */
                    
                    @media(max-width: 1300px)
                    {
                        #collection
                        {
                            font-size: 13px;
                        }
                        #input 
                        {
                            width: 25em;
                        }
                    }
                    @media(max-width: 1212px)
                    {
                        #collection
                        {
                            font-size: 13px;
                        }
                        #input 
                        {
                            width: 20em;
                        }
                        .addedToCart
                        {
                            font-size: 1.5em;
                            margin: 10px 20px;
                        }
                    }
                    
                    @media(max-width: 1090px)
                    {
                        #container
                        {
                            display: grid;
                            grid-template-columns: 1fr 2fr 0.5fr;
                        }
                        #search
                        {
                            display: none;
                        }
                    }
                    @media(max-width: 750px)
                    {
                        #shopName
                        {
                            font-size: 28px;
                        }
                        #collection
                        {
                            font-size: 12px;
                        }
                        .userIcon
                        {
                            font-size: 35px;
                        }
                        .addedToCart
                        {
                            font-size: 1.2em;
                            margin: 10px 20px;
                        }
                    }
                    
                    @media(max-width: 650px)
                    {
                        #shopName
                        {
                            font-size: 24px;
                        }
                        #collection
                        {
                            font-size: 10px;
                        }
                        .userIcon
                        {
                            font-size: 30px;
                        }
                    }
                    @media(max-width: 550px)
                    {
                        #container 
                        {
                            padding: 20px 25px;
                        }
                    }
                    
                    /* badge media */
                    
                    @media(max-width: 1480px)
                    {
                        #badge
                        {
                            right:150px;
                        }
                    }
                    @media(max-width: 1426px)
                    {
                        #badge
                        {
                            right:142px;
                        }
                    }
                    @media(max-width: 1360px)
                    {
                        #badge
                        {
                            right:136px;
                        }
                    }
                    @media(max-width: 1320px)
                    {
                        #badge
                        {
                            right:129px;
                        }
                    }
                    @media(max-width: 1259px)
                    {
                        #badge
                        {
                            right:119px;
                        }
                    }
                    @media(max-width: 1212px)
                    {
                        #badge
                        {
                            right: 96px;
                        }
                    }
                    @media(max-width: 1155px)
                    {
                        #badge
                        {
                            right: 87px;
                        }
                    }
                    @media(max-width: 1090px)
                    {
                        #badge
                        {
                            right: 119px;
                        }
                    }
                    @media(max-width: 1030px)
                    {
                        #badge
                        {
                            right: 109px;
                        }
                    }
                    @media(max-width: 970px)
                    {
                        #badge
                        {
                            right: 100px;
                        }
                    }
                    @media(max-width: 910px)
                    {
                        #badge
                        {
                            right: 94px;
                        }
                    }
                    @media(max-width: 850px)
                    {
                        #badge
                        {
                            right: 87px;
                        }
                    }
                    @media(max-width: 750px)
                    {
                        #badge
                        {
                            right: 87px;
                            padding: 3px 6px;
                            font-size: 12px;
                            top: 12px;
                        }
                    }
                    @media(max-width: 650px)
                    {
                        #badge
                        {
                            right: 78px;
                        }
                    }
                    @media(max-width: 550px)
                    {
                        #badge
                        {
                            right: 62px;
                            top: 18px;
                        }
                    }
                    
                    
                    
                                 /* ----------------------------------------- */
                                             /* PRODUCTS */
                                 /* ----------------------------------------- */
                                 :root {
                                    --shamrock-green: hsl(152, 69%, 60%);
                                    --green-pigment: hsl(152, 62%, 68%);
                                    --white_25: hsla(0, 0%, 100%, 0.25);
                                    --platinum: hsl(0, 0%, 92%);
                                
                                    --white: hsl(0, 0%, 100%);
                                   
                                    /**
                                     * typography
                                     */
                                  
                                    --ff-playfair-display: 'Playfair Display', serif;
                                    --ff-roboto: 'Roboto', sans-serif;
                                    --fs-1: 3rem;
                                    --fs-2: 2.4rem;
                                    --fs-3: 2rem;
                                    --fs-4: 1.8rem;
                                    --fs-5: 1.7rem;
                                    --fs-6: 1.5rem;
                                    --fs-7: 1.4rem;
                                    --fs-8: 1.3rem;
                                    --fs-9: 1rem;
                                  
                                    --fw-400: 400;
                                    --fw-500: 500;
                                    --fw-600: 600;
                                    --fw-700: 700;
                                  
                                    /**
                                     * spacing
                                     */
                                  
                                    --section-padding: 80px;
                                  
                                    /**
                                     * radius
                                     */
                                  
                                    --radius-4: 4px;
                                    --radius-6: 6px;
                                  
                                    /**
                                     * shadow
                                     */
                                  
                                    --shadow-1: 0 12px 25px -8px hsla(0, 0%, 0%, 0.2);
                                    --shadow-2: -12px 0 25px -8px hsla(0, 0%, 0%, 0.2);
                                    --shadow-3: 12px 0 25px -8px hsla(0, 0%, 0%, 0.2);
                                  
                                    /**
                                     * transition
                                     */
                                  
                                    --transition-1: 0.05s ease;
                                    --transition-2: 0.25s ease;
                                    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
                                    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
                                  
                                  }
                                  /*-----------------------------------*\
                                    #RESET
                                  \*-----------------------------------*/
                                  
                                  *,
                                  *::before,
                                  *::after {
                                    margin: 0;
                                    padding: 0;
                                    box-sizing: border-box;
                                  }
                                  
                                  li { list-style: none; }
                                  
                                  a {
                                    text-decoration: none;
                                    color: inherit;
                                  }
                                  
                                  a,
                                  img,
                                  span,
                                  input,
                                  label,
                                  button,
                                  ion-icon { display: block; }
                                  
                                  img { height: auto; }
                                  
                                  input,
                                  button {
                                    background: none;
                                    border: none;
                                    font: inherit;
                                  }
                                  
                                  input { width: 100%; }
                                  
                                  button { cursor: pointer; }
                                  
                                  ion-icon { pointer-events: none; }
                                  
                                  address { font-style: normal; }
                                  
                                  :focus-visible { outline-offset: 4px; }
                                  
                                  ::selection {
                                    background-color: var(--black_50);
                                    color: var(--white);
                                  }
                                  
                                  html {
                                    font-size: 10px;
                                    font-family: var(--ff-roboto);
                                    scroll-behavior: smooth;
                                  }
                                  
                                  body {
                                    font-size: 1.6rem;
                                    background-color: var(--white);
                                  }
                                  
                                  /*-----------------------------------*\
                                    #REUSED STYLE
                                  \*-----------------------------------*/
                                  
                                  .container { padding-inline: 15px; }
                                  
                                  .btn {
                                    background-color: var(--bg-color, var(--emerald));
                                    color: var(--color, var(--white));
                                    display: flex;
                                    align-items: center;
                                    gap: 8px;
                                    width: max-content;
                                    font-size: var(--fs, var(--fs-7));
                                    font-weight: var(--fw, var(--fw-500));
                                    padding: var(--padding, 15px 20px);
                                    border-radius: 50px;
                                    transition: var(--transition-2);
                                  }
                                  
                                  .btn ion-icon { font-size: 1.6rem; }
                                  
                                  .btn-primary:is(:hover, :focus) { --bg-color: var(--green-pigment); }
                                  
                                  .section { padding-block: var(--section-padding); }
                                  
                                  .h2 {
                                    font-size: var(--fs-1);
                                    font-weight: var(--fw-500);
                                    color: var(--russian-violet);
                                  }
                                  
                                  .h3 {
                                    font-family: var(--ff-playfair-display);
                                    font-size: var(--fs-4);
                                  }
                                  
                                /*-----------------------------------*\
                                  #SERVICE
                                \*-----------------------------------*/
                                
                                .service {
                                  background-image: url("../images/partner-left-bg.png");
                                  background-color:#69ec99;
                                  background-repeat: no-repeat;
                                  background-position: left bottom;
                                  background-blend-mode: soft-light;
                                }
                                
                                .service-list {
                                  display: grid;
                                  gap: 15px;
                                }
                                
                                .item-icon {
                                  background-color: var(--white_25);
                                  max-width: max-content;
                                  padding: 20px;
                                  border-radius: 50%;
                                }
                                
                                .service-item {
                                  display: flex;
                                  align-items: center;
                                  gap: 10px;
                                }
                                
                                .item-title { color: var(--white); }
                                
                                /*-----------------------------------*\
                                  #MEDIA QUERIES
                                \*-----------------------------------*/
                                
                                /**
                                 * responsive for larger than 480px screen
                                 */
                                
                                @media (min-width: 480px) {
                                
                                
                                  /**
                                   * SERVICE
                                   */
                                
                                  .service-item { justify-content: center; }
                                
                                }
                                
                                /**
                                 * responsive for larger than 569px screen
                                 */
                                
                                @media (min-width: 569px) {
                                  /**
                                   * SERVICE
                                   */
                                
                                  .service-list { grid-template-columns: 1fr 1fr; }
                                
                                }
                                
                                /**
                                 * responsive for larger than 768px screen
                                 */
                                
                                @media (min-width: 768px) {
                                  /**
                                   * SERVICE
                                   */
                                
                                  .service-list { grid-template-columns: repeat(3, 1fr); }
                                
                                }
                                
                                @media (min-width: 992px) {
                                  /**
                                   * SERVICE
                                   */
                                
                                  .service-item { gap: 20px; }
                                
                                  .item-icon { padding: 25px; }
                                
                                  .item-title { --fs-4: 2.7rem; }
                                
                                }
                    
                    
                    
                    
                    
                                   /* ---------------------------------------------------------- */
                                                      /* FOOTER */
                                  /* --------------------------------------------------------- */
                    #containerFooter
                    {
                        width: 100%;
                        background-color: rgb(29, 29, 29);
                        color: white;
                        letter-spacing: 1px;
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        text-transform: uppercase;
                        font-size: 15px;
                        padding: 15px 300px;
                        box-sizing: border-box;
                    }
                    #containerFooter h3:hover, #containerFooter p:hover
                    {
                        color: lightslategray;
                        cursor: pointer;
                    }
                    #webFooter
                    {
                        padding-top: 30px;
                        font-size: 12px;
                    }
                    #credit 
                    {
                        width: 100%;
                        margin: auto;
                        padding: 20px 0;
                        text-align: center;
                        background-color: rgb(29, 29, 29);
                        color: white;
                        font-size: 11px;
                        letter-spacing: 1px;
                    }
                    
                    #credit a
                    {
                        color: white;
                        text-decoration: none;
                        position: relative;
                    }
                    #credit a::after
                    {
                    content: "";
                    background: white;
                    mix-blend-mode: exclusion;
                    width: calc(100% + 18px);
                    height: 0;
                    position: absolute;
                    bottom: -4px;
                    left: -10px;
                    transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
                    }
                    #credit a:hover::after
                    {
                        height: calc(100% + 8px)
                    }
                    
                    /* ----------------------------- MEDIA QUERY --------------------------- */
                    
                    @media(max-width: 1350px)
                    {
                        #containerFooter
                        {
                            padding: 15px 200px;
                        }
                    }
                    @media(max-width: 1166px)
                    {
                        #containerFooter
                        {
                            padding: 15px 100px;
                        }
                    }
                    @media(max-width: 950px)
                    {
                        #containerFooter
                        {
                            padding: 15px 50px;
                        }
                    }
                    @media(max-width: 850px)
                    {
                        #containerFooter
                        {
                            font-size: 13px;
                        }
                        #webFooter
                        {
                            font-size: 10px;
                        }
                    }
                    @media(max-width: 750px)
                    {
                        #containerFooter
                        {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            padding: 15px 100px;
                        }
                        #webFooter
                        {
                            padding: 15px 20px;
                        }
                    }
                    @media(max-width: 540px)
                    {
                        #containerFooter
                        {
                            padding: 0 25px;
                        }
                    }
                    
                                    /* ------------------------------- */
                                          /* PRODUCT-CARD by ranojit das */
                                    /* ----------------------------------- */
                    
                    
                    
                    
                    
                    
                    :root {
                    
                        /**
                         * colors
                         */
                      
                        --charleston-green: hsl(206, 20%, 14%);
                        --battleship-gray: hsl(0, 0%, 53%);
                        --shamrock-green: hsl(152, 95%, 31%);
                        --russian-violet: hsl(245, 97%, 13%);
                        --yellow-orange: hsl(36, 100%, 50%);
                        --green-pigment: hsl(152, 95%, 33%);
                        --roman-silver: hsl(223, 6%, 55%);
                        --sonic-silver: hsl(0, 0%, 45%);
                        --eerie-black: hsl(210, 11%, 15%);
                        --space-cadet: hsl(222, 36%, 22%);
                        --light-gray: hsl(0, 0%, 82%);
                        --mint-cream: hsl(96, 36%, 95%);
                        --gunmetal-1: hsl(207, 21%, 17%);
                        --gunmetal-2: hsl(206, 21%, 15%);
                        --black_90: hsla(0, 0%, 0%, 0.9);
                        --black_50: hsla(0, 0%, 0%, 0.5);
                        --black_25: hsla(0, 0%, 0%, 0.25);
                        --white_50: hsla(0, 0%, 100%, 0.50);
                        --white_25: hsla(0, 0%, 100%, 0.25);
                        --white_10: hsla(0, 0%, 100%, 0.1);
                        --platinum: hsl(0, 0%, 92%);
                        --cultured: hsl(0, 0%, 94%);
                        --emerald: hsl(152, 95%, 39%);
                        --emerald_70: hsla(152, 95%, 39%, 0.7);
                        --white: hsl(0, 0%, 100%);
                        --black: hsl(0, 0%, 0%);
                        --onyx: hsl(0, 0%, 27%);
                        --jet: hsl(0, 0%, 20%);
                        --russian-violet_65: hsla(245, 97%, 13%, 0.65);
                        --rhythm: hsl(220, 17%, 49%);
                        --spanish-gray: hsl(156, 3%, 61%);
                      
                        /**
                         * typography
                         */
                      
                        --ff-playfair-display: 'Playfair Display', serif;
                        --ff-roboto: 'Roboto', sans-serif;
                      
                        --fs-1: 3rem;
                        --fs-2: 2.4rem;
                        --fs-3: 2rem;
                        --fs-4: 1.8rem;
                        --fs-5: 1.7rem;
                        --fs-6: 1.5rem;
                        --fs-7: 1.4rem;
                        --fs-8: 1.3rem;
                        --fs-9: 1rem;
                      
                        --fw-400: 400;
                        --fw-500: 500;
                        --fw-600: 600;
                        --fw-700: 700;
                      
                        /**
                         * spacing
                         */
                      
                        --section-padding: 80px;
                      
                        /**
                         * radius
                         */
                      
                        --radius-4: 4px;
                        --radius-6: 6px;
                      
                        /**
                         * shadow
                         */
                      
                        --shadow-1: 0 12px 25px -8px hsla(0, 0%, 0%, 0.2);
                        --shadow-2: -12px 0 25px -8px hsla(0, 0%, 0%, 0.2);
                        --shadow-3: 12px 0 25px -8px hsla(0, 0%, 0%, 0.2);
                      
                        /**
                         * transition
                         */
                      
                        --transition-1: 0.05s ease;
                        --transition-2: 0.25s ease;
                        --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
                        --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
                      
                      }
                      
                      
                      
                      
                      
                      /*-----------------------------------*\
                        #RESET
                      \*-----------------------------------*/
                      
                      *,
                      *::before,
                      *::after {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                      }
                      
                      li { list-style: none; }
                      
                      a {
                        text-decoration: none;
                        color: inherit;
                      }
                      
                      a,
                      img,
                      span,
                      input,
                      label,
                      button,
                      ion-icon { display: block; }
                      
                      img { height: auto; }
                      
                      input,
                      button {
                        background: none;
                        border: none;
                        font: inherit;
                      }
                      
                      input { width: 100%; }
                      
                      button { cursor: pointer; }
                      
                      ion-icon { pointer-events: none; }
                      
                      address { font-style: normal; }
                      
                      :focus-visible { outline-offset: 4px; }
                      
                      ::selection {
                        background-color: var(--black_50);
                        color: var(--white);
                      }
                      
                      html {
                        font-size: 10px;
                        font-family: var(--ff-roboto);
                        scroll-behavior: smooth;
                      }
                      
                      body {
                        font-size: 1.6rem;
                        background-color: var(--white);
                      }
                      
                      
                      
                      
                      
                      /*-----------------------------------*\
                        #REUSED STYLE
                      \*-----------------------------------*/
                      
                      .container { padding-inline: 15px; }
                      
                      .btn {
                        background-color: var(--bg-color, var(--emerald));
                        color: var(--color, var(--white));
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        width: max-content;
                        font-size: var(--fs, var(--fs-7));
                        font-weight: var(--fw, var(--fw-500));
                        padding: var(--padding, 15px 20px);
                        border-radius: 50px;
                        transition: var(--transition-2);
                      }
                      
                      .btn ion-icon { font-size: 1.6rem; }
                      
                      .btn-primary:is(:hover, :focus) { --bg-color: var(--green-pigment); }
                      
                      .section { padding-block: var(--section-padding); }
                      
                      .h2 {
                        font-size: var(--fs-1);
                        font-weight: var(--fw-500);
                        color: var(--russian-violet);
                      }
                      
                      .h3 {
                        font-family: var(--ff-playfair-display);
                        font-size: var(--fs-4);
                      }
                      
                      .w-100 { width: 100%; }
                      
                      .has-scrollbar {
                        display: flex;
                        overflow-x: auto;
                        padding-block-end: 30px;
                        margin-block-end: -30px;
                        scroll-snap-type: inline mandatory;
                      }
                      
                      .has-scrollbar::-webkit-scrollbar { height: 10px; }
                      
                      .has-scrollbar::-webkit-scrollbar-thumb {
                        background-color: transparent;
                        border-radius: 15px;
                      }
                      
                      .has-scrollbar:hover::-webkit-scrollbar-thumb { background-color: var(--black_25); }
                      
                      .section-subtitle {
                        color: var(--emerald);
                        font-family: var(--ff-playfair-display);
                        font-size: var(--fs-3);
                        font-style: italic;
                        margin-block-end: 10px;
                      }
                      
                      .section-subtitle,
                      .section-title { text-align: center; }
                      
                      .grid-list {
                        display: grid;
                        gap: 30px;
                      }
                      
                      .rating-wrapper {
                        color: var(--yellow-orange);
                        display: flex;
                        justify-content: var(--justify-content, center);
                        gap: 2px;
                        font-size: 1.4rem;
                      }
                      
                      .product-card {
                        background-color: var(--mint-cream);
                        padding: 30px 20px;
                        text-align: center;
                        outline: 2px solid transparent;
                        transition: var(--transition-2);
                      }
                      
                      .product-card:is(:hover, :focus-within) { outline-color: var(--emerald); }
                      
                      .product-card .card-banner {
                        position: relative;
                        max-width: max-content;
                        margin-inline: auto;
                        margin-block-end: 20px;
                      }
                      
                      .product-card .card-banner img { transition: var(--transition-2); }
                      
                      .product-card:is(:hover, :focus-within) .card-banner img { opacity: 0.6; }
                      
                      .product-card .btn-wrapper {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        display: flex;
                        align-items: center;
                        gap: 10px;
                      }
                      
                      .product-card .product-btn {
                        position: relative;
                        background-color: var(--emerald);
                        font-size: var(--fs, 2rem);
                        color: var(--white);
                        padding: var(--padding, 12px);
                        border-radius: 50%;
                        opacity: 0;
                        transition: var(--transition-2);
                      }
                      
                      .product-card .product-btn ion-icon { --ionicon-stroke-width: 50px; }
                      
                      .tooltip {
                        position: absolute;
                        bottom: calc(100% + 10px);
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: var(--black_90);
                        border-radius: var(--radius-4);
                        font-size: var(--fs-7);
                        min-width: max-content;
                        padding: 4px 12px;
                        pointer-events: none;
                        opacity: var(--opacity, 0);
                        transition: var(--transition-2);
                      }
                      
                      .tooltip::after {
                        content: "";
                        position: absolute;
                        top: 20px;
                        left: 50%;
                        transform: translateX(-50%) rotate(45deg);
                        border: 5px solid transparent;
                        border-bottom-color: var(--black_90);
                        border-right-color: var(--black_90);
                      }
                      
                      .product-card:is(:hover, :focus-within) .product-btn { opacity: 1; }
                      
                      .product-card .product-btn:is(:hover, :focus) { background-color: var(--gunmetal-2); }
                      
                      .product-card .product-btn:is(:hover, :focus) .tooltip { --opacity: 1; }
                      
                      .product-card .rating-wrapper { margin-block-end: 10px; }
                      
                      .product-card .card-title {
                        color: var(--russian-violet);
                        font-size: var(--fs-4);
                        font-weight: var(--fw-500);
                        margin-block-end: 10px;
                      }
                      
                      .product-card .card-title > a { transition: var(--transition-2); }
                      
                      .product-card .card-title > a:is(:hover, :focus) { color: var(--emerald); }
                      
                      .product-card .price-wrapper {
                        font-size: var(--fs-6);
                        margin-block-end: 15px;
                      }
                      
                      .product-card .price-wrapper .del { color: var(--battleship-gray); }
                      
                      .product-card .price-wrapper .price {
                        color: var(--emerald);
                        margin-inline-start: 5px;
                      }
                      
                      .product-card .btn {
                        margin-inline: auto;
                        --padding: 12px 18px;
                      }
                      
                      /*-----------------------------------*\
                        #MEDIA QUERIES
                      \*-----------------------------------*/
                      @media (min-width: 480px) {
                      }
                      /**
                       * responsive for larger than 569px screen
                       */
                      
                      @media (min-width: 569px) {
                    
                        :root {
                          --fs-1: 3.2rem;
                        }
                        /**
                         * REUSED STYLE
                         */
                      
                        .container {
                          max-width: 520px;
                          margin-inline: auto;
                        }
                      }
                      /**
                       * responsive for larger than 768px screen
                       */
                      
                      @media (min-width: 768px) {
                    
                        :root {
                          --fs-1: 3.8rem;
                        }
                    
                        .container { max-width: 700px; }
                      
                      
                      
                    
                      
                      
                      
                    
                      }
                      
                      
                      
                      
                      
                      /**
                       * responsive for larger than 992px screen
                       */
                      
                      @media (min-width: 992px) {
                      
                        /**
                         * REUSED STYLE
                         */
                      
                        .container {
                          padding-inline: 40px;
                          max-width: 1020px;
                        }
                      
                      }
                    
                      
                      @media (min-width: 1200px) {
                      
                        /**
                         * REUSED STYLE
                         */
                      
                        .container { max-width: 1200px; }
                      
                      
                    
                      
                      }
                    
                      #home.css
                    \*-----------------------------------*/
                    
                    /*-----------------------------------*\
                      #OFFERS
                    \*-----------------------------------*/
                    
                    .offers-item {
                      min-width: 100%;
                      margin-inline: 15px;
                      scroll-snap-align: start;
                    }
                    
                    .offers-card {
                      background-color: var(--mint-cream);
                      padding: 30px 10px;
                      text-align: center;
                    }
                    
                    .offers-card .card-banner { margin-block-end: 20px; }
                    
                    .offers-card .card-banner img {
                      max-width: max-content;
                      margin-inline: auto;
                    }
                    
                    .offers-card .card-subtitle {
                      color: var(--emerald);
                      font-size: var(--fs-7);
                      font-weight: var(--fw-700);
                      text-transform: uppercase;
                      margin-block-end: 5px;
                    }
                    
                    .offers-card .card-title {
                      color: var(--gunmetal-2);
                      margin-block-end: 12px;
                    }
                    
                    .offers-card .btn {
                      max-width: max-content;
                      margin-inline: auto;
                      --fs: var(--fs-8);
                      --fw: var(--fw-400);
                      --padding: 12px 25px;
                    }
                    
                    
                    
                    
                    
                    /*-----------------------------------*\
                      #PRODUCT
                    \*-----------------------------------*/
                    
                    .product { padding-block-start: 0; }
                    
                    .product .section-title { margin-block-end: 40px; }
                    
                    .filter-list {
                      display: flex;
                      flex-wrap: wrap;
                      justify-content: center;
                      align-items: center;
                      gap: 20px;
                      margin-block-end: 50px;
                    }
                    
                    .filter-btn {
                      display: flex;
                      align-items: center;
                      gap: 10px;
                      min-width: 200px;
                      background-color: var(--mint-cream);
                      color: var(--gunmetal-2);
                      padding: 15px 20px;
                      font-size: var(--fs-5);
                      font-family: var(--ff-playfair-display);
                      font-weight: var(--fw-600);
                    }
                    
                    .filter-btn.active .default,
                    .filter-btn .color { display: block; }
                    
                    .filter-btn .default,
                    .filter-btn.active .color { display: none; }
                    
                    .filter-btn.active {
                      background-color: var(--emerald);
                      color: var(--white);
                    }
                    
                    
                    
                    
                    
                    /*-----------------------------------*\
                      #CTA
                    \*-----------------------------------*/
                    
                    .cta {
                      background-image: url("../images/cta-bg.png");
                      background-color: var(--mint-cream);
                      background-repeat: no-repeat;
                      background-size: cover;
                      background-position: center;
                      text-align: center;
                      padding: 50px 20px;
                    }
                    
                    .cta .section-title {
                      --fs-1: 2.5rem;
                      margin-block-start: 20px;
                    }
                    
                    .cta-text {
                      color: var(--sonic-silver);
                      font-size: var(--fs-4);
                      margin-block: 15px 30px;
                    }
                    
                    .cta .btn { margin-inline: auto; }
                    
                    
                    
                    
                    
                    /*-----------------------------------*\
                      #TOP PRODUCT
                    \*-----------------------------------*/
                    
                    .top-product .section-title { margin-block-end: 40px; }
                    
                    .top-product-card .card-banner { margin-block-end: 40px; }
                    
                    .top-product-card .product-btn {
                      --padding: 8px;
                      --fs: 1.6rem;
                    }
                    
                    .top-product-card .card-content {
                      margin-block-end: -46px;
                      transition: var(--transition-2);
                    }
                    
                    .top-product-card :is(.rating-wrapper, .card-title) { margin-block-end: 12px; }
                    
                    .top-product-card .rating-wrapper { transition: var(--transition-2); }
                    
                    .top-product-card .btn,
                    .top-product-card:is(:hover, :focus-within) .rating-wrapper { opacity: 0; }
                    
                    .top-product-card:is(:hover, :focus-within) .card-content { transform: translateY(-41px); }
                    
                    .top-product-card:is(:hover, :focus-within) .btn { opacity: 1; }
                    
                    /*-----------------------------------*\
                      #MEDIA QUERIES
                    \*-----------------------------------*/
                    
                    /**
                     * responsive for larger than 480px screen
                     */
                    
                    @media (min-width: 480px) {
                    
                    
                      /**
                       * SERVICE
                       */
                    
                      .service-item { justify-content: center; }
                    
                    
                    
                      /**
                       * OFFERS
                       */
                    
                      .offers-card {
                        text-align: left;
                        height: 100%;
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        align-items: center;
                        padding: 30px 40px;
                      }
                    
                      .offers-card .card-banner {
                        margin-block-end: 0;
                        order: 1;
                      }
                    
                      .offers-card .btn { margin-inline: 0; }
                    
                    
                    
                      /**
                       * PRODUCT
                       */
                    
                      .product .grid-list {
                        grid-template-columns: 1fr 1fr;
                        column-gap: 20px;
                      }
                    
                      .product-card .card-banner img { width: 100%; }
                    
                    
                    }
                    
                    
                    
                    
                    
                    /**
                     * responsive for larger than 569px screen
                     */
                    
                    @media (min-width: 569px) {
                    
                      /**
                       * SERVICE
                       */
                    
                      .service-list { grid-template-columns: 1fr 1fr; }
                    
                    
                    
                      /**
                       * CTA
                       */
                    
                      .cta .section-subtitle { --fs-3: 3rem; }
                    
                      .cta .section-title { --fs-1: 3.5rem; }
                    
                      .cta-text { --fs-4: 2rem; }
                    
                    
                    
                      /**
                       * TOP PRODUCT
                       */
                    
                      .top-product-card {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        text-align: left;
                      }
                     
                    
                      .top-product-card .card-banner {
                        margin-block-end: 0;
                        margin-inline: 0;
                      }
                    
                      .top-product-card .rating-wrapper { --justify-content: flex-start; }
                    
                      .top-product-card .btn { margin-inline: 0; }
                    
                    }
                    .card-banner{
                      height: auto;
                      width: 40%;
                    }
                    
                    
                    
                    
                    /**
                     * responsive for larger than 768px screen
                     */
                    
                    @media (min-width: 768px) {
                    
                      /**
                       * REUSED STYLE FOR HOME
                       */
                    
                      :is(.hero, .cta, .blog, .newsletter) .btn {
                        --fs: 1.8rem;
                        --fw: var(--fw-700);
                        --padding: 18px 50px;
                      }
                    
                    
                    
                    
                    
                    
                    
                      /**
                       * SERVICE
                       */
                    
                      .service-list { grid-template-columns: repeat(3, 1fr); }
                    
                    
                    
                      /**
                       * OFFERS
                       */
                    
                      .offers-list { gap: 30px; }
                    
                      .offers-item {
                        min-width: calc(50% - 15px);
                        margin-inline: 0;
                      }
                    
                    
                    
                      /**
                       * CTA
                       */
                    
                      .cta { padding-block: 80px; }
                    
                    
                    
                      /**
                       * TOP PRODUCT
                       */
                    
                      .top-product-list { grid-template-columns: 1fr 1fr; }
                    
                      .top-product-card {
                        justify-content: flex-start;
                        gap: 15px;
                        height: 100%;
                      }
                    
                      .top-product-card .card-banner { min-width: 110px; }
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    }
                    
                    
                    
                    
                    
                    /**
                     * responsive for larger than 992px screen
                     */
                    
                    @media (min-width: 992px) {
                    
                      /**
                       * HERO
                       */
                    
                      .hero-title { --fs-1: 5rem; }
                    
                    
                    
                      /**
                       * SERVICE
                       */
                    
                      .service-item { gap: 20px; }
                    
                      .item-icon { padding: 25px; }
                    
                      .item-title { --fs-4: 2.7rem; }
                    
                    
                    
                      /**
                       * OFFERS
                       */
                    
                      .offers-card { padding-block: 70px; }
                    
                      .offers-card .card-title { --fs-4: 2.3rem; }
                    
                      .offers-card .btn {
                        --fs-8: 1.5rem;
                        --padding: 15px 25px;
                      }
                    
                    
                    
                      /**
                       * PRODUCT
                       */
                    
                      .filter-btn {
                        padding: 30px;
                        gap: 15px;
                      }
                    
                      .filter-btn > img { transform: scale(1.5); }
                    
                      .product .grid-list { grid-template-columns: repeat(4, 1fr); }
                    
                    
                    
                      /**
                       * CTA
                       */
                    
                      .cta { padding-block: 120px; }
                    
                    
                    
                      /**
                       * TOP PRODUCT
                       */
                    
                      .top-product-list { grid-template-columns: repeat(3, 1fr); }
                    
                    
                    
                     
                    
                    
                    
                     
                    
                    
                    
                    
                    
                    /**
                     * responsive for larger than 1200px screen
                     */
                    
                    
                    
                    
                    
                    
                    
                    
                    }
                    
                    .item-title:hover {
                    color: black;
                    }
                    /* .service:hover{
                      background: transparent;
                    } */
                    i{
                      size: 50px;
                    }
                    html {
                      --scrollbarBG: #f7f7f6;
                      --thumbBG: #61ed84;
                    }
                    body::-webkit-scrollbar {
                      width: 11px;
                    }
                    body {
                      /* scrollbar-width: thin; */
                      scrollbar-color: var(--thumbBG) var(--scrollbarBG);
                    }
                    body::-webkit-scrollbar-track {
                      background: var(--scrollbarBG);
                    }
                    body::-webkit-scrollbar-thumb {
                      background-color: var(--thumbBG) ;
                      border-radius: 6px;
                      border: 2.2px solid var(--scrollbarBG);
                    }

                    footer {
                      background-color: #1a1a1a;
                    }

                    footer .company-logo h3 {
                      color: white;
                      font-size: 1.5rem;
                    }

                    footer .company-logo h3 b {
                      font-weight: 900;
                    }

                    footer .link-col h3 {
                      color: white;
                    }

                    footer .link-col .hover-links {
                      color: #d9d9d9;
                    }

                    footer .link-col .hover-links:hover {
                      color: #46d754;
                    }

                    .sub-footer {
                      background-color: #0d0d0d;
                    }

                    .sub-footer-con p {
                      color: #d9d9d9;
                    }

                    .sub-footer-con .hover-links {
                      color: #d9d9d9;
                      font-size: 1.5rem;
                    }